小程序实现分类页


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下有效)关于checkbox 三态
May 12 Javascript
基于jquery的商品展示放大镜
Aug 07 Javascript
用Juery网页选项卡实现代码
Jun 13 Javascript
深入分析js中的constructor和prototype
Apr 07 Javascript
JavaScript中的面向对象介绍
Jun 30 Javascript
jQuery simpleModal插件的使用介绍
Aug 30 Javascript
详解前后端分离之VueJS前端
May 24 Javascript
jQuery 循环遍历改变a标签的href(实例讲解)
Jul 12 jQuery
angularjs实现猜数字大小功能
May 20 Javascript
toString.call()通用的判断数据类型方法示例
Aug 28 Javascript
在antd4.0中Form使用initialValue操作
Nov 02 Javascript
vue router 动态路由清除方式
May 25 Vue.js
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
模拟OICQ的实现思路和核心程序(一)
2006/10/09 PHP
PHP目录函数实现创建、读取目录教程实例
2011/01/13 PHP
浅析echo(),print(),print_r(),return之间的区别
2013/11/27 PHP
PHP写日志的实现方法
2014/11/05 PHP
php实现的数字验证码及数字运算验证码
2015/07/30 PHP
WordPress中查询文章的循环Loop结构及用法分析
2015/12/17 PHP
FormValid0.5版本发布,带ajax自定义验证例子
2007/08/17 Javascript
html中table数据排序的js代码
2011/08/09 Javascript
一些有用的JavaScript和jQuery的片段分享
2011/08/23 Javascript
基于jQuery的弹出框插件
2012/03/18 Javascript
IE网页js语法错误2行字符1、FF中正常的解决方法
2013/09/09 Javascript
jQuery学习笔记之jQuery+CSS3的浏览器兼容性
2015/01/19 Javascript
继续学习javascript闭包
2015/12/03 Javascript
javascript对象的创建和访问
2016/03/08 Javascript
JS中去掉array中重复元素的方法
2017/05/26 Javascript
Angular 表单控件示例代码
2017/06/26 Javascript
vue loadmore 组件滑动加载更多源码解析
2017/07/19 Javascript
使用Angular CLI从蓝本生成代码详解
2018/03/24 Javascript
vue项目中api接口管理总结
2018/04/20 Javascript
Vue异步组件处理路由组件加载状态的解决方案
2018/09/07 Javascript
vue-cli V3.0版本的使用详解
2018/10/24 Javascript
javascript设计模式 ? 观察者模式原理与用法实例分析
2020/04/22 Javascript
Python Mysql数据库操作 Perl操作Mysql数据库
2009/01/12 Python
Python3处理文件中每个词的方法
2015/05/22 Python
使用python调用zxing库生成二维码图片详解
2017/01/10 Python
Python判断一个三位数是否为水仙花数的示例
2018/11/13 Python
pygame游戏之旅 添加游戏介绍
2018/11/20 Python
django 使用 PIL 压缩图片的例子
2019/08/16 Python
pycharm不能运行.py文件的解决方法
2020/02/12 Python
python爬虫开发之PyQuery模块详细使用方法与实例全解
2020/03/09 Python
Python 读取xml数据,cv2裁剪图片实例
2020/03/10 Python
Pyside2中嵌入Matplotlib的绘图的实现
2021/02/22 Python
英国著名的美容护肤和护发产品购物网站:Lookfantastic
2020/11/23 全球购物
学校扫黄打非工作总结
2015/10/15 职场文书
用Python写一个简易版弹球游戏
2021/04/13 Python
baselines示例程序train_cartpole.py的ImportError
2022/05/20 Python