微信小程序之購物車和父子組件傳值及calc的注意事項(xiàng)

helloworldcoding 發(fā)布于2019-08-23 13:06 / 2454人閱讀

摘要：在做微信小程序時(shí)，覺得小組里對購物車的實(shí)現(xiàn)不是很完美，就自己嘗試的寫了下，然后用到了父子組件傳值，父子組件傳值的話，和框架上是非常相似的，以及這個(gè)函數(shù)，有個(gè)注意點(diǎn)，自己不怎么用，一時(shí)間有差點(diǎn)忘了，這里記錄下效果圖子組件實(shí)現(xiàn)要實(shí)現(xiàn)圖中刪除的效

在做微信小程序時(shí)，覺得小組里對購物車的實(shí)現(xiàn)不是很完美，就自己嘗試的寫了下，然后用到了父子組件傳值，父子組件傳值的話，和vue框架上是非常相似的，以及calc這個(gè)css函數(shù)，calc有個(gè)注意點(diǎn)，自己不怎么用，一時(shí)間有差點(diǎn)忘了，這里記錄下

1.效果圖

2.子組件實(shí)現(xiàn)

要實(shí)現(xiàn)圖中刪除的效果，使用組件的形式更好做點(diǎn)，我當(dāng)時(shí)本想直接在pages里實(shí)現(xiàn)，不過結(jié)果就是，滑動時(shí)，所有的商品都顯示了刪除按鈕，除非用數(shù)組將每個(gè)商品要移動的距離存儲起來，不過這樣的話就很麻煩，所以我也是用組件來實(shí)現(xiàn)的

關(guān)于微信組件，可以直接點(diǎn)擊鏈接訪問官網(wǎng)查看自定義組件

子組件index.wxml


  
    
    
  
  
    
                
    
    
      {{commodity.title}}
      規(guī)格：{{commodity.standard?commodity.standard:"無"}}
      
        ￥{{commodity.price}}
        
          
        
      
    
  
  
    
    刪除

子組件index.wxss

