小程序实现分类页


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 相关文章推荐
jquery UI 1.72 之datepicker
Dec 29 Javascript
某页码显示的helper 少量调整,另附js版
Sep 12 Javascript
深入理解JavaScript中的传值与传引用
Dec 09 Javascript
JavaScript遍历table表格中的某行某列并打印其值
Jul 08 Javascript
js判断浏览器是否支持html5
Aug 17 Javascript
node.js中的http.response.removeHeader方法使用说明
Dec 14 Javascript
js简单实现表单中点击按钮动态增加输入框数量的方法
Aug 18 Javascript
javascript实现状态栏中文字动态显示的方法
Oct 20 Javascript
$.browser.msie 为空或不是对象问题的多种解决方法
Mar 19 Javascript
微信公众号菜单配置微信小程序实例详解
Mar 31 Javascript
20行js代码实现的贪吃蛇小游戏
Jun 20 Javascript
使用JQ完成表格隔行换色的简单实例
Aug 25 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
ThinkPHP使用smarty模板引擎的方法
2014/07/01 PHP
php实现遍历目录并删除指定文件中指定内容
2015/01/21 PHP
Joomla简单判断用户是否登录的方法
2016/05/04 PHP
php+mysql开发的最简单在线题库(在线做题系统)完整案例
2019/03/30 PHP
Track Image Loading效果代码分析
2007/08/13 Javascript
js变量以及其作用域详解
2020/07/18 Javascript
javascript实现焦点滚动图效果 具体方法
2013/06/24 Javascript
jQuery制作仿腾讯web qq用户体验桌面
2013/08/20 Javascript
Jquery Post处理后不进入回调的原因及解决方法
2014/07/15 Javascript
DOM事件阶段以及事件捕获与事件冒泡先后执行顺序(图文详解)
2015/08/18 Javascript
JavaScript实现横向滑出的多级菜单效果
2015/10/09 Javascript
javascript自定义滚动条实现代码
2020/04/20 Javascript
理解javascript函数式编程中的闭包(closure)
2016/03/08 Javascript
js模式化窗口问题![window.dialogArguments]
2016/10/30 Javascript
用 js 的 selection range 操作选择区域内容和图片
2017/04/18 Javascript
View.post() 不靠谱的地方你知道多少
2017/08/29 Javascript
Vuejs中使用markdown服务器端渲染的示例
2017/11/22 Javascript
vue 获取url参数、get参数返回数组的操作
2020/11/12 Javascript
基于python的Tkinter编写登陆注册界面
2017/06/30 Python
Python实现判断并移除列表指定位置元素的方法
2018/04/13 Python
python消除序列的重复值并保持顺序不变的实例
2018/11/08 Python
Django模板语言 Tags使用详解
2019/09/09 Python
Python字符串大小写转换拼接删除空白
2019/09/19 Python
基于python实现雪花算法过程详解
2019/11/16 Python
利用Python绘制Jazz网络图的例子
2019/11/21 Python
Python迭代器协议及for循环工作机制详解
2020/07/14 Python
美国娱乐和流行文化商品店:FYE
2017/09/14 全球购物
Tiqets荷兰:出售欧洲最美丽的景点和博物馆门票
2018/01/09 全球购物
上班看电影检讨书
2014/02/12 职场文书
化妆师职业生涯规划书
2014/02/16 职场文书
工商管理本科生求职信
2014/07/13 职场文书
学校关爱留守儿童活动方案
2014/08/27 职场文书
推广普通话共筑中国梦演讲稿
2014/09/21 职场文书
跑吧孩子观后感
2015/06/10 职场文书
初三数学教学反思
2016/02/17 职场文书
使用CSS连接数据库的方式
2022/02/28 HTML / CSS