小程序分类功能的实现
微信小程序的分类功能思路
实现思路
1.把屏幕当成一个固定的盒子,然后把盒子分成两边,并让盒子的每一边都能够滚动。
2.通过将左侧边栏元素的id和右边内容的categoryId进行匹配,渲染展示相同id的内容
页面data定义的初始数据
data: {classify_sidebar: [], //左侧边栏内容的数组classify_content: [], //右边内容元素的数组list: 124849, //绑定切换时的id},
1.先利用文档对左边的侧边栏进行布局和渲染
<!-- 左侧边栏 -->
<scroll-view class="left" scroll-y="true">
<view class="classify_sidebar">
<view class="{{item.id===list?'classify_active':''}}"
data-id="{{item.id}}"
catchtap="change"
wx:for='{{classify_sidebar}}'
wx:key="index">{{item.name}}</view>
</view>
</scroll-view>
运用三目运算符来给当前选中的元素切换样式(红色下划线),如果说当前元素的id和我们设置的list相同就添加类名加样式
class="{{item.id===list?'classify_active':''}}"
通过自定义来传参,根据左侧边栏元素的id来匹配右边的内容
data-id="{{item.id}}"
当用户点击不同的侧边栏目录时候,根据 data-id 去从数据库获取新的数据,
渲染到左侧,并且修改 list的值,使新样式添加到点击的元素上
catchtap="change"
change(e) {let {id} = e.currentTarget.datasetthis.contentFn(id) //封装的方法this.setData({list: id})wx.showLoading({title: '加载中',})setTimeout(() => {wx.hideLoading()}, 1000)},
2.右边内容的布局和渲染
<scroll-view class="right" scroll-y="true">
<!-- 右边的内容部分 -->
<view class="classify_content">
<!-- 右边内容的列表 -->
<text wx:if="{{classify_content.length == 0}}">————— 暂无数据 ————</text><view class="classify_content_list" wx:if="{{classify_content.length > 0}}" wx:for="{{classify_content}}" wx:key="index">
<!-- 右边内容的列表图片 -->
<image src="{{item.pic}}"></image>
<text class="classify_content_list_right_title">{{item.name}}</text>
</view>
<!-- 右边内容的列表结束 -->
</view>
<!-- 右边的内容部分结束 -->
</scroll-view>
wx:if="{{classify_content.length == 0}}">
如果说右边相对应的商品数量为零就显示 “暂无数据”
// 封装contentFn(tar) {let arr = []wx.request({url: 'https://api.it120.cc/lsn/shop/goods/list',success: res => {if (res.statusCode == 200) {res.data.data.forEach((item, v) => {if (item.categoryId == tar) {arr.push(item)}})this.data.classify_content = arr.reverse()this.setData({classify_content: this.data.classify_content})}}})},
思路
首先封装个方法然后在点击切换左侧边栏的时候进行调用
第一步:通过wx.request()去请求右边所有内容
第二步:如果说状态码200表示“服务器成功返回网页”
第三步:通过循环右边的内容,如果说当前categoryId等同于我们点击左侧边栏的id,数组push添加,同时倒序并且赋值给我们自己定义的数组和进行试图更新
小程序分类功能的实现相关推荐
- vc++6.0获取磁盘基本信息_微信小程序——常用功能2:微信小程序用户登录,申请用户授权并获取用户基本信息...
微信小程序--常用功能2:申请用户授权并获取用户基本信息 为了更好的用户体验,很多时候我们想要获取用户的基本信息,从而实现将信息呈现到用户界面.给用户划分地域.给用户分类等功能. 但是要想获取用户信息 ...
- 微信小程序基础功能解析
微信小程序是一个载体,开发者可在载体上发挥自己的创意,赋予它更多有趣且贴合企业的功能.许多企业在开发小程序时经常陷入困境,不知道自己要开发那些功能,要开发那些玩法,今天一起解析微信小程序开发过程中那些 ...
- 农家乐微信小程序开发功能
对于农家乐旅游行业的微信小程序开发,重点还是应该放在功能上,比如:为游客提供最便捷的路线,帮助使用者制定好相应的旅游景点,当然要有旅游费用的预估功能,帮助游客更好的了解出行的所有,让游客在进行农家乐旅 ...
- 微信小程序点播插件_5个常见的小程序插件功能,教你怎么用
微信小程序都有哪些插件可用?这些小程序插件功能,又该如何为企业赋能?下面就带大家了解一下,看完你就明白为什么现在这么多企业都喜欢用小程序来引流拉新,做品牌营销了. 1.小程序直播插件 电商直播是近一年 ...
- Java社交商城APP+小程序多功能B2B2C商城源码
Java社交商城APP+小程序多功能B2B2C商城源码 功能介绍 1)用户可通过邀请好友.签到赚取糖果: 2)用户可以通过平台获取想要的商品,领券购买并获取分佣提成: 3) 用户可以通过淘宝链接搜索商 ...
- 电子学习用品商城小程序开发功能需求分析
全民教育素质随着国人生活水平的提升得到大幅提高,传统的学习用品已经很难满足时代发展和社会进步的要求,现在孩子学习更注重学习用品的高效性.便捷性,对学习用品要求的强大拉力在很大程度上促进了电子学习用品的 ...
- 招投标小程序开发功能及源码
一般获取招投标信息的渠道主要有三种,一,来源于官方.正规的政府网站.公共资源交易中心等:二,能提供针对性的招投标信息平台:三是通过个人的人脉资源来获取项目信息.今天我们重点讲下招投标平台怎么运营的,招 ...
- 咖啡店小程序开发功能
喝咖啡是许多人的习惯.他们可以喝咖啡来刷新自己的思想,还可以品尝各种咖啡,开发一个咖啡店小程序会给咖啡店带来更多的便利,无论是产品运营服务还是人们的点餐服务,都会为消费者提供更好的消费体验和选择. 咖 ...
- 二手奢侈品回收鉴定估价小程序开发功能介绍
二手奢侈品回收鉴定估价小程序主要是为消费者出售闲置名表.珠宝首饰.名表等奢侈品. 奢侈品回收鉴定估价小程序主要功能有: 1.回收平台信息展示,展示品牌信息.公司地址.在线客服 2.商品分类,分类展示奢 ...
最新文章
- 专家解读下一代互联网创新模式,核心技术是根本
- 东平谋定农业功能化-农业大健康·万祥军:品牌化精准扶贫
- 第二章 循环结构程序设计
- 《Effective C#》的读书笔记
- cocos2dx build_native.sh clean 命令报错的解决
- Linux下的基本命令详解,Linux基本命令详解-1.0
- 02Framelayout:帧布局
- 打包windows 和 linux caffe 版本的人脸识别 人脸年龄估计 人脸性别模型的总结
- final 关键字的 8 个小细节
- ASP.NET 数据绑定常用代码及其性能分析
- Flink 在快手实时多维分析场景的应用
- 空调开关html,酒店墙上空调开关图解—酒店墙上空调开关图案是什么意思
- 【网络安全架构】互联网正对中国社会、经济、文化等各个领域产生巨大影响
- Mac下导入virtualenv报错:its parent directory is not owned by the current user
- python基础编程小实例4——恺撒密码
- JQ彩色3D纸片折叠动画
- 移动端电商首页制作-京东
- 怎样利用关键词查排名的工具找到行业相关网站
- 15个热门Java面试项目整合,吃透它,大厂offer拿到手软
- 格式化的盘要如何恢复文件
热门文章
- 工业网络究竟怎么建?来听听工业互联网大会的意见
- Android Studio 1.5.1最新版下载地址
- < 在Vue中 el-popover + el-tiptap 实现 富文本框输入,表格点击展示 (富文本HTML标签渲染) >
- 【Sublime text 3】卸载重装Sublime text 3英文版
- 文章解读 -- Self-Supervised Pillar Motion Learning for Autonomous Driving
- Photoshop CS6去除数码照片画面中的噪点实例详解教程
- Xcode9之后打开Object Library组件库
- 百万格子广告网站“1百万像素网”创意十足
- 小学生算术测试c语言报告,C语言课程设计报告小学算术运算测试.doc
- 使用DirectInput进行交互(2)