/* 商品 */
.commodityItem{
  display: flex;
  position: relative;
  padding: 10rpx 24rpx 20rpx 30rpx;
  box-sizing: border-box;
  background: #fff;
  transition: all .5s;
}
/* 選擇按鈕 */
.selectedBtn{
  display: flex;
  align-items: center;
  width: 80rpx;
}
.noSelected{
  width: 46rpx;
  height: 46rpx;
  border-radius: 50%;
  border: 1px solid #ef5225;
}
.selectedBtn .selectedImg{
  width: 50rpx;
  height: 50rpx;
}
/* 商品信息 */
.commodityInfo{
  display: flex;
  width: calc(100% - 80rpx);
}
.commodityImg{
  margin-right: 18rpx;
  width: 220rpx;
  height: 220rpx;
}
.commodityImg image{
  width: 100%;
  height: 100%;
  vertical-align: middle;  
}
/* 商品title */
.commodityTitle{
  width: calc(100% - 220rpx);
}
.title{
  display: -webkit-box;
  width: 100%;
  height: 70rpx;
  line-height:35rpx;
  font-size: 24rpx;
  font-weight:600;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.standard{
  padding-top: 16rpx;
  width: 100%;
  height: 90rpx;
  box-sizing: border-box;
}
.count{
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 60rpx;
}

/* 刪除按鈕 */
.deleteBtn{
  display: flex;
  position: absolute;
  width: 70px;
  height: 100%;
  top: 0rpx;
  right: -70px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #ef5225;
}
.deleteImg{
  margin-bottom: 10rpx;
  width: 50rpx;
  height: 50rpx;
  vertical-align: middle;
}
.deleteText{
  color: #fff;
}

子組件index.json，這里用了iview中的數(shù)字輸入框

{
  "component": true,
  "usingComponents": {
    "i-input-number": "/component/iview/input-number/index"
  }
}

子組件index.js

Component({

  properties: {
    commodity: Object,
  },

  data: {
    touchStart: null,
    rightSpace: 0,
    selectedNum: 1,
  },

  methods: {
    /* 商品是否選中 */
    handleSelect() {
            let selectedNum = this.data.selectedNum;
      let commodity = this.data.commodity;
      if(commodity.isselected == 0) {
        commodity.isselected = 1;
      } else {
        commodity.isselected = 0;
      }
            this.triggerEvent("handleselect", { commodity, selectedNum})
    },
    /* 處理觸摸滑動開始 */
    handleTouchStart(e) {
      /* 記錄觸摸滑動初始位置 */
      let touchStart = e.changedTouches[0].clientX;
      this.setData({
        touchStart
      })
    },
    /* 處理觸摸滑動 */
    handleTouchMove(e) {
      console.log(e)
      let moveSpace = e.changedTouches[0].clientX;
      let touchStart = this.data.touchStart;
      if (touchStart != null) {
        if (moveSpace - touchStart > 70) {
          this.setData({
            touchStart: null,
            rightSpace: 0
          })
        }
        else if (moveSpace - touchStart < -70) {
          this.setData({
            touchStart: null,
            rightSpace: 70
          })
        }
      }
    },
    numChange(e) {
        let selectedNum = e.detail.value;
        let commodity = this.data.commodity;
        this.setData({
            selectedNum
        })
        this.triggerEvent("handleselect", { commodity, selectedNum})
    }
  }
})

3.父組件實(shí)現(xiàn)

父組件index.wxml，這里用的是假數(shù)據(jù)，所以操作上會有一些是聯(lián)調(diào)時(shí)不必要的操作


  
    
      
      {{items.shopname}}
    
    滿￥100包郵，滿10件包郵
    
      
    
  
    
        
            
        
            全選
        
        
      合計(jì):
      ￥{{countPrice}}
    
        
      結(jié)算
      ({{countSelectedNum}})

父組件index.wxss

page{
  background: #f8f8f8;
}
.cart{
    padding-bottom: 100rpx;
  font-size: 26rpx;
}
.item{
  border-bottom: 1px solid #eee;
}
/* 頭部店鋪信息 */
.storeInfo{
  display: flex;
  padding: 18rpx 0rpx 18rpx 30rpx;
  background: #fff;
  box-sizing: border-box;
}
.storeInfo .avatar{
  width: 56rpx;
  height: 56rpx;
  border-radius: 50%;
  vertical-align: middle;
}
.storeInfo .storeName{
  margin-left: 16rpx;
  line-height: 56rpx;
}
/* 包郵信息 */
.discount{
  padding-left: 30rpx;
  height:50rpx;
  line-height: 50rpx;
  font-size:20rpx;
  color: #666;
  box-sizing: border-box;
}
/* 底部操作 */
.count{
    display: flex;
    position: fixed;
    padding-left: 30rpx;
    bottom: 0;
  left: 0;
    width: 100%;
    height: 100rpx;
    line-height: 100rpx;
  box-sizing: border-box;
  color: #232323;
    background: #eee;
}
/* 全選 */
.selectAll{
    display: flex;
  padding-right: 20rpx;
    align-items: center;
    width: 25%;
  font-size: 30rpx;
}
.selectAll .noSelected{
  width: 46rpx;
  height: 46rpx;
  border-radius: 50%;
  border: 1px solid #ef5225;
}
.selectAll .selectedImg{
  width: 50rpx;
  height: 50rpx;
}
.selectAllText{
    margin-left: 18rpx;
}

.countPrice{
    position: absolute;
  top: 0;
  right: 270rpx;
  height: 100%;
  line-height: 100rpx;
  text-align: center;
  font-size: 30rpx;
}
.countPrice text{
  margin-right: 15rpx;
}
.account{
  position: absolute;
  top: 0;
  right: 0;
    width: 270rpx;
  height: 100%;
  line-height: 100rpx;
  text-align: center;
  font-size: 30rpx;
  background: #ef5225;
  color: #fff;
}

父組件index.json，引用子組件

{
  "usingComponents": {
    "cart-item": "/component/cart/index"
  }
}

父組件index.js

Page({

  data: {
    cartList: [
      {
        shopname: "貓咪小店",
        logo: "/images/avatar.jpeg",
        shopid: 11,
        commodity: [
          {
            id: 1,
            image:"/images/commodity.jpg",
            title: "雅詩蘭黛鮮活煥亮紅石榴晚霜50ml 補(bǔ)水保濕 滋潤排濁",
            standard: "111 + 黑色",
            price: "100",
            stock: 10,
            quantity: 1,
            isselected: 0,
          }, 
          {
            id: 2,
            image:"/images/avatar7.jpg",
            title: "雅詩蘭黛鮮活煥亮紅石榴晚霜50ml 補(bǔ)水保濕 滋潤排濁",
            price: "10",
            stock: 5,
            quantity: 1,
            isselected: 0,
          }
        ]
      },
      {
        shopname: "貓咪小店",
        logo: "/images/avatar5.jpg",
        shopid: 450,
        commodity: [
          {
            id: 3,
            image:"/images/commodity.jpg",
            title: "雅詩蘭黛鮮活煥亮紅石榴晚霜50ml 補(bǔ)水保濕 滋潤排濁",
            price: "90",
            stock: 10,
            quantity: 1,
            isselected: 0,
          },
          {
            id: 4,
            image:"/images/avatar7.jpg",
            title: "雅詩蘭黛鮮活煥亮紅石榴晚霜50ml 補(bǔ)水保濕 滋潤排濁",
            price: "100",
            stock: 5,
            quantity: 1,
            isselected: 0,
          }, 
          {
            id: 5,
            image:"/images/commodity.jpg",
            title: "雅詩蘭黛鮮活煥亮紅石榴晚霜50ml 補(bǔ)水保濕 滋潤排濁",
            standard: "111 + 黑色",
            price: "100",
            stock: 2,
            quantity: 1,
            isselected: 0,
          }
        ]
      },
      {
        shopname: "貓咪小店",
        logo: "/images/avatar.jpeg",
        shopid: 550,
        commodity: [
          {
            id: 6,
            image:"/images/avatar8.jpg",
            title: "雅詩蘭黛鮮活煥亮紅石榴晚霜50ml 補(bǔ)水保濕 滋潤排濁",
            standard: "111 + 黑色",
            price: "100",
            stock: 1,
            quantity: 1,
            isselected: 0,
          }
        ]
      },
    ],
        /* 商品是否全選中 */
        isSelectedAll: false,
        /* 已選中商品的價(jià)格 */
        countPrice: 0,
    /* 統(tǒng)計(jì)所有選中的商品數(shù)量 */
    countSelectedNum: 0,
  },
  /* 處理商品選中 */
  handleSelect(e) {
        let countPrice = 0;
    let countSelectedNum = 0;
    let cartList = this.data.cartList;
    let length = cartList.length;

        /* 因?yàn)槭羌贁?shù)據(jù)，所以需要循環(huán)查找到對應(yīng)的數(shù)據(jù)將其替換 */
    for(let i = 0; i < length; i++) {
      for(let j = 0; j < cartList[i].commodity.length; j++) {
                if (cartList[i].commodity[j].id == e.detail.commodity.id) {
          cartList[i].commodity[j] = e.detail.commodity;
          cartList[i].commodity[j].selectedNum = e.detail.selectedNum;
        }
        if (cartList[i].commodity[j].isselected == 1) {
          /* 點(diǎn)擊選中的時(shí)候，計(jì)算價(jià)格，要判斷下設(shè)置的商品選中數(shù)量，
           * 我這里的是對點(diǎn)擊了的商品才設(shè)置了選中的數(shù)量，所以需要對沒有點(diǎn)擊的商品數(shù)量設(shè)置為1，然后就默認(rèn)的加一
           */
          if (cartList[i].commodity[j].selectedNum != undefined) {
            countPrice += cartList[i].commodity[j].price * cartList[i].commodity[j].selectedNum;
            countSelectedNum += cartList[i].commodity[j].selectedNum
          } else {
            countPrice += cartList[i].commodity[j].price * 1;
            countSelectedNum += 1;
          }
        }
      }
    }

        /* 對是否全選中進(jìn)行判斷 */
        let isSelectedAll = true;
        for (let i = 0; i < length; i++) {
            for (let j = 0; j < cartList[i].commodity.length; j++) {
                /* 若商品中的isselecetd有為0的就終止循環(huán)，直接設(shè)置為未全選 */
                if (cartList[i].commodity[j].isselected == 0) {
                    isSelectedAll = false;
                    break;
                }
            }
        }

    this.setData({
      cartList,
            isSelectedAll,
            countPrice,
      countSelectedNum
    })
  },
    /* 全選中商品 */
    handleSelectAll() {
        let isSelectedAll = !this.data.isSelectedAll;
        let cartList = this.data.cartList;
        let length = cartList.length;
    let countPrice = 0;
    let countSelectedNum = 0;

        /* 遍歷數(shù)據(jù)中的isselected來進(jìn)行全選的操作 */
        for(let i = 0; i < length; i++) {
            for (let j = 0; j < cartList[i].commodity.length; j++) {
                if(isSelectedAll) {
                    cartList[i].commodity[j].isselected = 1;
          /* 全選的時(shí)候，計(jì)算價(jià)格，要判斷下設(shè)置的商品選中數(shù)量，
           * 我這里的是對點(diǎn)擊了的商品才設(shè)置了選中的數(shù)量，所以需要對沒有點(diǎn)擊的商品數(shù)量設(shè)置為1，然后就默認(rèn)加一
           */
          if (cartList[i].commodity[j].selectedNum != undefined) {
            countPrice += parseInt(cartList[i].commodity[j].price) * cartList[i].commodity[j].selectedNum;
            countSelectedNum += cartList[i].commodity[j].selectedNum;
          } else {
            countPrice += cartList[i].commodity[j].price * 1;    
            countSelectedNum += 1;        
          }
                } else {
                    cartList[i].commodity[j].isselected = 0;
                }
            }
        }

        this.setData({
            isSelectedAll,
            cartList,
      countPrice,
      countSelectedNum
        })
    },
})

4.父子組件傳值

較常用的都是父組件往子組件傳值，所以子組件往父組件傳值就會不是很熟悉

我這里的話，是因?yàn)橛玫募贁?shù)據(jù)，在點(diǎn)擊商品選中或者不選中時(shí)，需要改變商品里的選中屬性，所以用到了子組件往父組件傳值，也包括傳遞選中的商品數(shù)量

