小程序实现分类页


Posted in Javascript onJuly 12, 2019

分类界页面中,左边是一级目录,右边是一级目录对应的二级目录,根据这个需求,我们数据设计的结构是数组嵌套数组,第一个数组包含一级目录数据,嵌套的数组包含的是二级目录的数据。

主要知识:

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

效果图

小程序实现分类页

好啦,大功告成!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
在IE中调用javascript打开Excel的代码(downmoon原作)
Apr 02 Javascript
js function定义函数的几种不错方法
Feb 27 Javascript
基于jQuery的判断iPad、iPhone、Android是横屏还是竖屏的代码
May 11 Javascript
JS获取浏览器语言动态加载JS文件示例代码
Oct 31 Javascript
jQuery实现仿新浪微博浮动的消息提示框(可智能定位)
Oct 10 Javascript
js判断文件格式及大小的简单实例(必看)
Oct 11 Javascript
Javascript中return的使用与闭包详解
Jan 11 Javascript
js实现文字跑马灯效果
Feb 23 Javascript
详解10分钟学会vue滚动行为
Sep 21 Javascript
js拖动滑块和点击水波纹效果实例代码
Oct 16 Javascript
vue实现表单未编辑或未保存离开弹窗提示功能
Apr 08 Javascript
解决antd 表单设置默认值initialValue后验证失效的问题
Nov 02 Javascript
jquery实现自定义树形表格的方法【自定义树形结构table】
Jul 12 #jQuery
小程序实现搜索框
Jun 19 #Javascript
ECharts地图绘制和钻取简易接口详解
Jul 12 #Javascript
vue cli安装使用less的教程详解
Jul 12 #Javascript
Js通过AES加密后PHP用Openssl解密的方法
Jul 12 #Javascript
django js 实现表格动态标序号的实例代码
Jul 12 #Javascript
JavaScript中的连续赋值问题实例分析
Jul 12 #Javascript
You might like
关于我转生变成史莱姆这档事:第二季PV上线,萌王2021年回归
2020/05/06 日漫
ThinkPHP中的三大自动简介
2014/08/22 PHP
php中Socket创建与监听实现方法
2015/01/05 PHP
使用PHPExcel操作Excel用法实例分析
2015/03/26 PHP
PHP使用Nginx实现反向代理
2017/09/20 PHP
Bootstrap+PHP实现多图上传功能实例详解
2018/04/08 PHP
PHP+Ajax实现上传文件进度条动态显示进度功能
2018/06/04 PHP
疯狂Jquery第一天(Jquery学习笔记)
2012/05/11 Javascript
jquery获取元素索引值index()示例
2014/02/13 Javascript
jQuery实现平滑滚动页面到指定锚点链接的方法
2015/07/15 Javascript
全系IE支持Bootstrap的解决方法
2015/10/19 Javascript
Bootstrap每天必学之轮播(Carousel)插件
2016/04/25 Javascript
基于ajax与msmq技术的消息推送功能实现代码
2016/12/26 Javascript
利用n 升级工具升级Node.js版本及在mac环境下的坑
2017/02/15 Javascript
Boostrap栅格系统与自己额外定义的媒体查询的冲突问题
2017/02/19 Javascript
详细分析jsonp的原理和实现方式
2017/11/20 Javascript
浅谈Webpack 是如何加载模块的
2018/05/24 Javascript
Angular6封装http请求的步骤详解
2018/08/13 Javascript
Vue实现todo应用的示例
2021/02/20 Vue.js
[01:00:06]加油DOTA_EP01_网络版
2014/08/09 DOTA
[32:56]完美世界DOTA2联赛PWL S3 Rebirth vs CPG 第二场 12.11
2020/12/16 DOTA
Python常用的文件及文件路径、目录操作方法汇总介绍
2015/05/21 Python
python3操作微信itchat实现发送图片
2018/02/24 Python
Python学习_几种存取xls/xlsx文件的方法总结
2018/05/03 Python
Python实现性能自动化测试竟然如此简单
2019/07/30 Python
解决python多行注释引发缩进错误的问题
2019/08/23 Python
HTML5之SVG 2D入门13—svg对决canvas及长处和适用场景分析
2013/01/30 HTML / CSS
html5中的一些标签学习(心得)
2016/10/18 HTML / CSS
中国网上药店领导者:1药网
2017/02/16 全球购物
美国购买体育、音乐会和剧院门票网站:SelectATicket
2019/09/08 全球购物
国际政治个人自荐信范文
2013/11/26 职场文书
年度考核自我鉴定
2014/02/02 职场文书
致接力运动员加油稿
2015/07/21 职场文书
Java循环队列与非循环队列的区别总结
2021/06/22 Java/Android
Python制作一个随机抽奖小工具的实现
2021/07/07 Python
Java 实现限流器处理Rest接口请求详解流程
2021/11/02 Java/Android