微信小程序购物车页面加购物车底部

最新推荐文章于 2023-02-20 19:55:42 发布
最新推荐文章于 2023-02-20 19:55:42 发布
阅读量3.6k 收藏 3
点赞数 1
文章标签： 微信小程序购物车页面加购物车底部 
    <view class="dots">  
        <block wx:for="{{goodsDetail.pics}}" wx:key="unique">  
            <view class="dot{{index == swiperCurrent ? ' active' : ''}}"></view>  
        </block>  
    </view>
{{goodsDetail.basicInfo.name}} 分享有赏，好友下单后可得 {{goodsDetail.basicInfo.commission}} 积分奖励 分享有赏，好友下单后可得 {{goodsDetail.basicInfo.commission}}元 现金奖励 ¥ {{selectSizePrice}} 购买{{goodsDetail.basicInfo.numberOrders}}次 共收到 {{goodsDetail.basicInfo.numberGoodReputation}} 次好评 分享 分享有赏 {{selectSize}} 商品介绍 大家评价 （{{reputation.length}}） {{item.goods.goodReputationStr}} {{item.goods.goodReputationRemark}} {{item.goods.dateReputation}} {{item.goods.property}} 客服 ({{shopNum}}) 购物车 加入购物车 立即购买 {{goodsDetail.basicInfo.name}} ¥ {{selectSizePrice}} {{property.name}} {{item.name}} 购买数量 - + 加入购物车 立即购买

css页面

.container {
background-color: #F2f2f2;
min-height: 100%;
padding-bottom: 100rpx;
}
.swiper-container{
width: 100%;
position: relative;
}
.swiper_box {
width: 100%;
height:748rpx;
}

swiper-item image {
width: 100%;
display: inline-block;
overflow: hidden;
height:748rpx;
}
.swiper-container .dots{
position: absolute;
left: 0;
right: 0;
bottom: 20rpx;
display: flex;
justify-content: center;
}
.swiper-container .dots .dot{
margin: 0 8rpx;
width: 14rpx;
height: 14rpx;
background: #000;
border-radius: 50%;
transition: all .6s;
opacity: .3;
}
.swiper-container .dots .dot.active{
opacity: .6;
}
.goods-info{
background-color: #fff;
padding: 35rpx 0;
margin-bottom: 24rpx;
width: 100%;
position: relative;
}

.goods-info-fx {
position: absolute;
width: 50px;
height: 60px;
right: 0;
top: 0;
}

.goods-info-fx button {
position: absolute;
width: 50px;
height: 60px;
top: 0;
left: 0;
z-index: 2;
opacity: 0;
}

.goods-info-fx image {
width: 30px;
height: 30px;
position: absolute;
top: 0;
left: 0;
z-index: 1;
margin: 10px 10px 0 5px;
}

