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


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 相关文章推荐
广泛收集的jQuery拖放插件集合
Apr 09 Javascript
二叉树先序遍历的非递归算法具体实现
Jan 09 Javascript
JavaScript中string对象
Jun 12 Javascript
jQuery基于ajax()使用serialize()提交form数据的方法
Dec 08 Javascript
深入理解javascript作用域第二篇之词法作用域和动态作用域
Jul 24 Javascript
纯JS实现轮播图
Feb 22 Javascript
js实现年月日表单三级联动
Apr 17 Javascript
webpack公共组件引用路径简化小技巧
Jun 15 Javascript
解决Vue.js父组件$on无法监听子组件$emit触发事件的问题
Sep 12 Javascript
微信小程序:数据存储、传值、取值详解
May 07 Javascript
Vue代码整洁之去重方法整理
Aug 06 Javascript
vue 使用vant插件做tabs切换和无限加载功能的实现
Nov 04 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批量删除数据库下所有前缀为prefix_的表
2014/06/09 PHP
php解析http获取的json字符串变量总是空白null
2015/03/02 PHP
tp5(thinkPHP5)框架数据库Db增删改查常见操作总结
2019/01/10 PHP
javascript入门·动态的时钟,显示完整的一些方法,新年倒计时
2007/10/01 Javascript
关于Ext中form移除textfield方法:hide(),setVisible(false),remove()
2010/12/02 Javascript
JavaScript在XHTML中的用法详解
2013/04/11 Javascript
JS在TextArea光标位置插入文字并实现移动光标到文字末尾
2013/06/21 Javascript
Jquery:ajax实现翻页无刷新功能代码
2013/08/05 Javascript
解析页面加载与js函数的执行 onload or ready
2013/12/12 Javascript
原生JavaScript实现合并多个数组示例
2014/09/21 Javascript
jQuery及JS实现循环中暂停的方法
2015/02/02 Javascript
jQuery实现在列表的首行添加数据
2015/05/19 Javascript
javascript实现的简单的表单验证
2015/07/10 Javascript
JS基于cookie实现来宾统计记录访客信息的方法
2015/08/04 Javascript
jQuery实现多级联动下拉列表查询框
2016/01/18 Javascript
JavaScript 输出显示内容(document.write、alert、innerHTML、console.log)
2016/12/14 Javascript
基于JavaScript实现带缩略图的轮播效果
2017/01/12 Javascript
小程序使用watch监听数据变化的方法详解
2019/09/20 Javascript
[01:05]DOTA2完美大师赛趣味视频之选手教你打职业
2017/11/23 DOTA
python实现数通设备tftp备份配置文件示例
2014/04/02 Python
python检测远程端口是否打开的方法
2015/03/14 Python
Python实现的随机森林算法与简单总结
2018/01/30 Python
Python中six模块基础用法
2019/12/08 Python
python打印文件的前几行或最后几行教程
2020/02/13 Python
在python中logger setlevel没有生效的解决
2020/02/21 Python
python图形界面开发之wxPython树控件使用方法详解
2020/02/24 Python
python argparse传入布尔参数false不生效的解决
2020/04/20 Python
pytorch 多分类问题,计算百分比操作
2020/07/09 Python
我们是伦敦女孩:WalG
2018/01/08 全球购物
信息员培训方案
2014/06/12 职场文书
体育课外活动总结
2014/07/08 职场文书
2014学校领导四风对照检查材料思想汇报
2014/09/23 职场文书
2016参观监狱警示教育活动心得体会
2016/01/15 职场文书
一文带你探究MySQL中的NULL
2021/11/11 MySQL
聊聊基于pytorch实现Resnet对本地数据集的训练问题
2022/03/25 Python
JavaWeb Servlet开发注册页面实例
2022/04/11 Java/Android