微信小程序购物车效果，供大家参考，具体内容如下
购物车是一个比较简单的小功能。
购物车功能主要运用了微信小程序的缓存机制，在商品页面将需要添加的数据同步传入缓存中，然后在购物页面通过同步方法拿到对应的数据，最后在页面上进行渲染就可以了。
关键方法
var arrlist = wx.getStorageSync(‘key') //获取缓存对应key得数据 wx.setStorageSync(‘key'，arrlist) //修改缓存对应key得数据
以下便是购物车页面的详细代码，以供交流参考：
切记要根据自身实际，不要按部就班
wxml部分
<scroll-view class="neirong" scroll-y="true" scroll-with-animation="true">
<block wx:for="{{goodsCartList}}" wx:key="this">
<view class="carts">
<view class="cartsxq">
<view class="cartsxq_left">
<image src="/UploadFiles/2021-04-02/{{item.detail.images}}">
wxss部分
/* pages/carts/carts.wxss */
.carts{
width: 680rpx;
height: auto;
margin: 15rpx auto;
border-bottom: 1rpx solid #e3e3e3;
}
.cartsxq{
width: 100%;
height: 200rpx;
display: flex;
}
.cartsxq image{
width: 200rpx;
height: 150rpx;
margin: 30rpx;
border-radius: 10rpx;
}
.cartsxq_left{
flex: 4;
}
.cartsxq_right{
flex: 7;
position: relative;
}
.gongnengdw{
display: flex;
width: 200rpx;
height: 50rpx;
position: absolute;
right: 0;
bottom: 10rpx;
align-items: center;
overflow: hidden;
}
.gongnengdw image{
width: 40rpx;
height: 40rpx;
}
.jian{
flex: 1;
text-align: center;
}
.jia{
flex: 1;
text-align: center;
}
.suliang{
flex: 1;
text-align: center;
}
.pdtnamestyle{
margin: 10rpx;
font-size: 28rpx;
padding-top: 28rpx;
}
.pricestyle{
font-size: 34rpx;
color: tomato;
margin: 10rpx;
}
.xiaojistyle{
font-size: 21rpx;
color: tomato;
margin: 10rpx;
}
.allTotal{
display: flex;
width: 100%;
height: 80rpx;
border-top: 1rpx solid rgba(0, 0, 0, 0.1);
position: fixed;
bottom: 0;
align-items: center;
}
.allTotal_clear{
flex: 3;
text-align: center;
border-right: 1rpx solid rgba(0, 0, 0, 0.2);
}
.allTotal_left{
flex: 3;
text-align: center;
border-right: 1rpx solid rgba(0, 0, 0, 0.2);
}
.allTotal_right{
flex: 3;
text-align: center;
}
.neirong{
height: calc(100vh - 90rpx);
}
js部分
// 引用并封装成对象
var showData = require("../../utils/data.js")
Page({
data: {
goodsCartList:[],
//总计
allTotal:0
},
//清空方法
toclears:function(e){
var that =this;
let cartList =wx.getStorageSync("cartList")||[];
if(cartList != []){
wx.showModal({
title:"提示",
content:"您是否要清空购物车",
cancelColor: 'cancelColor',
success:function(res){
if(res.confirm){
cartList.splice(cartList);
wx.setStorageSync("cartList", cartList);
that.getNewPage();
}
}
})
}else if(cartList == []){
wx.showModal({
title:"提示",
content:"购物车没东西了",
})
}
},
//处理加减操作
oper:function(e){
//获取当前对象的type,后赋值给types
var types = e.currentTarget.dataset.type;
//获取当前对象的index的值，后赋值给index
var index = e.currentTarget.dataset.index;
///获取当前数据索引对应的"count"（数量），后赋值给count
var count = this.data.goodsCartList[index].count;
var isDelet =false;
//将一段语句赋值给temp
var temp = "goodsCartList["+index+"].count";
//判断当前对象的type值是否与“+”相等，减号以此类推
if(types == '+'){
this.setData({
[temp]:++count
})
}else if(types == '-'){
if(count>1){
this.setData({
[temp]:--count
})
}else{
isDelet = true;
}
}
//如果同步缓存中的key有cartList 就返回cartList ,若没有则返回空
//然后把同步存储缓存的key赋值给cartList
var cartList =wx.getStorageSync("cartList")||[];
var that =this;
if(isDelet){
//页面交互
wx.showModal({
title:"提示",
content:"您是否要将该商品移出购物车",
cancelColor: 'cancelColor',
success:function(res){
if(res.confirm){
var newCartel = []
for(let i=0; i<cartList.length;i++){
if(i!= index){
newCartel.push(cartList[i]);
}
}
wx.setStorageSync('cartList', newCartel);
that.getNewPage();
}
}
})
}else{
cartList[index].count = count;
wx.setStorageSync('cartList', cartList);
}
//让cartList[index].count的值与上面创建的count相等
cartList[index].count = count;
//默认allTotal为0，因为在onShow方法中已经调用了allTotal，所以在这里我们需要在局部作用域下新创建一个allTotal变量
var allTotal = 0;
//把this.data.goodsCartList数据赋值给goodsCartList
var goodsCartList = this.data.goodsCartList;
for(let i=0; i<goodsCartList.length;i++){
allTotal += goodsCartList[i].detail.price * goodsCartList[i].count;
console.log(allTotal);
}
this.setData({
allTotal:allTotal
})
},
//封装总计方法
getNewPage:function(){
var cartIndexList = wx.getStorageSync("cartList");
var cartList = showData.getGoodsListByIndex(cartIndexList);
var goodsCartList =[];
var allTotal=0;
for(let i=0; i<cartList.length; i++){
goodsCartList.push({
detail:cartList[i],
count:cartIndexList[i].count
})
allTotal = allTotal + cartList[i].price * cartIndexList[i].count;
}
this.setData({
goodsCartList:goodsCartList,
allTotal:allTotal
})
},
//页面同步显示
onShow: function () {
this.getNewPage();
},
})
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
标签：
微信小程序,购物车
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！
如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
狼山资源网 Copyright www.pvsay.com
暂无“微信小程序实现购物车小功能”评论...
《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。