.goods-info-fx text {
position: absolute;
bottom: 3px;
left: 0;
z-index: 1;
font-size: 10px;
text-align: center;
}
.goods-info .goods-title{
box-sizing: border-box;
padding: 0 35rpx;
font-size: 32rpx;
line-height: 1.4;
color: #000;
margin-bottom: 28rpx;
}
.goods-info .goods-share{
box-sizing: border-box;
padding: 0 35rpx;
font-size: 25rpx;
line-height: 1.4;
color: #CC0000;
margin-bottom: 28rpx;
}
.goods-info .goods-price{
box-sizing:border-box;
color:#e64340;
font-size: 28rpx;
font-weight: bold;
width: 30%;
float:left;
}
.row-arrow{
width: 100%;
box-sizing: border-box;
padding: 0 120rpx 0 35rpx;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
height: 102rpx;
font-size: 28rpx;
line-height: 102rpx;
margin-bottom: 28rpx;
background: #fff url(https://cdn.it120.cc/images/weappshop/arrow-right.png) no-repeat 697rpx center;
background-size: 18rpx auto;
}
.goods-des-info{
width: 100%;
box-sizing: border-box;
background-color: #fff;
}
.label-title{
font-size:28rpx;
color:#000000;
padding: 30rpx;
}
.goods-text{
padding: 0 10rpx;
font-size:28rpx;
color:#666666;
line-height: 56rpx;
margin-bottom: 30rpx;
}
.des-imgs{
width:100%;
}
.des-imgs image{
width: 100%;
}
.footer-box{
width: 100%;
height: 100rpx;
background-color: #fff;
position: fixed;
bottom: 0;
left: 0;
display: flex;
box-shadow:0 0 8rpx 0 ;
}
.footer-box .contact{
position: relative;
width: 120rpx;
height: 100%;
line-height: 100rpx;
text-align: center;
padding-top: 26rpx;
font-size:20rpx;
color:#008000;
box-sizing: border-box;
background:url(“https://cdn.it120.cc/images/weappshop/kefu.png”) no-repeat center 21rpx;
background-size: 55rpx auto;
}
.footer-box .shop-cart-btn{
position: relative;
width: 150rpx;
height: 100%;
line-height: 100rpx;
text-align: center;
padding-top: 26rpx;
font-size:20rpx;
color:#acacb7;
box-sizing: border-box;
background:url(“https://cdn.it120.cc/images/weappshop/cart.png”) no-repeat center 21rpx;
background-size: 44rpx auto;
}
.footer-box .shop-cart-btn .shop-num{
position: absolute;
color:#e64340;
left: 80rpx;
top:-20rpx;
}
.footer-box .join-shop-cart{
text-align: center;
width: 250rpx;
height: 100%;
line-height: 100rpx;
background-color: #ff6850;
color:#fff;
font-size: 34rpx;
}
.footer-box .now-buy{
text-align: center;
height: 100%;
width: 250rpx;
line-height: 100rpx;
background-color: #e64340;
color:#fff;
font-size: 34rpx;
}
.show-popup{
position: fixed;
top: 0;
left: 0;
width:100%;
height: 100%;
z-index: 4;
}
.popup-mask{
position: fixed;
top: 0;
left: 0;
width:100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 5;
}
.popup-contents{
position: fixed;
left: 0;
bottom: 0;
width:100%;
background-color: #fff;
z-index: 6;
}
.pop-goods-info{
display: flex;
flex-direction: row;
align-items: center;
margin-left: 30rpx;
padding: 30rpx 0;
border-bottom: 1px solid #eee;
}
.pop-img-box{
width: 120rpx;
height: 120rpx;
overflow: hidden;
margin-right: 26rpx;
}
.pop-img-box .goods-thumbnail{
width: 120rpx;
height: 120rpx;
}
.pop-goods-title{
width: 484rpx;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
font-size:26rpx;
color:#000000;
}
.pop-goods-price{
font-size:26rpx;
color:#e64340;
margin-top:20rpx;
}
.pop-goods-close{
width: 36rpx;
height: 36rpx;
flex: 1;
background:url(“https://cdn.it120.cc/images/weappshop/popup-close.png”) no-repeat center center;
background-size: 36rpx auto;
align-self: flex-start;
margin-top: -10rpx;
}
.size-label-box .label{
font-size:26rpx;
color:#000;
padding-left: 30rpx;
padding: 30rpx 0 20rpx 30rpx;
}
.size-label-box .label-item-box{
display: flex;
margin-left: 30rpx;
flex-direction: row;
flex-wrap:wrap;
}
.size-label-box .label-item{
font-size:26rpx;
color:#000;
padding: 14rpx 20rpx;
border: 1px solid #ddd;
border-radius: 6rpx;
margin: 0 20rpx 20rpx 0;
}
.size-label-box .label-item.active{
color: #e64340;
border: 1px solid #e64340;
}
.buy-num-box{
display: flex;
justify-content: space-between;
padding: 30rpx 30rpx 48rpx 0;
margin-left: 30rpx;
border-top: 1px solid #eee;
margin-top: 30rpx;
align-items: center;
}
.num-label{
font-size:26rpx;
color:#000000;
}
.buy-num-box .num-box{
display: flex;
}
.buy-num-box .num-box .num-jian,
.buy-num-box .num-box .num-input,
.buy-num-box .num-box .num-jia{
width: 80rpx;
height: 64rpx;
line-height: 62rpx;
text-align: center;
border: 1px solid #eee;
}
.buy-num-box .num-box .num-input{
font-size: 28rpx;
}
.buy-num-box .num-box .num-input input{
height: 100%;
}
.popup-join-btn{
width: 100%;
height: 89rpx;
text-align: center;
line-height: 89rpx;
font-size:34rpx;
color:#ffffff;
background-color: #e64340;
}
.buy-num-box .num-box .hui{
background-color: #f5f5f9;
}

js页面
//index.js
//获取应用实例
var app = getApp();
// var WxParse = require(’…/…/wxParse/wxParse.js’);

Page({
data: {
autoplay: true,
interval: 3000,
duration: 1000,
goodsDetail:{},
swiperCurrent: 0,
hasMoreSelect:false,
selectSize:“选择：”,
selectSizePrice:0,
shopNum:0,
hideShopPopup:true,
buyNumber:0,
buyNumMin:1,
buyNumMax:0,

propertyChildIds:"",
propertyChildNames:"",
canSubmit:false, //  选中规格尺寸时候是否允许加入购物车
shopCarInfo:{},
shopType: "addShopCar",//购物类型，加入购物车或立即购买，默认为加入购物车

},

//事件处理函数
swiperchange: function(e) {
//console.log(e.detail.current)
this.setData({
swiperCurrent: e.detail.current
})
},
onLoad: function (e) {
if (e.inviter_id) {
wx.setStorage({
key: ‘inviter_id_’ + e.id,
data: e.inviter_id
})
}
var that = this;
// 获取购物车数据
wx.getStorage({
key: ‘shopCarInfo’,
success: function(res) {
that.setData({
shopCarInfo:res.data,
shopNum:res.data.shopNum
});
}
})
wx.request({
url: ‘https://api.it120.cc/’+ app.globalData.subDomain +’/shop/goods/detail’,
data: {
id: e.id
},
success: function(res) {
var selectSizeTemp = “”;
if (res.data.data.properties) {
for(var i=0;i<res.data.data.properties.length;i++){
selectSizeTemp = selectSizeTemp + " " + res.data.data.properties[i].name;
}
that.setData({
hasMoreSelect:true,
selectSize:that.data.selectSize + selectSizeTemp,
selectSizePrice:res.data.data.basicInfo.minPrice,
});
}
that.data.goodsDetail = res.data.data;
if (res.data.data.basicInfo.videoId) {
that.getVideoSrc(res.data.data.basicInfo.videoId);
}
that.setData({
goodsDetail:res.data.data,
selectSizePrice:res.data.data.basicInfo.minPrice,
buyNumMax:res.data.data.basicInfo.stores,
buyNumber:(res.data.data.basicInfo.stores>0) ? 1: 0
});
WxParse.wxParse(‘article’, ‘html’, res.data.data.content, that, 5);
}
})
this.reputation(e.id);
},
goShopCar: function () {
wx.reLaunch({
url: “/pages/shop-cart/index”
});
},
toAddShopCar: function () {
this.setData({
shopType: “addShopCar”
})
this.bindGuiGeTap();
},
tobuy: function () {
this.setData({
shopType: “tobuy”
});
this.bindGuiGeTap();
/* if (this.data.goodsDetail.properties && !this.data.canSubmit) {
this.bindGuiGeTap();
return;
}
if(this.data.buyNumber < 1){
wx.showModal({
title: ‘提示’,
content: ‘暂时缺货哦~’,
showCancel:false
})
return;
}
this.addShopCar();
this.goShopCar();*/
},
/**

  • 规格选择弹出框
    /
    bindGuiGeTap: function() {
    this.setData({
    hideShopPopup: false
    })
    },
    /    *
  • 规格选择弹出框隐藏
    /
    closePopupTap: function() {
    this.setData({
    hideShopPopup: true
    })
    },
    numJianTap: function() {
    if(this.data.buyNumber > this.data.buyNumMin){
    var currentNum = this.data.buyNumber;
    currentNum–;
    this.setData({
    buyNumber: currentNum
    })
    }
    },
    numJiaTap: function() {
    if(this.data.buyNumber < this.data.buyNumMax){
    var currentNum = this.data.buyNumber;
    currentNum++ ;
    this.setData({
    buyNumber: currentNum
    })
    }
    },
    /    *
  • 选择商品规格
  • @param {Object} e
    /
    labelItemTap: function(e) {
    var that = this;
    /
    console.log(e)
    console.log(e.currentTarget.dataset.propertyid)
    console.log(e.currentTarget.dataset.propertyname)
    console.log(e.currentTarget.dataset.propertychildid)
    console.log(e.currentTarget.dataset.propertychildname)
    */
    // 取消该分类下的子栏目所有的选中状态
    var childs = that.data.goodsDetail.properties[e.currentTarget.dataset.propertyindex].childsCurGoods;
    for(var i = 0;i < childs.length;i++){
    that.data.goodsDetail.properties[e.currentTarget.dataset.propertyindex].childsCurGoods[i].active = false;
    }
    // 设置当前选中状态
    that.data.goodsDetail.properties[e.currentTarget.dataset.propertyindex].childsCurGoods[e.currentTarget.dataset.propertychildindex].active = true;
    // 获取所有的选中规格尺寸数据
    var needSelectNum = that.data.goodsDetail.properties.length;
    var curSelectNum = 0;
    var propertyChildIds= “”;
    var propertyChildNames = “”;
    for (var i = 0;i < that.data.goodsDetail.properties.length;i++) {
    childs = that.data.goodsDetail.properties[i].childsCurGoods;
    for (var j = 0;j < childs.length;j++) {
    if(childs[j].active){
    curSelectNum++;
    propertyChildIds = propertyChildIds + that.data.goodsDetail.properties[i].id + “:”+ childs[j].id +",";
    propertyChildNames = propertyChildNames + that.data.goodsDetail.properties[i].name + “:”+ childs[j].name +" ";
    }
    }
    }
    var canSubmit = false;
    if (needSelectNum == curSelectNum) {
    canSubmit = true;
    }
    // 计算当前价格
    if (canSubmit) {
    wx.request({
    url: ‘https://api.it120.cc/’+ app.globalData.subDomain +’/shop/goods/price’,
    data: {
    goodsId: that.data.goodsDetail.basicInfo.id,
    propertyChildIds:propertyChildIds
    },
    success: function(res) {
    that.setData({
    selectSizePrice:res.data.data.price,
    propertyChildIds:propertyChildIds,
    propertyChildNames:propertyChildNames,
    buyNumMax:res.data.data.stores,
    buyNumber:(res.data.data.stores>0) ? 1: 0
    });
    }
    })
    }
this.setData({
  goodsDetail: that.data.goodsDetail,
  canSubmit:canSubmit
})

},
/**

  • 加入购物车
    */
    addShopCar:function(){
    if (this.data.goodsDetail.properties && !this.data.canSubmit) {
    if (!this.data.canSubmit){
    wx.showModal({
    title: ‘提示’,
    content: ‘请选择商品规格！’,
    showCancel: false
    })
    }
    this.bindGuiGeTap();
    return;
    }
    if(this.data.buyNumber < 1){
    wx.showModal({
    title: ‘提示’,
    content: ‘购买数量不能为0！’,
    showCancel:false
    })
    return;
    }
    //组建购物车
    var shopCarInfo = this.bulidShopCarInfo();

    this.setData({
    shopCarInfo:shopCarInfo,
    shopNum:shopCarInfo.shopNum
    });

    // 写入本地存储
    wx.setStorage({
    key:“shopCarInfo”,
    data:shopCarInfo
    })
    this.closePopupTap();
    wx.showToast({
    title: ‘加入购物车成功’,
    icon: ‘success’,
    duration: 2000
    })
    //console.log(shopCarInfo);

    //shopCarInfo = {shopNum:12,shopList:[]}
    },
    /**

    • 立即购买
      */
      buyNow:function(){
      if (this.data.goodsDetail.properties && !this.data.canSubmit) {
      if (!this.data.canSubmit) {
      wx.showModal({
      title: ‘提示’,
      content: ‘请选择商品规格！’,
      showCancel: false
      })
      }
      this.bindGuiGeTap();
      wx.showModal({
      title: ‘提示’,
      content: ‘请先选择规格尺寸哦~’,
      showCancel:false
      })
      return;
      }
      if(this.data.buyNumber < 1){
      wx.showModal({
      title: ‘提示’,
      content: ‘购买数量不能为0！’,
      showCancel:false
      })
      return;
      }
      //组建立即购买信息
      var buyNowInfo = this.buliduBuyNowInfo();
      // 写入本地存储
      wx.setStorage({
      key:“buyNowInfo”,
      data:buyNowInfo
      })
      this.closePopupTap();

    wx.navigateTo({
    url: “/pages/to-pay-order/index?orderType=buyNow”
    })
    },
    /**

  • 组建购物车信息
    */
    bulidShopCarInfo: function () {
    // 加入购物车
    var shopCarMap = {};
    shopCarMap.goodsId = this.data.goodsDetail.basicInfo.id;
    shopCarMap.pic = this.data.goodsDetail.basicInfo.pic;
    shopCarMap.name = this.data.goodsDetail.basicInfo.name;
    // shopCarMap.label=this.data.goodsDetail.basicInfo.id; 规格尺寸
    shopCarMap.propertyChildIds = this.data.propertyChildIds;
    shopCarMap.label = this.data.propertyChildNames;
    shopCarMap.price = this.data.selectSizePrice;
    shopCarMap.left = “”;
    shopCarMap.active = true;
    shopCarMap.number = this.data.buyNumber;
    shopCarMap.logisticsType = this.data.goodsDetail.basicInfo.logisticsId;
    shopCarMap.logistics = this.data.goodsDetail.logistics;
    shopCarMap.weight = this.data.goodsDetail.basicInfo.weight;

var shopCarInfo = this.data.shopCarInfo;
if (!shopCarInfo.shopNum) {
  shopCarInfo.shopNum = 0;
}
if (!shopCarInfo.shopList) {
  shopCarInfo.shopList = [];
}
var hasSameGoodsIndex = -1;
for (var i = 0; i < shopCarInfo.shopList.length; i++) {
  var tmpShopCarMap = shopCarInfo.shopList[i];
  if (tmpShopCarMap.goodsId == shopCarMap.goodsId && tmpShopCarMap.propertyChildIds == shopCarMap.propertyChildIds) {
    hasSameGoodsIndex = i;
    shopCarMap.number = shopCarMap.number + tmpShopCarMap.number;
    break;
  }
}

shopCarInfo.shopNum = shopCarInfo.shopNum + this.data.buyNumber;
if (hasSameGoodsIndex > -1) {
  shopCarInfo.shopList.splice(hasSameGoodsIndex, 1, shopCarMap);
} else {
  shopCarInfo.shopList.push(shopCarMap);
}
return shopCarInfo;

},
/**
* 组建立即购买信息
*/
buliduBuyNowInfo: function () {
var shopCarMap = {};
shopCarMap.goodsId = this.data.goodsDetail.basicInfo.id;
shopCarMap.pic = this.data.goodsDetail.basicInfo.pic;
shopCarMap.name = this.data.goodsDetail.basicInfo.name;
// shopCarMap.label=this.data.goodsDetail.basicInfo.id; 规格尺寸
shopCarMap.propertyChildIds = this.data.propertyChildIds;
shopCarMap.label = this.data.propertyChildNames;
shopCarMap.price = this.data.selectSizePrice;
shopCarMap.left = “”;
shopCarMap.active = true;
shopCarMap.number = this.data.buyNumber;
shopCarMap.logisticsType = this.data.goodsDetail.basicInfo.logisticsId;
shopCarMap.logistics = this.data.goodsDetail.logistics;
shopCarMap.weight = this.data.goodsDetail.basicInfo.weight;

var buyNowInfo = {};
if (!buyNowInfo.shopNum) {
  buyNowInfo.shopNum = 0;
}
if (!buyNowInfo.shopList) {
  buyNowInfo.shopList = [];
}
/*    var hasSameGoodsIndex = -1;
    for (var i = 0; i < toBuyInfo.shopList.length; i++) {
      var tmpShopCarMap = toBuyInfo.shopList[i];
      if (tmpShopCarMap.goodsId == shopCarMap.goodsId && tmpShopCarMap.propertyChildIds == shopCarMap.propertyChildIds) {
        hasSameGoodsIndex = i;
        shopCarMap.number = shopCarMap.number + tmpShopCarMap.number;
        break;
      }
    }
    toBuyInfo.shopNum = toBuyInfo.shopNum + this.data.buyNumber;
    if (hasSameGoodsIndex > -1) {
      toBuyInfo.shopList.splice(hasSameGoodsIndex, 1, shopCarMap);
    } else {
      toBuyInfo.shopList.push(shopCarMap);
    }*/

buyNowInfo.shopList.push(shopCarMap);
return buyNowInfo;

},
onShareAppMessage: function () {
return {
title: this.data.goodsDetail.basicInfo.name,
path: ‘/pages/goods-details/index?id=’ + this.data.goodsDetail.basicInfo.id + ‘&inviter_id=’ + app.globalData.uid,
success: function (res) {
// 转发成功
},
fail: function (res) {
// 转发失败
}
}
},
reputation: function (goodsId) {
var that = this;
wx.request({
url: ‘https://api.it120.cc/’ + app.globalData.subDomain + ‘/shop/goods/reputation’,
data: {
goodsId: goodsId
},
success: function (res) {
if (res.data.code == 0) {
//console.log(res.data.data);
that.setData({
reputation: res.data.data
});
}
}
})
},
getVideoSrc: function (videoId) {
var that = this;
wx.request({
url: ‘https://api.it120.cc/’ + app.globalData.subDomain + ‘/media/video/detail’,
data: {
videoId: videoId
},
success: function (res) {
if (res.data.code == 0) {
that.setData({
videoMp4Src: res.data.data.fdMp4
});
}
}
})
}
})

ZSHgit
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
微信小程序之购物车
讲二的博客
10-05 2528
原文地址：我的博客  实现增加商品的数量 思路：当用户点击增加按钮时，商品数量 +1 ,同时向后台发送增加商品数量的请求，这里没有实现超过库存就禁止增加数量，如果想做这个功能就加一个判断就可以了，判断当前的数量(增加后的)是否大于库存数量，如果大于库存数量则不发送请求同时商品数量不允许再增加 上代码 // 添加按钮被点击 addButtonClick:function(tap){...
微信小程序商城系列之购物车
奔跑的蚂蚁
06-21 1万+
购物车功能基本上算是每个商城都有的功能，也是整个商城系统最重要的部分，购物车的做法有很多种，一般存放在本地缓存和数据库中比较常见，本文就是存放到了数据库中； 先放一张效果图： 先分析下要实现的功能： 1.数量的加减 2.单选、多选、全选 3.根据选中商品单价和数量计算金额 wxml: &lt;block wx:if='{{hasList}}'&gt; &lt;!-- &lt...
16-微信小程序商城 购物车首页底部菜单（微信小程序商城开发、小程序毕业设计、小程序源代码）（黄菊华-微信小程序开发教程）
杭州.黄老师
11-17 2471
本章主要讲解商城小程序购物车界面和下单界面的实现。包含：购物车顶部菜单布局、购物车产品列表布局、下单页面底部菜单布局、下单页面其他界面的布局。 购物车首页底部菜单 本节主要讲解购物车页面底部菜单界面的实现，效果如图14-1所示。 1.布局分析 结构布局分析示意如图14-2所示。 根据上面的布局分析，我们会产生基础的框架，代码示例如下： <view> <!—第1层-开始 --> <view> <!—第2层-开始 --> <view> &l
20-微信小程序商城 下单页面的产品列表和留言（微信小程序商城开发、小程序毕业设计、小程序源代码）（黄菊华-微信小程序开发教程）
杭州.黄老师
11-17 1536
下单页面的产品列表和留言 本节主要讲解下单页面中的产品列表和留言界面如何实现。效果如图14-9所示。 根据上面的布局分析，我们会产生基础的框架，代码示例如下： <view><!—第1层-开始--> <image></image><!—第2层--> <view><!—第2层--> <view>珀莱雅水动力护肤品套装</view><!—第3层--> &
微信小程序底部菜单、购物车实现
mangguom23的博客
10-13 1857
首先看看目标效果： 先用view容器搭建页面的结构,由于最开始我引入了阿里云的图标库，所以一打开就能看得到图标的出现: 现在的效果是：用position:fixed + flex实现快速的布局 .btm_tool { border-top: 1rpx solid #ccc; position: fixed; left: 0; bottom: 0; width: 100%; height: 90rpx; background-color: #fff; display: flex
小程序中在底部tabbar上显示购物的数量（如：购物车）
dd602350527的博客
06-19 2876
onShow: function() { if (this.data.num == '') { //如果还未添加商品时候，可使用这个wx.removeTabBarBadge来移除 wx.removeTabBarBadge({//移除tabbar右上角的文本 index: 2,//tabbar下标 }) } else { //添加商品后通过wx.setTabBarBadge来进行设置 wx.setTabBarBadge({//tabbar右上角添加
uni-app项目中将商品加入购物车数据处理
kanno的博客
02-20 780
uni-app项目中将商品加入购物车数据处理。也就是skuList和specificationList数据的处理
微信小程序 购物车简单实例
09-01
在微信小程序中实现购物车功能是一项常见的需求，这个简单的实例主要涵盖了以下几个关键知识点： ...理解并掌握这些知识点，可以帮助开发者构建出功能完整、用户体验良好的微信小程序购物车功能。
微信小程序完美购物车抛物线（飞入效果）+ 回到顶部
最新发布
05-30
以上所述，结合`index.js`、`index.json`、`index.wxml`和`index.wxss`四个文件，你将能够实现一个具有飞入购物车和返回顶部功能的微信小程序页面。在实际开发中，记得根据具体需求进行适当的调整和优化，确保功能的...
微信小程序实战篇之购物车的实现代码示例
11-28
在微信小程序开发中，购物车功能的实现是一个关键部分，涉及到多个组件的使用以及复杂的业务逻辑。本篇文章将深入探讨如何在微信小程序中构建购物车功能，并通过代码示例进行详细解析。 首先，购物车界面通常由商品...
微信小程序 购物车 飘红点 显示购物数量 实测绝对好用
01-13
微信小程序购物车飘红点显示已经加在购物车内的商品数量，很实用的代码demo，可以用在商城项目中
小程序加入购物车代码
09-18
一个完整的微信小程序开发demo，绝对打开你的小程序之旅 一个完整的微信小程序开发demo，绝对打开你的小程序之旅
操作按钮悬浮固定在微信小程序底部的实现代码
10-16
在一些购物平台经常需要将商品加入购物车，像加入购物车按钮、结算按钮、收货列表添加地址按钮都是按钮悬浮底部的，怎么实现这样的功能呢？下面小编给大家带来了操作按钮悬浮固定在微信小程序底部的实现代码，一起看看吧
微信小程序demo：仿饿了么；购物车
03-15
5. **页面路由与生命周期**：微信小程序的页面有其特定的生命周期，如onLoad、onShow、onHide等，开发者需要根据这些生命周期函数来处理页面的加载、显示和隐藏，确保用户体验的流畅。 6. **样式设计与响应式布局**...
微信小程序实现添加购物车，及购物车商品的增删，全选等
weixin_45389051的博客
03-05 8226
一.首先定义一个点击事件 const app = getApp() 引入全局app.js <button bindtap="addCart">添加</button> data:{ id:'', image:'', title:'' } addCart(){ const obj = {} goods.id = this.id goods.image =this.image...
微信小程序商品详情页的底部弹出框
IsWinner的博客
08-31 1万+
**电商项目中商品详情页，加入购物车或者下单时可以选择商品属性的弹出框** 1.js代码(一般情况下只调用显示对话框的函数，当点击对话框外部的时候，对话框可以消失)//显示对话框 showModal: function () { // 显示遮罩层 var animation = wx.createAnimation({ duration: 200, ti
如何将操作按钮悬浮固定在微信小程序底部？
热门推荐
llixiangjian的博客
09-20 6万+
http://mydown.yesky.com/news/87296687.html 本章节主要介绍了如何将操作按钮悬浮固定在微信小程序底部?操作起来也比较简单，还不会的朋友一起跟着小编学习一下吧，希望对你们有所帮助。 　　常见的有加入购物车按钮、结算按钮、收货列表添加地址按钮。 　　以收货地址为例，将添加地址按钮悬浮于最底部，这样再多的地址，也不会被遮挡而看不见。
微信小程序-template使用：实现购物车商品数量加减功能
zhenghhgz的博客
05-23 8198
前言上一篇我们实现了购物车功能，里面有用到template模板功能来实现购物车商品数量加减和价格计算功能，可能篇幅过长介绍的并不清楚，本篇将详细介绍一下template模板来减少冗余代码。模板WXML提供模板（template），可以在模板中定义代码片段，然后在不同的地方调用。定义模板使用 name 属性，作为模板的名字。然后在&lt;template/&gt;内定义代码片段，如：template...
微信小程序实战篇-购物车
代码君
07-21 5万+
哈喽，大家好，快半个月没写了，现在提笔都有点生硬了，一直没更新的原因，一个是代码君也要上班，加上最近工作比较忙，还有就是写文章一直未被认可，所以没什么动力再创作了，那时真的坚持不下去，打算放弃了，感谢读者曹明，一个韩国的研究生读者，支持我，并给我鼓励，期待我更新下一篇，我非常感动，瞬间战斗力恢复，其实你们简单的点赞，评论，都是给我最大的支持，好了，煽情完毕，该讲今天的重点了，购物车，购物车的界面实现
微信小程序购物车全选按钮结算
05-25
实现微信小程序购物车全选按钮结算，需要以下步骤： 1. 在购物车页面中，为每个商品添加一个复选框，同时在页面顶部或底部添加一个全选复选框。 2. 给每个商品复选框绑定点击事件，当用户点击时，记录商品的选中...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值