子組件往父組件傳值的話，是通過在調(diào)用this.triggerEvent()來實(shí)現(xiàn)的

/* 在父組件中定義方法：bind:handleselect或者也可以直接寫成bindhandleselect*/

在子組件中調(diào)用

this.triggerEvent("handleselect", { commodity, selectedNum})

這個(gè)this.triggerEvent("handleselect", { commodity, selectedNum })方法中，handleselect的名稱要與父組件中引用子組件時(shí)綁定的方法名稱一樣，后面的對象就是傳遞的值，也可以直接是以直接量的形式傳遞，然后再父組件中通過e.detail來獲取對應(yīng)的值

handleSelect(e) {
    console.log(e.detail)
    console.log(e.detail.commodity)
    console.log(e.detail.selectedNum)
}

5.calc的注意事項(xiàng)

我以前也遇到過，然后現(xiàn)在再用的時(shí)候，一時(shí)間把這點(diǎn)給忘了，在看到編譯器樣式的時(shí)候，才猛然想起

.user-content{
    padding: 10px 0 10px 50px;
    width: calc(100% - 50px);  /* 計(jì)算寬度，"+"或"-"符號前后有空格 */
    height: 18px;
}

css中使用calc可以進(jìn)行簡單的運(yùn)算：

單位可以是百分比，px，rem，em等單位

