微信小程序实现简单购物车小功能
本文实例为大家分享了微信小程序实现简单购物车的具体代码，供大家参考，具体内容如下
微信小程序定制好看的购物车页面，实现购物车功能，希望对您有所帮助！
1. 应用场景
2. 思路分析
3. 代码分析
4. 具体实现代码
效果截图：
1.应用场景
适用于商城、秒杀、商品购买等类型的小程序，负责将顾客浏览的商品保存下来，方便客户集中比较商品与购买商品。
2.思路分析
实现购物车功能前请思考以下问题：
1.小程序如何布局？使用什么布局能提升页面开发效率？？
2.将购物车功能分为四个小功能：(1)一键全选/取消商品 （2）动态添加商品可手动输入 （3）计算结算商品金额 （4）左滑动删除商品
答：（1）在小程序中主要是兼容安卓与ios两种型号手机，在页面开发中可使用flex布局，能极大的提高页面的开发效率。（2）请仔细阅读代码分析，看懂自己也可轻松实现购物车功能 so easy！！！
3.代码分析
1. 一键全选/取消
allSelect: function (e) {
var that = this
var allSelect = e.currentTarget.dataset.select//判断是否选中 circle是 success否
var newList = that.data.slideProductList
if (allSelect == "circle") {
for (var i = 0; i < newList.length; i++) {
newList[i].select = "success"
}
var select = "success"
} else {
for (var i = 0; i < newList.length; i++) {
newList[i].select = "circle"
}
var select = "circle"
}
that.setData({
slideProductList: newList,
allSelect: select
})
that.countNum()//计算商品数量
that.count()//计算商品金额
},
2. 动态添加商品可手动输入
a 添加商品
addtion: function (e) {//添加商品
var that = this
var index = e.currentTarget.dataset.index
var num = e.currentTarget.dataset.num
if (num < 99) { //默认峰值99件
num++
}
var newList = that.data.slideProductList
newList[index].num = num
that.setData({
goodsNum:num,
slideProductList: newList
})
that.countNum()
that.count()
},
b 减少商品
subtraction: function (e) {//减少商品
var that = this
var index = e.currentTarget.dataset.index
var num = e.currentTarget.dataset.num
var newList = that.data.slideProductList
//当1件时，再次点击移除该商品
if (num == 1) {
newList.splice(index, 1)
} else {
num--
newList[index].num = num
}
that.setData({
goodsNum: num,
slideProductList: newList
})
that.countNum()
that.count()
},
c 直接输入
inputNum:function(e){
var num = e.detail.value;
this.setData({goodsNum:num})
},
numIputBlur:function(e){
var that = this;
var num = that.data.goodsNum;
var index = e.currentTarget.dataset.index;
var newList = that.data.slideProductList
if (num == "") { //判空
newList[index].num = 1;
that.setData({
slideProductList: newList
})
}else if (num < 1) {
that.setData({
goodsNum: newList[index].num,
slideProductList: newList
})
wx.showToast({
title: '亲，该宝贝不能减少了哦~',
icon: 'none'
})
}else if(num>99){
that.setData({
goodsNum: newList[index].num,
slideProductList: newList
})
wx.showToast({
title: '亲，该宝贝最多购买99件哦~',
icon: 'none'
})
}else{
newList[index].num = num;
that.setData({
slideProductList: newList
})
}
that.countNum()
that.count()
},
3. 计算结算商品金额
count: function () {//计算金额方法
var that = this
var newList = that.data.slideProductList
var newCount = 0
for (var i = 0; i < newList.length; i++) {
if (newList[i].select == "success") {
newCount += newList[i].num * newList[i].price
}
}
that.setData({
count: newCount
})
},
4. 页面左滑动删除商品
功能后续整理
4. 具体实现代码
1.wxml
<view class="product-container">
<view class="product-list" style='height:{{height}}px'>
<view class="product-item" wx:for="{{slideProductList}}" wx:for-index="index" wx:key='slideProductList'>
<slide-delete pid="{{item.id}}" bindaction="handleSlideDelete" wx:key='slideProductList'>
<view class="product-item-wrap">
<icon type="{{item.select}}" size="19" data-index="{{index}}" data-select="{{item.select}}" bindtap="change" color="red" />
<view class="product_img">
<image src="{{item.url}}" class='goods-img' mode="widthFix"></image>
</view>
<view class="product-movable-item">
<view class="goods-name">{{item.name}}</view>
<view class="goods-type">最新款
<text>{{item.style}}</text>
</view>
<view class="goods-price">￥{{item.price}}</view>
</view>
<view class="product-movable-item product-movable-item-amount">
<view class="num-box">
<view class="btn-groups">
<button class="goods-btn btn-minus" data-index="{{index}}" data-num="{{item.num}}" bindtap="subtraction">—</button>
<input class='num' type='number' data-index="{{index}}" bindblur="numIputBlur" bindinput='inputNum' value='{{item.num}}'></input>
<button class="goods-btn btn-add" data-index="{{index}}" data-num="{{item.num}}" bindtap="addtion">+</button>
</view>
</view>
</view>
</view>
</slide-delete>
</view>
</view>
<view class="cart-fixbar">
<view class="allSelect">
<icon type="{{allSelect}}" size="19" data-select="{{allSelect}}" bindtap="allSelect" color='#fff' />
<view class="allSelect-text">全选</view>
</view>
<view class="count">
<text>合计：</text>￥{{count}}
</view>
<view class="order">
<view class="orders">
去结算
<text class="allnum">({{num}})</text>
</view>
</view>
</view>
</view>
<view class="footer">
<navigator class="ft_item" url="../shoping/shoping" hover-class="none" open-type='redirect'>
<image src="../../image/sy_1.png"></image>
<view class="item_title">首页</view>
</navigator>
<navigator url="../classification/classification" hover-class="none" open-type='redirect' class="ft_item">
<image src="../../image/fl_1.png"></image>
<view class="item_title">分类</view>
</navigator>
<view class="ft_item">
<image src="../../image/gwc.png"></image>
<view class="item_title">购物车</view>
</view>
<navigator hover-class="none" url="../my/my" open-type='redirect' class="ft_item">
<image src="../../image/gr_1.png"></image>
<view class="item_title">我的</view>
</navigator>
</view>
2.js
const app = getApp()
Page({
/**
* 页面的初始数据
*/
data: {
goodsNum:'',
userInfo: {},
hasUserInfo: false,
canIUse: wx.canIUse('button.open-type.getUserInfo'),
slideProductList: [
{
id:1,
name: '智能手环1111111112222211',
url: "../../image/bracelet.jpg",
style: "2代",
price: "149.5",
select: "circle",
num: "1",
code: "0001",
amount: 500
},
{
id: 2,
name: "指环支架",
url: "../../image/ring.jpg",
style: "金色",
price: "19.9",
select: "circle",
code: "0002",
num: "1",
amount: 500
},
{
id: 3,
name: "新款平板电脑",
url: "../../image/iphone.png",
style: "9.7英寸",
price: "100",
select: "circle",
code: "0003",
num: "1",
amount: 110
},
{
id: 4,
code: "0001",
name: "无人机",
url: "../../image/uav.jpg",
style: "低配版",
price: "4999",
select: "circle",
code: "0004",
num: "1",
amount: 200
},
{
id: 5,
code: "0001",
name: "无人机",
url: "../../image/uav.jpg",
style: "低配版",
price: "4999",
select: "circle",
code: "0004",
num: "1",
amount: 200
},
{
id: 6,
code: "0001",
name: "无人机",
url: "../../image/uav.jpg",
style: "低配版",
price: "4999",
select: "circle",
code: "0004",
num: "1",
amount: 200
},
],
allSelect: "circle",
num: 0,
count: 0,
lastX: 0,
lastY: 0,
text: "没有滑动",
},
change: function (e) {
var that = this
var index = e.currentTarget.dataset.index
var select = e.currentTarget.dataset.select
if (select == "circle") {
var stype = "success"
} else {
var stype = "circle"
}
var newList = that.data.slideProductList
newList[index].select = stype
that.setData({
slideProductList: newList
})
that.countNum()
that.count()
},
addtion: function (e) {
var that = this
var index = e.currentTarget.dataset.index
var num = e.currentTarget.dataset.num
//默认99件
if (num < 99) {
num++
}
var newList = that.data.slideProductList
newList[index].num = num
that.setData({
goodsNum:num,
slideProductList: newList
})
that.countNum()
that.count()
},
inputNum:function(e){
var num = e.detail.value;
this.setData({
goodsNum:num
})
},
numIputBlur:function(e){
var that = this
var num = that.data.goodsNum
var index = e.currentTarget.dataset.index
var newList = that.data.slideProductList
if (num == "") { //盘空
newList[index].num = 1;
that.setData({
slideProductList: newList
})
}else if (num < 1) {
that.setData({
goodsNum: newList[index].num,
slideProductList: newList
})
wx.showToast({
title: '亲，该宝贝不能减少了哦~',
icon: 'none'
})
}else if(num>99){
that.setData({
goodsNum: newList[index].num,
slideProductList: newList
})
wx.showToast({
title: '亲，该宝贝最多购买99件哦~',
icon: 'none'
})
}else{
newList[index].num = num;
that.setData({
slideProductList: newList
})
}
that.countNum()
that.count()
},
//减法
subtraction: function (e) {
var that = this
var index = e.currentTarget.dataset.index
var num = e.currentTarget.dataset.num
var newList = that.data.slideProductList
if (num == 1) {//当数量为1件时，再次点击移除该商品
newList.splice(index, 1)
} else {
num--
newList[index].num = num
}
that.setData({
goodsNum: num,
slideProductList: newList
})
that.countNum()
that.count()
},
//全选
allSelect: function (e) {
var that = this
var allSelect = e.currentTarget.dataset.select //先判断是否选中
var newList = that.data.slideProductList
console.log(newList)
if (allSelect == "circle") {
for (var i = 0; i < newList.length; i++) {
newList[i].select = "success"
}
var select = "success"
} else {
for (var i = 0; i < newList.length; i++) {
newList[i].select = "circle"
}
var select = "circle"
}
that.setData({
slideProductList: newList,
allSelect: select
})
that.countNum()
that.count()
},
countNum: function () { //计算数量
var that = this
var newList = that.data.slideProductList
var allNum = 0
for (var i = 0; i < newList.length; i++) {
if (newList[i].select == "success") {
allNum += parseInt(newList[i].num)
}
}
parseInt
that.setData({
num: allNum
})
},
count: function () {//计算金额方法
var that = this
var newList = that.data.slideProductList
var newCount = 0
for (var i = 0; i < newList.length; i++) {
if (newList[i].select == "success") {
newCount += newList[i].num * newList[i].price
}
}
that.setData({
count: newCount
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
var width=wx.getSystemInfoSync().windowWidth
var height=wx.getSystemInfoSync().windowHeight
height=height-55-53;
this.setData({
height:height
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
3.wxss
.cart-box .item {display:flex;flex-direction:row;align-items:center;padding:20rpx;border-top:8rpx solid #f0f3fa;}
.cart-box .item .goods-info {margin-left:20rpx;}
.goods-img {width:160rpx;margin-left:20rpx;height:160rpx;}
.cart-box .row {color:#fff;display:flex;flex-direction:row;width:430rpx;justify-content:space-between;margin-bottom:10rpx;}
.goods-name {font-size:32rpx;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#333;padding-bottom:10rpx;width:290rpx;}
.goods-price {font-size:32rpx;color:#e02e24;position:relative;top:14rpx;}
.goods-type {color:#999;font-size:24rpx;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:240rpx;padding-bottom:10rpx;}
.num-box {display:flex;flex-direction:row;justify-content:flex-end;position:relative;top:6rpx;}
.goods-btn {width:44rpx;height:44rpx;padding:0;line-height:40rpx;font-weight:400;color:#fff;margin:0;background:#e60a30;border-radius:50%;}
.num {color:#999;width:50rpx;margin-left:5rpx;margin-right:5rpx;text-align:center;line-height:50rpx;font-size:30rpx;}
.btn-add {font-size:36rpx;}
.btn-minus {font-size:18rpx;background:#f8babb;}
.btn-groups {display:flex;flex-direction:row;justify-content:flex-end;background:#f4f4f4;padding:2rpx;border-radius:10rpx;}
.cart-fixbar {position:fixed;bottom:113rpx;background:#e60a30;height:106rpx;width:95%;margin:0 20rpx;display:flex;flex-direction:row;align-items:center;border-top-left-radius:20rpx;border-top-right-radius:20rpx;}
.cart-box .item:last-child {border-bottom:8rpx solid #f0f3fa;}
.cart-fixbar .allSelect {display:flex;flex-direction:row;height:106rpx;align-items:center;color:#fff;font-size:32rpx;margin-left:20rpx;}
.cart-fixbar .allSelect-text {margin-left:16rpx;font-size:28rpx;}
.cart-fixbar .count {color:#fff;font-size:36rpx;position:absolute;right:220rpx;display:flex;align-items:center;}
.cart-fixbar .count text {font-size:28rpx;}
.cart-fixbar .order {color:#e02e24;height:58rpx;background:#fff;line-height:58rpx;position:absolute;right:0;margin:0 20rpx;font-size:28rpx;border-radius:10rpx;}
.cart-fixbar .orders {padding:0 18rpx;}
.cart-fixbar .allnum {font-size:28rpx;}
.row_boxs {display:flex;align-items:center;}
.goods-type {flex:1;}
.goods-type text {padding-right:10rpx;}
.section {padding-bottom:220rpx;}
.footer {border-top:1rpx solid #eee;position:fixed;bottom:0;width:100%;display:flex;background:#fff;font-size:24rpx;height:55px;align-items:center;}
.footer .ft_item {width:25%;text-align:center;}
.footer .ft_item image {width:44rpx;height:44rpx;margin-top:10rpx;}
.footer .ft_item:nth-child(3) .item_title {color:#e60a30;}
.section_img {width:110rpx;height:110rpx;}
.section_boxs {text-align:center;margin:50% auto 0;}
.cart-box_p,.section_p {text-align:center;font-size:26rpx;padding-top:10rpx;color:#999;}
.cart-box_p {padding-top:60rpx;}
.cart-box_p text {border:1rpx solid #eee;padding:10rpx 24rpx;letter-spacing:1rpx;}
.title {margin:60rpx 0 30rpx;font-size:40rpx;text-align:center;font-weight:bold;color:#383a3d;}
.product-list .product-item {position:relative;width:100vw;border-bottom:10rpx solid #f0f3fa;box-sizing:border-box;background:#fff;z-index:999;}
.slide-product-list .slide-product-item {position:relative;width:100vw;border-bottom:2rpx solid #e9e9e9;box-sizing:border-box;background:#fff;z-index:999;}
.product-list .product-item movable-area {height:120rpx;width:calc(100vw - 120rpx);}
.product-list .product-item movable-view {height:120rpx;width:100vw;background:#fff;z-index:999;}
.product-list .product-item:first-child {border-top:10rpx solid #f0f3fa;}
.product-list .product-item .delete-btn {position:absolute;top:0;bottom:0;right:0;width:120rpx;font-family:PingFangSC-Regular;font-size:24rpx;color:#fff;line-height:120rpx;z-index:1;background:#e66671;text-align:center;}
.product-list .product-item-wrap {position:relative;display:flex;align-items:center;padding:8rpx 0 20rpx 20rpx;box-sizing:border-box;}
.product-list .product-item-wrap .product-movable-item {flex:1;/* overflow:hidden;*/}
.product-list .product-item-wrap .product-movable-item-name {font-family:PingFangSC-Regular;font-size:28rpx;color:#71747a;line-height:60rpx;margin-right:10rpx;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
.product-list .product-item-wrap .product-movable-item-code {font-family:PingFangSC-Regular;font-size:24rpx;color:#969aa3;}
.product-list .product-item-wrap .product-movable-item-amount {flex:1;padding-right:50rpx;position:relative;}
.product-list .product-item-wrap .product-movable-item-amount .amount {width:120rpx;font-size:28rpx;color:#383a3d;line-height:60rpx;}
.product-list .product-item-wrap .product-movable-item-amount .unit {position:absolute;top:0;right:30rpx;font-size:28rpx;color:#969aa3;line-height:60rpx;}
.product_img {display:flex;align-items:center;padding-right:20rpx;}
.product-list {display:block;overflow-y:auto;}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
赞 (0)
相关推荐
-
微信小程序实现购物车功能
本文实例为大家分享了微信小程序实现购物车功能的具体代码,供大家参考,具体内容如下 1.购物车界面功能实现 先来弄清楚购物车的需求. 单选.全选和取消,而且会随着选中的商品计算出总价 单个商品购买数量的增加和减少 删除商品.当购物车为空时,页面会变为空购物车的布局 根据设计图,我们可以先实现静态页面.接下来,再看看一个购物车需要什么样的数据. 首先是一个商品列表(carts),列表里的单品需要:商品图(image),商品名(title),单价(price),数量(num),是否选中(selecte
-
微信小程序之购物车功能
前言 以往的购物车,基本都是通过大量的 DOM 操作来实现.微信小程序其实跟 vue.js 的用法非常像,接下来就看看小程序可以怎样实现购物车功能. 需求 先来弄清楚购物车的需求. 单选.全选和取消,而且会随着选中的商品计算出总价 单个商品购买数量的增加和减少 删除商品.当购物车为空时,页面会变为空购物车的布局 根据设计图,我们可以先实现静态页面.接下来,再看看一个购物车需要什么样的数据. 首先是一个商品列表(carts),列表里的单品需要:商品图(image),商品名(title),单价(pr
-
微信小程序实现加入购物车滑动轨迹
本文实例为大家分享了微信小程序实现加入购物车滑动轨迹的具体代码,供大家参考,具体内容如下 index.wxss .good_box { width: 80rpx; height: 80rpx; position: fixed; border-radius: 50%; overflow: hidden; left: 50%; top: 50%; z-index: 99; } index.wxml <view class="iconfont icongouwuche recommend_ite
-
微信小程序实现简单购物车功能
这个微信小程序的购物车功能,通过参照各大电商平台的功能和界面,然后总结出来的. 效果图 功能描述 1.可单选,全选/取消全选 2.增加.减少.手动编辑商品的数量 3.根据商品的数量统计价格 代码实现 此处省略一万字,废话不多说,直接上代码吧! WXML静态布局.绑定"死"数据(主要功能代码) <view class="list"> <block wx:for="{{dataArr}}" wx:key="index&qu
-
微信小程序购物车、父子组件传值及calc的注意事项总结
前言 在做微信小程序时,觉得小组里对购物车的实现不是很完美,就自己尝试的写了下,然后用到了父子组件传值,父子组件传值的话,和vue框架上是非常相似的,以及calc这个css函数,calc有个注意点,自己不怎么用,一时间有差点忘了,这里记录下 下面话不多说了,来一起看看详细的介绍吧 1.效果图 2.子组件实现 要实现图中删除的效果,使用组件的形式更好做点,我当时本想直接在pages里实现,不过结果就是,滑动时,所有的商品都显示了删除按钮,除非用数组将每个商品要移动的距离存储起来,不过这样的话就很麻
-
微信小程序实战篇之购物车的实现代码示例
哈喽,大家好,快半个月没写了,现在提笔都有点生硬了,一直没更新的原因,一个是代码君也要上班,加上最近工作比较忙,还有就是写文章一直未被认可,所以没什么动力再创作了,那时真的坚持不下去,打算放弃了,感谢读者曹明,一个韩国的研究生读者,支持我,并给我鼓励,期待我更新下一篇,我非常感动,瞬间战斗力恢复,其实你们简单的点赞,评论,都是给我最大的支持,好了,煽情完毕,该讲今天的重点了,购物车,购物车的界面实现到不是很难,难点是处理里面的逻辑,无论是小程序,还是APP,购物车的逻辑都是最难的,下面开始教大家
-
微信小程序利用swiper+css实现购物车商品删除功能
要实现的购物车效果如下: 小程序通过bind与catch绑定事件,没有event.stopPropagation()方法. bind:不会阻止冒泡事件向上冒泡, catch:可以阻止冒泡事件向上冒泡 用touchstart.touchmove.touchend实现滑块效果,无法动态js控制何时冒泡何时阻止冒泡,就会出现用bind时,左右上下滑动乱窜:用catch,商品区域只能左右滑动,无法上下滚动 而小程序提供的swiper通过css就可以实现删除滑块效果,同时不影响页面的正常滚动.具体如下 <
-
微信小程序 购物车简单实例
微信小程序,这里实现购物车功能的小demo,有需要此功能的朋友可以参考下. 摘要: 加减商品数量,汇总价格,全选与全不选 设计思路: 一.从网络上传入以下Json数据格式的数组 1.购物车id:cid 2.标题title 3.数量num 4.图片地址 5.价格price 6.小计 7.是否选中selected 二.点击复选框toggle操作 如已经选中的,经点击变成未选中,反之而反之 点击依据index作为标识,而不用cid,方便遍历 三.全选操作 首次点击即为全部选中,再次点击为全不选,全选按
-
微信小程序实现购物车代码实例详解
其实购物车都是类似的实现方法,只不过小程序是有他的数据层和业务层,在这里把之前的做法记录一下,分享出来也希望能给需要的小伙伴带来参考价值在最开始的时候先从本地存储中获取购物车数据,因为我们会切换页面 在页面切换的过程中需要实时重新加载购物车的数据,所以我们把获取的方法写在onShow中,而不是onLoad中: onShow: function () { const cart = wx.getStorageSync("cart"); let address = wx.getStorage
-
微信小程序实现多选框全选与反全选及购物车中删除选中的商品功能
实现的效果就是: 1.点击全选选中所有商品,再点击全选,取消勾选 2.在选中的同时获取需要的商品id,获取后是以字符串拼接的形式 拼成一个字符串 3.点击删除按钮时删除选中的商品 点击全选 再次点击全选框 wxml关键代码 重要代码 value="{{item.goods_id}}" -->checkbox被选中的值就是这个goods_id checked="{{item.checked}}" -->checked代表选中与否 ,ture选中,false