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

实现思路

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. (三)微信小程序首页的分类功能和搜索功能的实现笔记

    就在昨天,微信宣布了微信小程序开发者工具新增“云开发”功能 下载最新的开发者工具,现在无需服务器即可实现小程序的快速迭代! 分类功能和搜索功能的效果图 1.首页分类功能的实现 boxtwo方法(.js ...

  2. 张小龙宣布微信小程序1月9日发布,并回答了大家最关心的8个问题

    2016 年 12 月 28 日,张小龙在微信公开课 PRO 版的会场上,宣布了微信小程序的正式发布时间. 微信小程序将于 2017 年 1 月 9 号正式上线. 同时他解释称,小程序就像PC时代的网 ...

  3. 微信小程序社区上线

    微信小程序公测了! 从首次得到微信小程序发布的消息开始,小木和Michael就进入了紧急备战状态. 除了要快速学通微信小程序开发之外,我们还做了这些工作: 1.录制全球首套微信小程序实战项目类视频教程 ...

  4. 微信小程序常见错误及基本排除方法

    也接触了不少人解决问题的过程里,有一些比较难以排查的可能性列举在这,方便大家看一下:   也欢迎大家把自己常用的排除方法列举在这,一起互相学习探讨!1:ES6:使用es6可能导致安卓端真机调试时很多问 ...

  5. 【腾讯Bugly干货分享】打造“微信小程序”组件化开发框架

    本文来自于腾讯Bugly公众号(weixinBugly),未经作者同意,请勿转载,原文地址:http://mp.weixin.qq.com/s/2nQzsuqq7Avgs8wsRizUhw 作者:Gc ...

  6. 【腾讯Bugly干货分享】微信小程序开发思考总结——腾讯“信用卡还款”项目实践

    本文来自于腾讯bugly开发者社区,未经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/58212d0fa7a7574c4f4cc3c5 作者:peggy 小程序概述 1 ...

  7. 原创:从零开始,微信小程序新手入门宝典《一》

    为了方便大家了解并入门微信小程序,我将一些可能会需要的知识,列在这里,让大家方便的从零开始学习:一:微信小程序的特点张小龙:张小龙全面阐述小程序,推荐通读此文: 小程序是一种不需要下载.安装即可使用的 ...

  8. 原创:经验分享:微信小程序外包接单常见问题及流程

    从九月底内测到现在已经三个半月.凌晨一点睡觉已经习以为常,也正是这样,才让无前端经验的我做微信小程序开发并不感到费劲.最近才开始接微信小程序的外包项目,目前已经签下了五份合同,成品出了两个.加上转给朋 ...

  9. 微信小程序之明源商城系列-01-商城介绍及开发准备

    1,效果展示 数据来自于写的一个小爬虫爬了明源商城部分的数据.由于价格的保密性,下列产品价格和真实的都不同. 1.1 主页及开发文件结构 1.2  产品的详细页面 1.2  产品分类页面 1.3 产品 ...

随机推荐

  1. java8--排序

    排序的传统的写法是: Collections.sort( SortTest.users, new Comparator<User>() { @Override public int com ...

  2. 2.JAVA自带的序列化反序列化机制

  3. 关于KeePass实现mstsc远程桌面(rdp协议)的自动登录

    本文的Keepass版本:KeePass Password Safe Version 2.45 首先介绍一下Keepass,引用官网的解释如下: KeePass is a free open sour ...

  4. list、set、map的区别和联系

    结构特点 List和Set是存储单列数据的集合,Map是存储键值对这样的双列数据的集合: List中存储的数据是有顺序的,并且值允许重复:Map中存储的数据是无序的,它的键是不允许重复的,但是值是允许 ...

  5. 刷题[CISCN2019 华北赛区 Day2 Web1]Hack World

    解题思路 打开发现是很简单的页面,告诉了表名和列名,只需知道字段即可 尝试一下,输入1,2都有内容,后面无内容.输入1'让他报错,发现返回bool(false) 大概思路就是布尔型注入了,通过不断返回 ...

  6. MySql-8.0.x免安装版下载与配置,Navicat打开数据库链接报错1251的解决办法

    若你以前卸载过mysql,小白极大可能没有卸载和删除干净残留,没有卸载干净就肯定重装不成功,可参考https://www.cnblogs.com/Luoters/p/11869032.html 参考与 ...

  7. ksoap2-android的简单使用

    soap2-android 官网地址 https://simpligility.github.io/ksoap2-android/index.html 发行版本 https://oss.sonatyp ...

  8. Java泛型中的类型参数和通配符类型

    类型参数 泛型有三种实现方式,分别是泛型接口.泛型类.泛型方法,下面通过泛型方法来介绍什么是类型参数. 泛型方法声明方式:访问修饰符 <T,K,S...> 返回类型 方法名(方法参数){方 ...

  9. nginx 1.12 负载均衡配置

    负载均衡策略有以下几种: 请求轮询:round-robin,是默认策略,应用服务器的请求以循环方式分发,可以设置权重weight,默认权重均为1,因此每台后端服务器接受的请求数相同. 最少连接:lea ...

  10. Hibernate4.3 HQL查询

    HQL:Hibernate专属语言,可以跨数据库 一.基本查询 1 public void testQuery(){ 2 Session session = HibernateUtils.getSes ...