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


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 相关文章推荐
js传值 判断
Oct 26 Javascript
cookie在javascript中的使用技巧以及隐私在服务器端的设置
Dec 03 Javascript
改变隐藏的input中value值的方法
Mar 19 Javascript
jquery trigger伪造a标签的click事件取代window.open方法
Jun 23 Javascript
纯CSS3代码实现滑动开关效果
Aug 19 Javascript
jQuery页面刷新(局部、全部)问题分析
Jan 09 Javascript
Javascript中匿名函数的调用与写法实例详解(多种)
Jan 26 Javascript
JS通过Cookie判断页面是否为首次打开
Feb 05 Javascript
AngularJS 前台分页实现的示例代码
Jun 07 Javascript
angular6的响应式表单的实现
Oct 10 Javascript
turn.js异步加载实现翻书效果
Jul 25 Javascript
JavaScript实现简单计算器功能
Dec 19 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 批量删除 sql语句
2009/06/05 PHP
php 模拟 asp.net webFrom 按钮提交事件的思路及代码
2013/12/02 PHP
thinkPHP实现表单自动验证
2014/12/24 PHP
php5.3不能连接mssql数据库的解决方法
2014/12/27 PHP
zen_cart实现支付前生成订单的方法
2016/05/06 PHP
php二维码生成以及下载实现
2017/09/28 PHP
tp5 sum某个字段相加得到总数的例子
2019/10/18 PHP
javascript setTimeout和setInterval计时的区别详解
2013/06/21 Javascript
JS和JQUERY获取页面大小,滚动条位置,元素位置(示例代码)
2013/12/14 Javascript
jquery实现非叠加式的搜索框提示效果
2014/01/07 Javascript
javascript获取form里的表单元素的示例代码
2014/02/14 Javascript
javascript中声明函数的方法及调用函数的返回值
2014/07/22 Javascript
JavaScript检测并限制复选框选中个数的方法
2015/08/12 Javascript
JavaScript常用标签和方法总结
2015/09/01 Javascript
多种方式实现js图片预览
2016/12/12 Javascript
使用3D引擎threeJS实现星空粒子移动效果
2020/09/13 Javascript
js自定义input文件上传样式
2018/10/26 Javascript
Layui Table js 模拟选中checkbox的例子
2019/09/03 Javascript
jQuery三组基本动画与自定义动画操作实例总结
2020/05/09 jQuery
深入理解Python 代码优化详解
2014/10/27 Python
Python中用PIL库批量给图片加上序号的教程
2015/05/06 Python
在pycharm中配置Anaconda以及pip源配置详解
2019/09/09 Python
python web框架Flask实现图形验证码及验证码的动态刷新实例
2019/10/14 Python
python计算导数并绘图的实例
2020/02/29 Python
Python爬取阿拉丁统计信息过程图解
2020/05/12 Python
python 发送get请求接口详解
2020/11/17 Python
浅谈css3中calc在less编译时被计算的解决办法
2017/12/04 HTML / CSS
HTML5 在canvas中绘制文本附效果图
2014/06/23 HTML / CSS
美国著名的户外用品品牌:L.L.Bean
2018/01/05 全球购物
美国运动鞋和服装网上商店:YCMC
2018/09/15 全球购物
小学敬老月活动方案
2014/02/11 职场文书
公司司机岗位职责范本
2014/03/03 职场文书
医德医风演讲稿
2014/05/20 职场文书
大学生党员个人总结
2015/02/13 职场文书
酒店员工手册范本
2015/05/14 职场文书
小学一年级数学教学反思
2016/02/16 职场文书