微信小程序分类的实现
微信小程序的分类功能思路
实现思路
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 产品 ...
随机推荐
- 关于java基础_方法的学习
方法: 方法就是把一堆需要反复执行的代码封装起来,如果项目需要调用这段代码时,直接调用方法名即可 方法相当于榨汁机, 材料:水果 产出物:果汁 参数(材料):进入方法的数据 返回值(产出物):就是方法 ...
- apche编译安装
常见的网页类型:htm,html,shtml,stm.php,asp,aspx,shtm,jsp等等Apache本事只处理静态页面,处理动态页面需要使用libphp5.so这个模块去工作,编译php也 ...
- 《Head First 设计模式》:状态模式
正文 一.定义 状态模式允许对象在内部状态改变时改变它的行为,对象看起来好像修改了它的类. 要点: 状态模式允许一个对象基于内部状态而拥有不同的行为. 状态模式将状态封装成为独立的类,并将动作委托到代 ...
- Redis—HyperLogLog
HyperLogLog 实现一个功能 统计网站的UV (user view),区别PV (page view) 数据去重 统计总数 同一个用户的反复点击进入记为 1 次 解决方案 最简单的思路是记录集 ...
- 执行引擎(Execution Engine)基础知识
概述 执行引擎是Java虚拟机的核心组成部分之一 虚拟机是一个相对于"物理机"的概念,这两种机器都有代码执行能力,其区别是物理机的执行引擎是直接建立在处理器.缓存.指令集和操作系统 ...
- Java JVM启动参数
转载于:https://www.cnblogs.com/w-wfy/p/6415856.html java启动参数共分为三类其一是标准参数(-),所有的JVM实现都必须实现这些参数的功能,而且向后兼容 ...
- BUUCTF[归纳]sql注入相关题目
这是我自己对于sql注入的部分ctf题型的归纳,均来自buuctf的平台环境. [0CTF 2016]piapiapia 我尝试了几种payload,发现有两种情况. 第一种:Invalid user ...
- 1、了解JVM
1.JVM.JRE.JDK JVM:是可以将要运行的程序编译成机器语言并去执行的一个平台,具有跨语言.跨平台的特性,运行时需要依赖JRE中的类库 JRE:包含了JVM以及代码运行时的类库,时Java程 ...
- 关于C++的右值引用的一些看法
简介 关于C++中的右值引用的详细可以看这一批博文<从4行代码看右值引用>.那一篇博文详细结合四行简单的代码详细介绍了右值引用的使用方法和一些场景,非常实用. 而本篇博文主要介绍一下我在学 ...
- Java知识系统回顾整理01基础01第一个程序01JDK 安装
一.首先第一步看JDK配置成功后的效果 点WIN键->运行(或者使用win+r) 输入cmd命令 输入java -version 注: -version是小写,不能使用大写,java后面有一个空 ...