第 2-2 課：前端之首頁實現
目錄
- 開篇
- 基礎篇
- 前端篇
所在路徑
client/pages/index/index
1 輪播實現
index.js data 數據如下，目前我們是沒有調後臺的數據，默認給出默認值方便頁面的展示
data: {
indicatorDots: true, //是否顯示面板指示點
autoplay: true, //自動輪播
interval: 3000, // 自動切換時間間隔
duration: 1000, // 滑動動畫時長
circular: true, //是否採用銜接滑動
banners: [{
image: "cloud://release-prod.7265-release-prod/banner/[email protected]",
name: "精美花生",
product_id: "5cf38858a87a1a18b65aefbe"
},
{
image: "cloud://release-prod.7265-release-prod/banner/[email protected]",
name: "精美開心果",
product_id: "5cf38858a87a1a18b65aefca"
},
{
image: "cloud://release-prod.7265-release-prod/banner/[email protected]",
name: "精美杏仁",
product_id: "5cf38858a87a1a18b65aefc2"
}
]
},
index.wxml
<!--pages/index/index.wxml-->
<view class='container'>
<!--1、輪播圖 -->
<swiper class='swiper-container' indicator-dots="{{indicatorDots}}" indicator-active-color='#fff'
autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" circular="{{circular}}">
<block wx:for="{{banners}}" wx:key="">
<swiper-item class='swiper-item'>
<image class='swiper-img' src="{{item.image}}" mode='scaleToFill' />
</swiper-item>
</block>
</swiper>
</view>
index.wxss
/* pages/index/index.wxss */
.container{
width:750rpx;
min-height: 100%;
display:flex;
flex-direction: column;
background-color: #fff;
}
/* 輪播圖 */
.swiper-container{
height: 360rpx;
width: 100%;
}
.swiper-item{
width: 750rpx;
height:100%;
border-top-left-radius: cover;
}
.swiper-item image{
width: 100%;
height: 100%;
}
這時我們就完成我們的輪播了，運行效果圖圖下：
2 主題實現
主題所需圖片存放在 pages/index/images 下面
index.js
data:{
/**
* 其他部分省略
*/
themes: [
{ theme_icon: 'images/[email protected]', theme_name: '新品糖果', theme_type: 1 },
{ theme_icon: 'images/[email protected]', theme_name: '精品果乾', theme_type: 2 },
{ theme_icon: 'images/[email protected]', theme_name: '美味堅果', theme_type: 3 },
{ theme_icon: 'images/[email protected]', theme_name: '優質推薦', theme_type: 4 },
],
}
index.wxml
<!--pages/index/index.wxml-->
<view class='container'>
<!-- 輪播圖代碼 -->
<!-- 2、主題欄 -->
<view class='theme-container' >
<block wx:for="{{themes}}" wx:key="index" >
<view class='theme-box' data-themeType="{{item.theme_type}}" bind:tap='themeNavigation'>
<view class='theme-icon'>
<image src='{{item.theme_icon}}'></image>
</view>
<text>{{item.theme_name}}</text>
</view>
</block>
</view>
</view>
index.wxss
/* 主題欄樣式 */
.theme-container{
width: 660rpx;
height: 180rpx;
display: inline-flex;
background-color: #fff;
justify-content: space-between;
}
.theme-box{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.theme-icon{
width: 90rpx;
height: 90rpx;
}
.theme-icon image{
width: 90rpx;
height: 90rpx;
}
.theme-box text{
height:28rpx;
font-size:24rpx;
color:rgba(83,82,83,1);
margin-top: 8rpx;
}
此段代碼運行效果如下：
3 最新上線
這部分包括標題欄和商品展示信息。會複用的東西我們寫一個組件方便後面的擴展。
新建 components 文件夾在 miniprogram 下面存放所有的組件。
首先我們實現標題欄組件，右擊 components 新建一個文件夾 title-bar ，並選擇新建 component ，輸入 index
以相同的方式創建一個商品信息相關得組件，組件名爲 product-column ,如果還不瞭解組件的同學可以看下官方實例，組件跟我們的頁面列表的 js 是有所不同的，在上句的鏈接官方的文檔中有所介紹，接下來我們也會通過實際開發給大家進一步瞭解。
product-column 商品的相關得組件會有多個，但是我們的數據可能是一樣的，這個時候我們就可以使用官方的Behavior (官方說明文檔)，後面在時間引用的時候大家可以多注意下。
title-bar/index.js
properties: {
title: String
}
titleBar/index.wxml
<view class='container'>
<view class='line'></view>
<text class='text'>{{title}}</text>
</view>
titleBar/index.wxss
/* components/titleBar/index.wxss */
.container{
display: flex;
align-items: center;
justify-content: flex-start;
padding-left: 32rpx;
margin-top: 35rpx;
}
.line{
width:6rpx;
height:32rpx;
background:rgba(60,185,66,1);
border-radius:6rpx;
}
.text{
padding-left: 19rpx;
line-height:30rpx;
font-weight:400;
font-size:32rpx;
color:rgba(56,56,57,1);
}
商品信息相關的組件公用的數據部分
product-behavior.js
module.exports = Behavior({
behaviors: [],
properties: {
product: { // 屬性名
type: Object,
value: '', // 屬性初始值（可選），如果未指定則會根據類型選擇一個
observer: function (product) {
}
}
},
methods: {
}
})
product-column/index .js 並引入上面的 behavior
// components/product-column/index.js
let productBehavior = require('../behaviors/product-behavior.js')
Component({
/**
* 組件的屬性列表
*/
properties: {
},
behaviors: [productBehavior],
/**
* 組件的初始數據
*/
data: {
},
/**
* 組件的方法列表
*/
methods: {
}
})
product-column/index .wxml
<!--components/product-column/index.wxml-->
<!-- 商品展示左右分隔 product-left product-left product-right -->
<view class='container'>
<!-- 商品展示左邊 -->
<view class='product-left'>
<view class='product-img' >
<image src="{{product.product_img}}"></image>
</view>
</view>
<!-- 商品展示右邊 -->
<view class='product-right'>
<!-- 商品基本信息上部分 -->
<view ><text class='product-title'>{{product.product_name}}</text></view>
<!-- 商品基本信息下部分 -->
<view class='product-content' >
<!-- 市場價 -->
<view class='market-price-container'>
<text>市場價:</text>
<text>￥</text>
<text>{{product.product_price}}</text>
</view>
<!-- 優惠價 -->
<view class='discount-price-container'>
<view class='discount-price-left'>
<text class='discount-price-desc' >優惠價:</text>
<text class='discount-price-symbol' >￥</text>
<text class='discount-price' >{{product.product_sell_price}}</text>
</view>
<view class='discount-price-right' bind:tap='productDetails'>
<button class='go'>立即購買</button>
</view>
</view>
</view>
</view>
</view>
product-column/index .wxss
/* components/product-column/index.wxss */
/* 容器盒子 */
.container{
display: inline-flex;
width:683rpx;
margin-left: 32rpx;
border-bottom:2rpx solid rgba(220,220,220,1);
background:#fff;
}
/* 展示商品左邊佈局 */
.product-left{
margin: 34rpx 0 30rpx 0;
}
.product-img image{
width:180rpx;
height:180rpx;
border-radius:10px;
}
/* 商品右邊部分顯示 */
.product-right{
width: 100%;
height:180rpx;
margin:34rpx 0 0 30rpx;
display: inline-flex;
flex-flow: column;
justify-content: space-between;
}
/* 商品名 */
.product-title{
font-size:30rpx;
font-weight:400;
color:#161514;
}
/* 市場價樣式 */
.market-price-container{
margin-bottom: -10rpx;
}
.market-price-container text{
height:23rpx;
font-size:24rpx;
font-weight:400;
color:#9B9B9B;
}
/* 優惠價格 */
.discount-price-container{
width: 100%;
display: inline-flex;
justify-content: space-between;
align-items: flex-end;
}
.discount-price-desc{
height:23rpx;
font-size:24rpx;
font-weight:400;
color:#424242;
}
.discount-price-symbol,.discount-price{
font-size:30rpx;
font-weight:400;
color:#FF5251;
}
.go{
width:156rpx;
height:56rpx;
line-height: 56rpx;
background:rgba(255,79,80,1);
border-radius:10rpx;
color: #fff;
font-size: 24rpx;
}
接下來在 index 中引入組件
index.json
{
"usingComponents": {
"title-bar-comp": "/components/title-bar/index",
"product-cloumn-comp": "/components/product-column/index"
}
}
usingComponents冒號前面的爲當前頁面需要使用的組件名稱，後面的是組件的路徑。引入之後我們直接就可以在頁面上使用了。
index.js
data: {
products: [{
_id: "5cf526aaa87a1a18b6624ae6",
product_description: "",
product_img: "cloud://release-prod.7265-release-prod/product/[email protected]",
product_name: "花生 300g",
product_price: 0.1,
product_sell_price: 0.1,
product_stock: 100
},
{
_id: "5cf526aaa87a1a18b6624ae8",
product_description: "",
product_img: "cloud://release-prod.7265-release-prod/product/[email protected]",
product_name: "夏威夷果 120g",
product_price: 0.1,
product_sell_price: 0.1,
product_stock: 100
},
{
_id: "5cf526aaa87a1a18b6624aea",
product_description: "",
product_img: "cloud://release-prod.7265-release-prod/product/[email protected]",
product_name: "杏仁 120g",
product_price: 0.1,
product_sell_price: 0.1,
product_stock: 100
},
{
_id: "5cf526aaa87a1a18b6624aec",
product_description: "",
product_img: "cloud://release-prod.7265-release-prod/product/[email protected]",
product_name: "黑桃 180g",
product_price: 0.1,
product_sell_price: 0.1,
product_stock: 100
}
]
}
index.wxml
<!-- 分割線 -->
<view class='dividing-line'></view>
<!-- 3、最新上線 -->
<view class='products-latest-container'>
<title-bar-comp title='最新上線'></title-bar-comp>
<block wx:for="{{products}}" wx:key="key">
<product-cloumn-comp product="{{item}}"></product-cloumn-comp>
</block>
</view>
title-bar-comp 的
title="最新上線"中 title 對應組件 properties 中的屬性名product-cloumn-comp 中的
product="{{item}}", product 對應 behaviors 中的屬性名
index.wxss
/* 分割線 */
.dividing-line{
width:750rpx;
height:22rpx;
background:rgba(249,249,249,1);
}
/* 最新上線 */
.products-latest-container{
width: 750rpx;
}
運行效果如下：
源碼地址
在搭建項目前，根據自己需要下載本系列文章的源代碼