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


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 相关文章推荐
JMenuTab简单使用说明
Mar 13 Javascript
自己的js工具_Form 封装
Aug 21 Javascript
风吟的小型JavaScirpt库 (FY.JS).
Mar 09 Javascript
url参数中有+、空格、=、%、&amp;、#等特殊符号的问题解决
May 15 Javascript
js模仿php中strtotime()与date()函数实现方法
Aug 11 Javascript
jQuery实现简单的列表式导航菜单效果代码
Aug 31 Javascript
文件上传,iframe跨域数据提交的实现
Nov 18 Javascript
Bootstrap框架实现广告轮播效果
Nov 28 Javascript
javascript 动态生成css代码的两种方法
Mar 17 Javascript
ztree实现左边动态生成树右边为内容详情功能
Nov 03 Javascript
vue webpack打包后图片路径错误的完美解决方法
Dec 07 Javascript
微信小程序自定义组件传值 页面和组件相互传数据操作示例
May 05 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 INI配置文件的解析实现分析
2011/01/04 PHP
PHP基础教程(php入门基础教程)一些code代码
2013/01/06 PHP
解析:php调用MsSQL存储过程使用内置RETVAL获取过程中的return值
2013/07/03 PHP
将酷狗krc歌词解析并转换为lrc歌词php源码
2014/06/20 PHP
php操作redis缓存方法分享
2015/06/03 PHP
将PHP的session数据存储到数据库中的代码实例
2016/06/24 PHP
php文件上传类的分享
2017/07/06 PHP
实例分析10个PHP常见安全问题
2019/07/09 PHP
Ext对基本类型的扩展 ext,extjs,format
2010/12/25 Javascript
javascript错误的认识不用关心内存管理
2012/12/15 Javascript
使用Node.js实现一个简单的FastCGI服务器实例
2014/06/09 Javascript
JS实现可直接显示网页代码运行效果的HTML代码预览功能实例
2015/08/06 Javascript
JavaScript实现标题栏文字轮播效果代码
2015/10/24 Javascript
基于jQuery实现拖拽图标到回收站并删除功能
2015/11/25 Javascript
Javascript 一些需要注意的细节(必看篇)
2017/07/08 Javascript
angular.extend方法的具体使用
2017/09/14 Javascript
对angular 实时更新模板视图的方法$apply详解
2018/10/09 Javascript
node.js命令行教程图文详解
2019/05/27 Javascript
JS实现移动端双指缩放和旋转方法
2019/12/13 Javascript
Python3.x和Python2.x的区别介绍
2013/02/12 Python
python导出hive数据表的schema实例代码
2018/01/22 Python
Django+JS 实现点击头像即可更改头像的方法示例
2018/12/26 Python
python scp 批量同步文件的实现方法
2019/01/03 Python
python使用Paramiko模块实现远程文件拷贝
2019/04/30 Python
Python Numpy计算各类距离的方法
2019/07/05 Python
使用matlab或python将txt文件转为excel表格
2019/11/01 Python
python爬虫爬取监控教务系统的思路详解
2020/01/08 Python
python入门之井字棋小游戏
2020/03/05 Python
css3实现文字扫光渐变动画效果的示例
2017/11/07 HTML / CSS
运动会广播稿80字
2014/01/23 职场文书
机电一体化应届生求职信范文
2014/01/24 职场文书
工伤事故赔偿协议书
2014/04/15 职场文书
给校长的建议书500字
2014/05/15 职场文书
党员教师四风问题整改措施思想汇报
2014/10/08 职场文书
Pytest中skip和skipif的具体使用方法
2021/06/30 Python
在HTML中引入CSS的几种方式介绍
2021/12/06 HTML / CSS