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

主要知識：

1.定義本地json文件
2.本地文件引入
3.小程序列表渲染實(shí)現(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: '點(diǎn)心', isChild: true, children: [ {  child_id: 1,  name: "點(diǎn)心" } ] }, { 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: '運(yùn)動鞋', isChild: false, children: [] }, { id: 'hzp', name: '化妝品', isChild: false, children: [] }, { id: 'life', name: '日常用品', isChild: false, children: [] }, { id: 'computer', name: '電腦', isChild: false, children: [] }, { id: 'phone', name: '手機(jī)', isChild: false, children: [] } ] //導(dǎo)出數(shù)據(jù) module.exports={ dataList:categoryJson }

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

<view class="main"> <view class="categroy-left"> <!-- 當(dāng)前項(xiàng)的id等于item項(xiàng)的id或者當(dāng)前的下標(biāo)等于item的下標(biāo)時，那個就是當(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樣式。