微信小程序實現(xiàn)購物車小功能

更新時間：2020年12月30日 10:35:46 作者：小王同學Max

這篇文章主要為大家詳細介紹了微信小程序實現(xiàn)購物車小功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

微信小程序購物車效果，供大家參考，具體內容如下

購物車是一個比較簡單的小功能。

購物車功能主要運用了微信小程序的緩存機制，在商品頁面將需要添加的數(shù)據(jù)同步傳入緩存中，然后在購物頁面通過同步方法拿到對應的數(shù)據(jù)，最后在頁面上進行渲染就可以了。

關鍵方法

var arrlist = wx.getStorageSync(‘key') //獲取緩存對應key得數(shù)據(jù)
wx.setStorageSync(‘key'，arrlist) //修改緩存對應key得數(shù)據(jù)

以下便是購物車頁面的詳細代碼，以供交流參考：
切記要根據(jù)自身實際，不要按部就班

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="{{item.detail.images}}"></image>
   </view>
   <view class="cartsxq_right">
    <view class="pdtnamestyle">{{item.detail.pdtname}}</view>
    <view class="pricestyle">￥{{item.detail.price}}</view>
    <view class="xiaojistyle">金額：{{item.detail.price*item.count}}</view>
    <view class="gongnengdw">
     <view class="jian" bindtap="oper" data-type="-" data-index="{{index}}" >
      <image src="/images/jian.png"></image>
     </view>
     <view class="suliang">{{item.count}}</view>
     <view class="jia" bindtap="oper" data-type="+" data-index="{{index}}" >
      <image src="/images/jia.png"></image>
     </view>
    </view>
   </view>
  </view>
 </view>
</block>
</scroll-view>


<view class="allTotal">
 <view class="allTotal_clear" bindtap="toclears">清空</view>
 <view class="allTotal_left">總計：{{allTotal}}</view>
 <view class="allTotal_right">結算</view>
</view>

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;
  
  ///獲取當前數(shù)據(jù)索引對應的"count"（數(shù)量），后賦值給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的值與上面創(chuàng)建的count相等
  cartList[index].count = count;

  //默認allTotal為0，因為在onShow方法中已經(jīng)調用了allTotal，所以在這里我們需要在局部作用域下新創(chuàng)建一個allTotal變量
  var allTotal = 0;

  //把this.data.goodsCartList數(shù)據(jù)賦值給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();
 },

})

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

如何在父窗口中得知window.open()出的子窗口關閉事件
在父窗口中得知window.open()出的子窗口關閉事件的方法有很多，在本文將為大家詳細介紹下，感興趣的朋友可以參考下
2013-10-10
原生js實現(xiàn)返回頂部緩沖效果
本文主要分享了原生js實現(xiàn)返回頂部緩沖效果的示例代碼。具有一定的參考價值，下面跟著小編一起來看下吧
2017-01-01
JS+DIV實現(xiàn)的卷簾效果示例
這篇文章主要介紹了JS+DIV實現(xiàn)的卷簾效果,結合具體實例形式對比分析了javascript響應鼠標事件動態(tài)操作頁面元素屬性實現(xiàn)展開與折疊效果的相關操作技巧,需要的朋友可以參考下
2017-03-03
js 模擬實現(xiàn)類似c#下的hashtable的簡單功能代碼
越來越感覺js對集合的處理沒有c#強大。比如在實際開發(fā)中，經(jīng)常用到在一維數(shù)組或者二維數(shù)組里取某一個滿足某些條件的項，通常的處理方式就是遍歷數(shù)組，對比條件，匹配就取出，然后結束循環(huán)。
2010-01-01
JavaScript 鏈表定義與使用方法示例
這篇文章主要介紹了JavaScript 鏈表定義與使用方法,結合實例形式分析了JavaScript 鏈表的基本功能、定義與使用方法,需要的朋友可以參考下
2020-04-04
ES5新增數(shù)組的實現(xiàn)方法
這篇文章主要介紹了ES5新增數(shù)組的實現(xiàn)方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2020-05-05
JS原生帶縮略圖的圖片切換效果
這篇文章主要介紹了JS原生帶縮略圖的圖片切換效果，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值 ,需要的朋友可以參考下
2018-10-10
用JavaScript和jQuery實現(xiàn)瀑布流
本篇文章主要介紹了用JavaScript和jQuery實現(xiàn)瀑布流的方法，具有很好的參考價值。下面跟著小編一起來看下吧
2017-03-03
js輸出數(shù)據(jù)精確到小數(shù)點后n位代碼
要保留小數(shù)點后N位的問題，經(jīng)過一番思索，終于解決了，這篇文章主要介紹了js輸出數(shù)據(jù)精確到小數(shù)點后n位代碼，感興趣的朋友可以參考一下
2016-07-07
Ajax跨域實現(xiàn)代碼(后臺jsp)
這篇文章主要介紹了Ajax跨域實現(xiàn)代碼(后臺jsp),需要的朋友可以參考下
2017-01-01