微信小程序外卖选购页实现切换分类与数量加减功能案例


Posted in Javascript onJanuary 15, 2019

本文实例讲述了微信小程序外卖选购页实现切换分类与数量加减功能。分享给大家供大家参考,具体如下:

关于微信小程序外卖界面实现选购切换分类与数量加减功能开发步骤:

效果图

微信小程序外卖选购页实现切换分类与数量加减功能案例

实现以下功能

一、 点击分类项,切换右边的食品,并高亮自身

这个实现比较简单,给一个states数组,用于记录每一项分类的状态,点击设为true,wxml渲染时三目运算判断即可。

categoryStates = categoryStates.map(function (item, i) {
if (index == i) {
item = true;
} else {
item = false;
}
return item;
});

相应的wxml文件

class="{{categoryStates[index] ? 'category-item-active' : ''}}"

二、 加减按钮

初始只有一个加号

点击加号后,相应商品数量+1,并出现减号

减至0时,减号消失,连同数量值

设计数组结构

cartData: {},它的键是Food表的objectId,值是数量。

以下是js代码实现

add: function (e) {
// 所点商品id
var foodId = e.currentTarget.dataset.foodId;
console.log(foodId);
// 读取目前购物车数据
var cartData = that.data.cartData;
// 获取当前商品数量
var foodCount = cartData[foodId] ? cartData[foodId] : 0;
// 自增1后存回
cartData[foodId] = ++foodCount;
// 设值到data数据中
that.setData({
cartData: cartData
});
}

在wxml文件中绑定数据如下

<view class="stepper">
<!-- 减号 -->
<view class="symbol subtract" wx:if="{{cartData[item.objectId]}}">-</view>
<!-- 数量 -->
<view class="value">{{cartData[item.objectId]}}</view>
<!-- 加号 -->
<view class="symbol add" bindtap="add" data-food-id="{{item.objectId}}">+</view>
</view>

上述代码中,通过wx:if判断当前商品的数量是否存在,无则不显示减号按钮;而在加号按钮旁要显示的数量就是{{cartData[item.objectId]}};点击事件传递的foodId就是{{item.objectId}}

减法按钮类似

subtract: function (e) {
// 所点商品id
var foodId = e.currentTarget.dataset.foodId;
// 读取目前购物车数据
var cartData = that.data.cartData;
// 获取当前商品数量
var foodCount = cartData[foodId];
// 自减1
--foodCount;
// 减到零了就直接移除
if (foodCount == 0) {
delete cartData[foodId]
} else {
cartData[foodId] = foodCount;
}
// 设值到data数据中
that.setData({
cartData: cartData
});
}

减法与加法基本类似,值得一提的是,减法要判断非负的合法性,所以将自减至零时,直接将元素通过delete操作移除,省去后续提交购物车遍历汇总的非零判断的烦琐。

Todo List
购物车动画
购物车逻辑
提交数据到后端存储

希望本文所述对大家微信小程序开发有所帮助。

Javascript 相关文章推荐
JavaScript高级程序设计(第3版)学习笔记7 js函数(上)
Oct 11 Javascript
屏蔽IE弹出&quot;您查看的网页正在试图关闭窗口,是否关闭此窗口&quot;的方法
Dec 31 Javascript
一个JavaScript的求爱小特效
May 09 Javascript
《JavaScript高级编程》学习笔记之object和array引用类型
Nov 01 Javascript
基于jQuery实现带动画效果超炫酷的弹出对话框(附源码下载)
Feb 22 Javascript
浅谈Javascript数组(推荐)
May 17 Javascript
Angular.js项目中使用gulp实现自动化构建以及压缩打包详解
Jul 19 Javascript
基于js中document.cookie全面解析
Sep 14 Javascript
Vue项目添加动态浏览器头部title的方法
Jul 11 Javascript
Vue源码探究之状态初始化
Nov 14 Javascript
vue项目中mock.js的使用及基本用法
May 22 Javascript
如何使用JS console.log()技巧提高工作效率
Oct 14 Javascript
微信 jssdk 签名错误invalid signature的解决方法
Jan 14 #Javascript
详解从react转职到vue开发的项目准备
Jan 14 #Javascript
node全局变量__dirname与__filename的区别
Jan 14 #Javascript
微信小程序时间轴实现方法示例
Jan 14 #Javascript
浅谈webpack devtool里的7种SourceMap模式
Jan 14 #Javascript
关于vue的npm run dev和npm run build的区别介绍
Jan 14 #Javascript
用npm-run实现自动化任务的方法示例
Jan 14 #Javascript
You might like
了解PHP的返回引用和局部静态变量
2015/06/04 PHP
Json_decode 解析json字符串为NULL的解决方法(必看)
2017/02/17 PHP
超级有用的13个基于jQuery的内容滚动插件和教程
2011/07/31 Javascript
javascript怎么禁用浏览器后退按钮
2014/03/27 Javascript
js使用DOM操作实现简单留言板的方法
2015/04/10 Javascript
AngularJS实现Model缓存的方式
2016/02/03 Javascript
Bootstrap表单布局样式源代码
2016/07/04 Javascript
jQuery修改DOM结构_动力节点Java学院整理
2017/07/05 jQuery
彻底理解js面向对象之继承
2018/02/04 Javascript
vue.js在标签属性中插入变量参数的方法
2018/03/06 Javascript
webpack4与babel配合使es6代码可运行于低版本浏览器的方法
2018/10/12 Javascript
js设计模式之单例模式原理与用法详解
2019/08/15 Javascript
解决mui框架中switch开关通过js控制开或者关状态时小圆点不动的问题
2019/09/03 Javascript
[01:03]PWL开团时刻DAY6——别打我
2020/11/05 DOTA
[49:11]完美世界DOTA2联赛PWL S3 INK ICE vs DLG 第二场 12.20
2020/12/23 DOTA
50行代码实现贪吃蛇(具体思路及代码)
2013/04/27 Python
Python使用matplotlib绘制Logistic曲线操作示例
2019/11/28 Python
安装python依赖包psycopg2来调用postgresql的操作
2021/01/01 Python
Flask处理Web表单的实现方法
2021/01/31 Python
使用HTML和CSS3绘制基本卡通图案的示例分享
2015/11/06 HTML / CSS
详解如何使用CSS3中的结构伪类选择器和伪元素选择器
2020/01/06 HTML / CSS
HTML5使用ApplicationCache接口实现离线缓存技术解决离线难题
2012/12/13 HTML / CSS
荷兰手表网站:Watch2Day
2018/07/02 全球购物
Parfume Klik丹麦:香水网上商店
2018/07/10 全球购物
美国体育用品商店:Academy Sports + Outdoors
2020/01/04 全球购物
学前教育毕业生自荐信
2013/10/29 职场文书
汽车专业毕业生自荐信
2013/11/03 职场文书
建筑设计专业求职自我评价
2014/03/02 职场文书
2014组织生活会方案
2014/05/19 职场文书
事业单位考核材料
2014/05/21 职场文书
汉语言文学毕业求职信
2014/07/17 职场文书
护理医院见习报告
2014/11/03 职场文书
求职自我推荐信
2015/03/24 职场文书
2015年团支部年度工作总结
2015/05/27 职场文书
催款律师函范文
2015/05/27 职场文书
Android学习之BottomSheetDialog组件的使用
2022/06/21 Java/Android