小程序实现分类页


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 相关文章推荐
showModelessDialog()使用详解
Sep 21 Javascript
给文字加上着重号的JS代码
Nov 12 Javascript
jQuery实现的网页右下角tab样式在线客服效果代码
Oct 23 Javascript
javascript运动效果实例总结(放大缩小、滑动淡入、滚动)
Jan 08 Javascript
微信小程序  checkbox组件详解及简单实例
Jan 10 Javascript
微信小程序 request接口的封装实例代码
Apr 26 Javascript
jQuery实现一个简单的验证码功能
Jun 26 jQuery
Vue中如何实现轮播图的示例代码
Jul 27 Javascript
react-router browserHistory刷新页面404问题解决方法
Dec 29 Javascript
微信小程序实现指定显示行数多余文字去掉用省略号代替
Jul 25 Javascript
详解Vue路由自动注入实践
Apr 17 Javascript
js实现移动端吸顶效果
Jan 08 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
全国FM电台频率大全 - 8 黑龙江省
2020/03/11 无线电
CodeIgniter php mvc框架 中国网站
2008/05/26 PHP
PHP5.2中date()函数显示时间与北京时间相差8小时的解决办法
2009/05/28 PHP
php 模拟post_验证页面的返回状态(实例讲解)
2013/10/28 PHP
php常用字符串处理函数实例分析
2014/11/22 PHP
javascript获取URL参数与参数值的示例代码
2013/12/20 Javascript
javascript 用函数语句和表达式定义函数的区别详解
2014/01/06 Javascript
JavaScript通过正则表达式实现表单验证电话号码
2014/03/07 Javascript
jquery实现的一个简单进度条效果实例
2014/05/12 Javascript
用js替换除数字与逗号以外的所有字符的代码
2014/06/07 Javascript
jQuery的text()方法用法分析
2014/12/20 Javascript
nodejs个人博客开发第二步 入口文件
2017/04/12 NodeJs
利用vueJs实现图片轮播实例代码
2017/06/03 Javascript
JavaScript切换搜索引擎的导航网页搜索框实例代码
2017/06/11 Javascript
JSON 数据格式详解
2017/09/13 Javascript
vue生成token保存在客户端localStorage中的方法
2017/10/25 Javascript
微信小程序模拟cookie的实现
2018/06/20 Javascript
基于JavaScript实现一个简单的Vue
2018/09/26 Javascript
通过layer实现可输入的模态框的例子
2019/09/27 Javascript
Vue.js中的高级面试题及答案
2020/01/13 Javascript
如何通过JS实现日历简单算法
2020/10/14 Javascript
python snownlp情感分析简易demo(分享)
2017/06/04 Python
Python解决八皇后问题示例
2018/04/22 Python
Python WSGI的深入理解
2018/08/01 Python
python 将大文件切分为多个小文件的实例
2019/01/14 Python
python列表使用实现名字管理系统
2019/01/30 Python
python反爬虫方法的优缺点分析
2020/11/25 Python
使用CSS3制作倾斜导航条和毛玻璃效果
2017/09/12 HTML / CSS
应届大学生求职的自我评价
2013/11/17 职场文书
《盲人摸象》教学反思
2014/02/16 职场文书
社团2014年植树节活动总结
2014/03/11 职场文书
小学师德师风整改措施
2014/10/27 职场文书
2015年“我们的节日·重阳节”活动总结
2015/07/29 职场文书
Python基础知识之变量的详解
2021/04/14 Python
win10更新失败无限重启解决方法
2022/04/19 数码科技
mysql字段为NULL索引是否会失效实例详解
2022/05/30 MySQL