首页 > 课堂 > 小程序 > 正文

小程序实现分类页

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

效果图

小程序,分类页

好啦,大功告成!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持VEVB武林网。


发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表