小程序實現分類頁

2019-11-19 11:11:35

字體：大中小

來源：轉載

供稿：網友

分類界頁面中，左邊是一級目錄，右邊是一級目錄對應的二級目錄，根據這個需求，我們數據設計的結構是數組嵌套數組，第一個數組包含一級目錄數據，嵌套的數組包含的是二級目錄的數據。

主要知識：

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

定義本地的json數據源

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

//模擬json數據 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: [] } ] //導出數據 module.exports={ dataList:categoryJson }

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

<view class="main"> <view class="categroy-left"> <!-- 當前項的id等于item項的id或者當前的下標等于item的下標時，那個就是當前狀態- --> <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> <!-- 若無數據，則顯示暫無數據 --> <view class='nodata' wx:else>該分類暫無數據</view> </scroll-view></view>

說明：

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

將本地數據引入到列表中――categroy.js文件

//引入本地的json數據var jsonData=require("../../data/categroryData.js")Page({ data: { curIndex: 0, toView: 'guowei' }, onLoad(){ this.setData({ //jsonData.dataList獲取data文件中categoryData.js中定義的Json數據，并賦值給category category: jsonData.dataList }) }, switchTab(e){ //將獲取到的item的id和數組的下表值設為當前的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; }

效果圖