第 2-3 課：前端之分類實現
目錄
- 開篇
- 基礎篇
- 前端篇
所在路徑
client/pages/category/category
1 分類基本實現
category.js data數據如下，目前我們是沒有調後臺的數據，默認給出默認值方便頁面的展示
data: {
menuCategories: [{
category_name: '堅果炒貨',
category_type: 1
},
{
category_name: '休閒零食',
category_type: 2
},
{
category_name: '餅乾蛋糕',
category_type: 3
},
{
category_name: '蜜餞果乾',
category_type: 4
},
{
category_name: '肉乾肉脯',
category_type: 5
},
],
menuSelect: 1,
menuNmae: '',
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
}
]
},
category.wxml
<!--pages/category/category.wxml-->
<view class='container'>
<!-- 分類左邊選擇區域 -->
<scroll-view class='left-container' scroll-y="true">
<block wx:for="{{menuCategories}}" wx:key="key">
<view class="categoryBar {{ menuSelect==item.category_type?'active':''}}" data-id='{{item.category_type}}' data-index='{{index}}' bind:tap="menu">
<text >{{item.category_name}}</text>
</view>
</block>
</scroll-view>
<!-- 分類右邊選擇區域 -->
<scroll-view class='right-container' scroll-y="true">
<!--主題宣傳圖 -->
<view class='introduce-image'>
<image src='../../images/temp/category.png'></image>
</view>
<view class='category-name'>
<text>{{menuNmae}}</text>
</view>
<view class='product-container'>
<block wx:for="{{products}}" wx:key="key">
<category-comp product="{{item}}" bind:productDetails="productDetails" > </category-comp>
</block>
</view>
</scroll-view>
</view>
category.wxss
/* pages/category/category.wxss */
.container{
display: inline-flex;
width: 100%;
height: 100%;
background-color: white;
align-items:flex-start;
flex-direction:row;
}
.left-container{
width:146rpx;
height: 100%;
background:rgba(248,248,248,1);
}
.categoryBar{
display: inline-flex;
width:100%;
height:100rpx;
justify-content: center;
align-items: center;
color:#7A7A7A;
}
.categoryBar text{
font-size:24rpx;
font-weight:500;
line-height:40rpx;
}
.active{
color:#000000;
background:#fff;
border-left:6rpx solid #FF6200;
}
.active text{
color: #FF6200;
}
/* 隱藏滾動條 */
::-webkit-scrollbar{
width: 0;
height: 0;
color: transparent;
}
/* 右邊 */
.right-containerr{
width: 100rpx;
min-height: 100%;
display: inline-flex;
justify-content: center;
align-items: center;
background-color: #fff;
}
.introduce-image{
margin: 20rpx 16rpx;
}
.introduce-image image{
width:590rpx;
height:270rpx;
background:rgba(255,255,255,1);
border-radius:10rpx;
}
.category-name{
font-size:30rpx;
font-weight:400;
color:#686868;
text-align: center;
}
oduct-container{
display: flex;
flex-wrap:wrap;
margin: 10rpx 16rpx;
}
category.json
{
"navigationBarTitleText": "分類",
"usingComponents": {
"category-comp": "/components/product-category/index"
}
}
2 分類組件實現
商品信息我們任然封裝成組件 product-category/index：
index.js 在上章我們把商品組件公共的數據封裝成 Behavior ，在這裏就可以直接複用
// components/category/index.js
let productBehavior = require('../behaviors/product-behavior.js')
Component({
/**
* 組件的屬性列表
*/
properties: {
},
behaviors: [productBehavior],
/**
* 組件的初始數據
*/
data: {
},
/**
* 組件的方法列表
*/
methods: {
}
})
index.wxml
<!--components/category/index.wxml-->
<view class='container' >
<view class='product-img' >
<image src='{{product.product_img}}'></image>
</view>
<view class='product-name'>
<text>{{product.product_name}}</text>
</view>
</view>
index.wxss
/* components/category/index.wxss */
.container{
display: inline-flex;
flex-flow: column;
align-items: center;
width:180rpx;
margin-top: 20rpx;
margin-left: 18rpx;
}
.product-img image{
width:120rpx;
height:120rpx;
}
.product-name{
width: 150rpx;
font-size:22rpx;
font-weight:400;
color:#838383;
text-align: center;
}
完成效果如下：
源碼地址
在搭建項目前，根據自己需要下載本系列文章的源代碼