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

最新推荐文章于 2024-04-26 21:59:34 发布
最新推荐文章于 2024-04-26 21:59:34 发布
阅读量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
    评论
微信小程序商品详情页底部弹出框 使用组件开发，animation
hjiaqing的博客
03-15 634
还是直接上代码 wxml <wxs src="../tools/tools.wxs" module="tools" /> <view class="cartAndBuy-container"> <view class="icon"> <i class="iconfont icon-kefu1" /> <text>客服</tex...
20.底部工具栏加入购物车和立即购买功能
sinat_33940108的博客
07-05 333
cnm,不会做
微信小程序底部菜单、购物车实现
mangguom23的博客
10-13 1836
首先看看目标效果： 先用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
微信小程序简单实现购物车功能
最新发布
weixin_45465881的博客
04-26 3239
实现在微信小程序中对每一个购物车界面的商品订单，进行勾选结算和取消结算的功能，相关界面截图如下： 具体实现示例代码为： 1、js代码： 2、wxml代码： 3、wxss代码： 本示例代码较为简单，适合初学的友友们借鉴，编写不易，关注博主，分享更多实用好用示例代码给大家，谢谢大家的支持和指导。
16-微信小程序商城 购物车首页底部菜单（微信小程序商城开发、小程序毕业设计、小程序源代码）（黄菊华-微信小程序开发教程）
杭州.黄老师
11-17 2388
本章主要讲解商城小程序购物车界面和下单界面的实现。包含：购物车顶部菜单布局、购物车产品列表布局、下单页面底部菜单布局、下单页面其他界面的布局。 购物车首页底部菜单 本节主要讲解购物车页面底部菜单界面的实现，效果如图14-1所示。 1.布局分析 结构布局分析示意如图14-2所示。 根据上面的布局分析，我们会产生基础的框架，代码示例如下： <view> <!—第1层-开始 --> <view> <!—第2层-开始 --> <view> &l
20-微信小程序商城 下单页面的产品列表和留言（微信小程序商城开发、小程序毕业设计、小程序源代码）（黄菊华-微信小程序开发教程）
杭州.黄老师
11-17 1493
下单页面的产品列表和留言 本节主要讲解下单页面中的产品列表和留言界面如何实现。效果如图14-9所示。 根据上面的布局分析，我们会产生基础的框架，代码示例如下： <view><!—第1层-开始--> <image></image><!—第2层--> <view><!—第2层--> <view>珀莱雅水动力护肤品套装</view><!—第3层--> &
微信小程序完美购物车抛物线（飞入效果）+ 回到顶部
05-30
以上所述，结合`index.js`、`index.json`、`index.wxml`和`index.wxss`四个文件，你将能够实现一个具有飞入购物车和返回顶部功能的微信小程序页面。在实际开发中，记得根据具体需求进行适当的调整和优化，确保功能的...
微信小程序 购物车 飘红点 显示购物数量 实测绝对好用
01-13
"微信小程序购物车飘红点显示已经加在购物车内的商品数量"这一功能，是提高用户体验、提升商城互动性的重要设计。 飘红点是一种常见的视觉提示，通常用于通知用户有未读消息或新内容。在购物车场景中，当用户添加...
微信小程序demo：仿饿了么；购物车
03-15
5. **页面路由与生命周期**：微信小程序的页面有其特定的生命周期，如onLoad、onShow、onHide等，开发者需要根据这些生命周期函数来处理页面的加载、显示和隐藏，确保用户体验的流畅。 6. **样式设计与响应式布局**...
微信小程序tabbar图标素材
04-18
在微信小程序中，TabBar 是一个至关重要的组件，它位于小程序页面底部，通常包含固定的一组功能入口，如首页、分类、购物车、个人中心等，为用户提供便捷的操作导航。 TabBar 图标是用户界面设计中的关键元素，它们...
操作按钮悬浮固定在微信小程序底部的实现代码
12-11
本章节主要介绍了如何将操作按钮悬浮固定在微信小程序底部?操作起来也比较简单，还不会的朋友一起跟着小编学习一下吧，希望对你们有所帮助。 　常见的有加入购物车按钮、结算按钮、收货列表添加地址按钮。 　以收货...
微信小程序商品列表和购物车完整代码实例
12-13
微信小程序开发，代码完整可用，用于电商微信平台开发参考，有二个界面（商品展示页和购物车页面）商品展示页选择商品加入购物车，再进入购物车页面将看到加入购物车的商品，并有商品件数和金额，和淘宝的购物车类似，有很好的参考价值。
【微信小程序开发】 商城多规格选择 购物车添加 简易demo
悟空—
03-27 1701
HTML <view id="vmsimulatedDATA"> <view class='productConten'> <view class="productDelcom" wx:for="{{simulatedDATA.specifications}}" wx:for-index='n' wx:for-item="ProductItem...
微信小程序实现添加购物车，及购物车商品的增删，全选等
weixin_45389051的博客
03-05 8188
一.首先定义一个点击事件 const app = getApp() 引入全局app.js <button bindtap="addCart">添加</button> data:{ id:'', image:'', title:'' } addCart(){ const obj = {} goods.id = this.id goods.image =this.image...
weui实现微信网页模板（主页，购物车，分类，后台等等）
咖啡味的小认真
04-24 2256
试试
小程序中在底部tabbar上显示购物的数量（如：购物车）
dd602350527的博客
06-19 2863
onShow: function() { if (this.data.num == '') { //如果还未添加商品时候，可使用这个wx.removeTabBarBadge来移除 wx.removeTabBarBadge({//移除tabbar右上角的文本 index: 2,//tabbar下标 }) } else { //添加商品后通过wx.setTabBarBadge来进行设置 wx.setTabBarBadge({//tabbar右上角添加
微信小程序 购物车简单实例
weixin_38047955的博客
06-11 5283
微信小程序，这里实现购物车功能的小demo,有需要此功能的朋友可以参考下。 摘要: 加减商品数量，汇总价格，全选与全不选 设计思路： 一、从网络上传入以下Json数据格式的数组 1.购物车id：cid 2.标题title 3.数量num 4.图片地址 5.价格price 6.小计 7.是否选中selected 二、点击复选框toggle操作 如已经选中的，经点击变成未选中，反之而反之
如何将操作按钮悬浮固定在微信小程序底部？
热门推荐
llixiangjian的博客
09-20 6万+
http://mydown.yesky.com/news/87296687.html 本章节主要介绍了如何将操作按钮悬浮固定在微信小程序底部?操作起来也比较简单，还不会的朋友一起跟着小编学习一下吧，希望对你们有所帮助。 　　常见的有加入购物车按钮、结算按钮、收货列表添加地址按钮。 　　以收货地址为例，将添加地址按钮悬浮于最底部，这样再多的地址，也不会被遮挡而看不见。
微信小程序-template使用：实现购物车商品数量加减功能
zhenghhgz的博客
05-23 8183
前言上一篇我们实现了购物车功能，里面有用到template模板功能来实现购物车商品数量加减和价格计算功能，可能篇幅过长介绍的并不清楚，本篇将详细介绍一下template模板来减少冗余代码。模板WXML提供模板（template），可以在模板中定义代码片段，然后在不同的地方调用。定义模板使用 name 属性，作为模板的名字。然后在&lt;template/&gt;内定义代码片段，如：template...
微信小程序购物车全选按钮结算
05-25
实现微信小程序购物车全选按钮结算，需要以下步骤： 1. 在购物车页面中，为每个商品添加一个复选框，同时在页面顶部或底部添加一个全选复选框。 2. 给每个商品复选框绑定点击事件，当用户点击时，记录商品的选中状态。 3. 给全选复选框绑定点击事件，当用户点击时，遍历所有商品的复选框，根据全选复选框的选中状态，设置商品复选框的状态。 4. 在页面底部添加结算按钮，当用户点击时，遍历所有商品，根据商品复选框的状态，计算选中商品的总价和数量，然后跳转到结算页面。 以下是一个示例代码： ``` <view class="cart"> <view class="cart-header"> <checkbox class="select-all" bindchange="selectAll">全选</checkbox> <view class="cart-header-text">购物车</view> </view> <view class="cart-items"> <block wx:for="{{items}}" wx:key="id"> <view class="cart-item"> <checkbox class="cart-item-checkbox" value="{{item.selected}}" bindchange="selectItem" data-id="{{item.id}}"></checkbox> <image class="cart-item-image" src="{{item.image}}"></image> <view class="cart-item-name">{{item.name}}</view> <view class="cart-item-price">¥{{item.price}}</view> </view> </block> </view> <view class="cart-footer"> <view class="cart-footer-total">合计：¥{{totalPrice}}</view> <button class="cart-footer-button" bindtap="checkout">结算({{selectedCount}})</button> </view> </view> <script> Page({ data: { items: [ { id: 1, name: '商品1', image: 'image1.jpg', price: 10, selected: false }, { id: 2, name: '商品2', image: 'image2.jpg', price: 20, selected: false }, { id: 3, name: '商品3', image: 'image3.jpg', price: 30, selected: false } ] }, selectAll: function(event) { var selected = event.detail.value; var items = this.data.items; for (var i = 0; i < items.length; i++) { items[i].selected = selected; } this.setData({ items: items }); }, selectItem: function(event) { var id = event.currentTarget.dataset.id; var items = this.data.items; for (var i = 0; i < items.length; i++) { if (items[i].id == id) { items[i].selected = event.detail.value; break; } } this.setData({ items: items }); }, checkout: function() { var items = this.data.items; var totalPrice = 0; var selectedCount = 0; for (var i = 0; i < items.length; i++) { if (items[i].selected) { totalPrice += items[i].price; selectedCount++; } } wx.navigateTo({ url: '/pages/checkout/checkout?totalPrice=' + totalPrice + '&selectedCount=' + selectedCount }); } }); </script> ``` 在上述代码中，我们给每个商品复选框绑定了 `selectItem` 事件，全选复选框绑定了 `selectAll` 事件，结算按钮绑定了 `checkout` 事件。事件处理函数中，我们通过遍历商品列表来计算选中商品的总价和数量，并跳转到结算页面。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值