微信小程序分类的实现
微信小程序的分类功能思路

实现思路
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>
class="{{item.id===list?'classify_active':''}}"
运用三目运算符来给当前选中的元素切换样式(红色下划线),如果说当前元素的id和我们设置的list相同就添加类名加样式
data-id="{{item.id}}" 通过自定义来传参,根据左侧边栏元素的id来匹配右边的内容
catchtap="change"
当用户点击不同的侧边栏目录时候,根据 data-id 去从数据库获取新的数据,
渲染到左侧,并且修改 list的值,使新样式添加到点击的元素上
change(e) {
let {id} = e.currentTarget.dataset
this.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添加,同时倒序并且赋值给我们自己定义的数组和进行试图更新
微信小程序分类的实现的更多相关文章
- (三)微信小程序首页的分类功能和搜索功能的实现笔记
就在昨天,微信宣布了微信小程序开发者工具新增“云开发”功能 下载最新的开发者工具,现在无需服务器即可实现小程序的快速迭代! 分类功能和搜索功能的效果图 1.首页分类功能的实现 boxtwo方法(.js ...
- 张小龙宣布微信小程序1月9日发布,并回答了大家最关心的8个问题
2016 年 12 月 28 日,张小龙在微信公开课 PRO 版的会场上,宣布了微信小程序的正式发布时间. 微信小程序将于 2017 年 1 月 9 号正式上线. 同时他解释称,小程序就像PC时代的网 ...
- 微信小程序社区上线
微信小程序公测了! 从首次得到微信小程序发布的消息开始,小木和Michael就进入了紧急备战状态. 除了要快速学通微信小程序开发之外,我们还做了这些工作: 1.录制全球首套微信小程序实战项目类视频教程 ...
- 微信小程序常见错误及基本排除方法
也接触了不少人解决问题的过程里,有一些比较难以排查的可能性列举在这,方便大家看一下: 也欢迎大家把自己常用的排除方法列举在这,一起互相学习探讨!1:ES6:使用es6可能导致安卓端真机调试时很多问 ...
- 【腾讯Bugly干货分享】打造“微信小程序”组件化开发框架
本文来自于腾讯Bugly公众号(weixinBugly),未经作者同意,请勿转载,原文地址:http://mp.weixin.qq.com/s/2nQzsuqq7Avgs8wsRizUhw 作者:Gc ...
- 【腾讯Bugly干货分享】微信小程序开发思考总结——腾讯“信用卡还款”项目实践
本文来自于腾讯bugly开发者社区,未经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/58212d0fa7a7574c4f4cc3c5 作者:peggy 小程序概述 1 ...
- 原创:从零开始,微信小程序新手入门宝典《一》
为了方便大家了解并入门微信小程序,我将一些可能会需要的知识,列在这里,让大家方便的从零开始学习:一:微信小程序的特点张小龙:张小龙全面阐述小程序,推荐通读此文: 小程序是一种不需要下载.安装即可使用的 ...
- 原创:经验分享:微信小程序外包接单常见问题及流程
从九月底内测到现在已经三个半月.凌晨一点睡觉已经习以为常,也正是这样,才让无前端经验的我做微信小程序开发并不感到费劲.最近才开始接微信小程序的外包项目,目前已经签下了五份合同,成品出了两个.加上转给朋 ...
- 微信小程序之明源商城系列-01-商城介绍及开发准备
1,效果展示 数据来自于写的一个小爬虫爬了明源商城部分的数据.由于价格的保密性,下列产品价格和真实的都不同. 1.1 主页及开发文件结构 1.2 产品的详细页面 1.2 产品分类页面 1.3 产品 ...
随机推荐
- vue | 基于vue的城市选择器和搜索城市对应的小区
城市选择器应该是比较常用的一个组件,用户可以去选择自己的城市,选择城市后返回,又根据自己选择的城市搜索小区. 功能展示 这是选择结果 这是选择城市 这是搜索小区 这是搜索小区接口,key为城市名字,i ...
- HTML自学第一篇
教程来自W3CSchool 因为笔者有过开发经验 本篇只是个人对HTML自学的笔记,可能不适合用于给他人理解和学习 什么是 HTML HTML 指的是超文本标记语言 (Hyper Text Marku ...
- 企业面试中关于MYSQL重点的28道面试题解答
问题1:char.varchar的区别是什么? varchar是变长而char的长度是固定的.如果你的内容是固定大小的,你会得到更好的性能. 问题2: TRUNCATE和DELETE的区别是什么? ...
- Docker:四、Docker进阶 Windows Docker IIS 部署
前面的三篇docker 文档大家看的肯定不过瘾,自己可能也已经上手一试了...不知道有没有发现问题... 哈哈... 我来说说我遇到的问题哦 一.windows docker 镜像越来越大 默认的do ...
- Processing 网格纹理制作(棋盘格)
写在前面的话 很久没有写博文了.最近在整理Processing有关文档,看到之前做的一些例子,想着分享在互联网上,当然和以前一样,目前也仅为了给初学者有个学习参考,笔者能力有限.废话不多说,干就完事了 ...
- Linux服务器内存监控—每小时检查&超出发送邮件&重启占用最高的Java程式
简介与优点 使用该脚本能自行判断系统内存使用情况是否超出设定百分比 能在超出预警值时执行重启程式的操作 能记录重启过程,并将具体LOG邮件发送给指定收信人 可以设定Crontab排程,达成每隔一段时间 ...
- 使用C#创建WebService实例
新增WebService专案 更改服务程式名称 重命名程式名称 Service1.asmx 修改为 TestService.asmx 此时下面的cs代表文件也会跟着修改,但可发现,代码中的类名并没有跟 ...
- Oracle 11G RAC11.2.0.4 + Redhat7.3安装手册
安装思路: 1.安装两台redhat7 linux系统 2.网络配置(双网卡,public,vip,private,scan) 3.存储配置(内存配置,ASM共享存储:6块5G共享盘udev,根目录留 ...
- Visual C++中各种文件的作用(详细)
参考:http://blog.sina.com.cn/s/blog_6975d67c0100r3kx.html DSW:全称是Developer Studio Workspace,最高级别的配置文件, ...
- Unicode和多字节字符集
今天自己写的发现一个输出路径程序使用unicode字符集只能输出单个的首字符,问了一下同事,改为使用多字节字符集,问题解决了 于是上网看了他们的区别: 很多没看完,但起码了解到字符集的演变过程, 转 ...