使用"+","-","*","/"運(yùn)算符（使用"+"或者"-"符號時(shí)，符號前后必須加上空格）

在Firefox瀏覽器上使用要加上-moz前綴

chrome瀏覽器上使用要加上-webkit前綴

（使用"+"或者"-"符號時(shí)，符號前后必須加上空格）

6.部分想法

其實(shí)在樣式上還是挺快就完成了，就是在計(jì)算商品價(jià)格的時(shí)候，想了挺久

在計(jì)算價(jià)格時(shí)，當(dāng)時(shí)就有點(diǎn)蒙圈，總是想著要怎么判斷他是增加數(shù)量還是減少數(shù)量，然后就陷入死循環(huán)的之中。

其實(shí)不用想她是增加還是減少數(shù)量，因?yàn)槟愣际莻鞯氖巧唐返臄?shù)量，而且在計(jì)算時(shí)，也是判斷了商品是否選中，所以，直接點(diǎn)，計(jì)算價(jià)格乘以數(shù)量就可以了

然后選中的商品數(shù)量的統(tǒng)計(jì)就和計(jì)算價(jià)格的思路是一樣的了

正在努力學(xué)習(xí)中，若對你的學(xué)習(xí)有幫助，留下你的印記唄（點(diǎn)個(gè)贊咯^_^）

