小程序?qū)崿F(xiàn)分類頁

2019-11-19 11:11:35

字體：大中小

供稿：網(wǎng)友

分類界頁面中，左邊是一級目錄，右邊是一級目錄對應(yīng)的二級目錄，根據(jù)這個需求，我們數(shù)據(jù)設(shè)計的結(jié)構(gòu)是數(shù)組嵌套數(shù)組，第一個數(shù)組包含一級目錄數(shù)據(jù)，嵌套的數(shù)組包含的是二級目錄的數(shù)據(jù)。

主要知識：

1.定義本地json文件
2.本地文件引入
3.小程序列表渲染實現(xiàn)
4.解析本地json

定義本地的json數(shù)據(jù)源

該文件在page下面的data文件下面的categroryData.js中

//模擬json數(shù)據(jù) var categoryJson=[ { id: 'guowei', name: '果味', isChild: true, children: [ {  child_id: 1,  name: "果味" } ] }, { id: 'shucai', name: '蔬菜', isChild: true, children: [ {  child_id: 1,  name: "蔬菜" } ] }, { id: 'chaohuo', name: '炒貨', isChild: true, children: [ {  child_id: 1,  name: "炒貨" } ] }, { id: 'dianxin', name: '點心', isChild: true, children: [ {  child_id: 1,  name: "點心" } ] }, { id: 'ganguo', name: '干果', isChild: false, children: [] }, { id: 'clothes', name: '衣服', isChild: false, children: [] }, { id: 'bag', name: '包包', isChild: false, children: [] }, { id: 'woman', name: '女鞋', isChild: false, children: [] }, { id: 'mansport', name: '男鞋', isChild: false, children: [] }, { id: 'sports', name: '運動鞋', isChild: false, children: [] }, { id: 'hzp', name: '化妝品', isChild: false, children: [] }, { id: 'life', name: '日常用品', isChild: false, children: [] }, { id: 'computer', name: '電腦', isChild: false, children: [] }, { id: 'phone', name: '手機', isChild: false, children: [] } ] //導(dǎo)出數(shù)據(jù) module.exports={ dataList:categoryJson }

顯示列表的頁面――categroy.wxml文件

<view class="main"> <view class="categroy-left"> <!-- 當(dāng)前項的id等于item項的id或者當(dāng)前的下標等于item的下標時，那個就是當(dāng)前狀態(tài)- --> <view wx:for="{{category}}" wx:key="index" data-id="{{item.id}}" data-index="{{index}}"  bindtap="switchTab"  class="cate-list {{curIndex === index?'active':''}}">{{item.name}}</view> </view> <scroll-view class="categroy-right" scroll-y="{{}}" scroll-into-view="{{toView}}" scroll-with-animation="true"> <view wx:if="{{category[curIndex].isChild}}"> <block wx:for="{{category[curIndex].children}}" wx:for-index wx:key="idx">  <view id="{{item.id}}" class="cate-box">  <view class="cate-title">  <text>{{item.name}}</text>  </view>  </view> </block>  </view> <!-- 若無數(shù)據(jù)，則顯示暫無數(shù)據(jù) --> <view class='nodata' wx:else>該分類暫無數(shù)據(jù)</view> </scroll-view></view>

說明：

curIndex === index?'active':'' ，根據(jù)是否和一級目錄index相同，來判斷是否選中文字。相同執(zhí)行.cate-list.active樣式，不相同則執(zhí)行.cate-list樣式。

將本地數(shù)據(jù)引入到列表中――categroy.js文件

//引入本地的json數(shù)據(jù)var jsonData=require("../../data/categroryData.js")Page({ data: { curIndex: 0, toView: 'guowei' }, onLoad(){ this.setData({ //jsonData.dataList獲取data文件中categoryData.js中定義的Json數(shù)據(jù)，并賦值給category category: jsonData.dataList }) }, switchTab(e){ //將獲取到的item的id和數(shù)組的下表值設(shè)為當(dāng)前的id和下標 this.setData({ toView: e.target.dataset.id, curIndex: e.target.dataset.index }) } })

列表樣式――category.wxss文件

 .main{ width:100%; height: 100%; } .categroy-left{ float: left; width: 150rpx; height: 100%; overflow-y: auto; border-right: 1px solid #ddd; box-sizing: border-box; } .categroy-left .cate-list{ height: 90rpx; line-height: 90rpx; text-align: center; border-left: 3px solid #fff; } .categroy-left .cate-list.active{ color: #AB956D; border-color: #AB956D; } .categroy-right{ float: right; width: 600rpx; height: 100%; } .cate-box{ height: 100%; padding:40rpx; box-sizing: border-box; } .cate-title{ position: relative; height: 30rpx; line-height: 30rpx; padding:30rpx 0 55rpx; text-align: center; color: #AB956D; font-size: 28rpx; } .cate-title::before{ position: absolute; left: 130rpx; top: 43rpx; content: ''; width: 70rpx; height: 4rpx; background: #AB956D; } .cate-title::after{ position: absolute; right: 130rpx; top: 43rpx; content: ''; width: 70rpx; height: 4rpx; background: #AB956D; }  .nodata{ font-size: 14px; text-align: center; color: #AB956D; margin-top: 100px; }

效果圖