小程序實現分類頁

2020-03-21 15:52:16

字體：大中小

來源：轉載

供稿：網友

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

主要知識：

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; }

效果圖

小程序,分類頁