往期好文推薦：

判斷iOS和Android及PC端

css實(shí)現(xiàn)波浪線及立方體

微信小程序中遇到的多規(guī)格問題(一)

實(shí)現(xiàn)單行及多行文字省略號

GPU云服務(wù)器云服務(wù)器微信小程序組件微信小程序和云服務(wù)器溝通阿里云服務(wù)器和微信小程序交互微信小程序的功能

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/99216.html

發(fā)表評論

登陸后可評論

0條評論

helloworldcoding

男|高級講師

我要關(guān)注我要私信

TA的文章

【C語言】動態(tài)內(nèi)存分配

閱讀 1387·2021-10-14 09:43
搬瓦工等國外VPS服務(wù)器IP如何判斷是否被TCP阻斷

閱讀 4235·2021-09-27 13:57
服務(wù)器主機(jī)是什么-主機(jī)與服務(wù)器的區(qū)別是什么？

閱讀 4566·2021-09-22 15:54
VPS服務(wù)器性能測試：系統(tǒng)信息、上傳/下載帶寬、硬盤I/O、UnixBench、ping、丟包測試、

閱讀 2560·2021-09-22 10:54
基于Windows平臺的Radius服務(wù)器搭建指南

閱讀 2376·2021-09-22 10:02
HostHatch：$20/年/1GB內(nèi)存/10GB SSD空間/500GB流量/1Gbps端口/K

閱讀 2117·2021-08-27 13:11
校招筆試 | C語言筆試必考系列?。?！

閱讀 876·2019-08-29 18:44
在頁面未加載完之前顯示loading動畫

閱讀 1648·2019-08-29 15:20

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

微信小程序之購物車和父子組件傳值及calc的注意事項(xiàng)

相關(guān)文章

微信小程序之scroll-view的flex布局問題

微信小程序之店鋪評分組件及vue中用svg實(shí)現(xiàn)的評分顯示組件

**記一次微信小程序在安卓的白屏問題**

**去除富文本中的html標(biāo)簽及vue、react、微信小程序中的過濾器**

Vue2.0生命周期及路由導(dǎo)航守衛(wèi)

發(fā)表評論

0條評論

helloworldcoding

男|高級講師

TA的文章

【C語言】動態(tài)內(nèi)存分配

搬瓦工等國外VPS服務(wù)器IP如何判斷是否被TCP阻斷

服務(wù)器主機(jī)是什么-主機(jī)與服務(wù)器的區(qū)別是什么？

VPS服務(wù)器性能測試：系統(tǒng)信息、上傳/下載帶寬、硬盤I/O、UnixBench、ping、丟包測試、

基于Windows平臺的Radius服務(wù)器搭建指南

HostHatch：$20/年/1GB內(nèi)存/10GB SSD空間/500GB流量/1Gbps端口/K

校招筆試 | C語言筆試必考系列?。?！

在頁面未加載完之前顯示loading動畫

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

微信小程序之購物車和父子組件傳值及calc的注意事項(xiàng)

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！