商品求和和总价,获取元素高度

最新推荐文章于 2024-11-02 12:42:04 发布

d文意

最新推荐文章于 2024-11-02 12:42:04 发布

阅读量286

点赞数

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/W8034/article/details/109318348

版权

1 小程序中商品求和和总价

//总数
total(){
  let arr = []
  //拿到所有的商品
  const products = this.data.products
  for(let i = 0;i<products.length;i++){
      const goods = products[i].goods
      arr = [...arr,...goods]
  }
  //console.log(arr)
  //找到所有total不为0的数据
  //console.log(arr.filter(item=>item.total))
  const _arr = arr.filter(item=>item.total)
  return {total:_arr.reduce((sum,num)=>sum += num.total,0),
          totalPrice:arr.reduce((sum,num)=>sum += num.price*num.total,0)
  } 

},
//点击 改变数量
changeCount(e){
   const {cindex,count,pindex} = e.currentTarget.dataset
   const attr = `products[${pindex}].goods[${cindex}].total`
   this.setData({
     [attr]:count
   },
   //count设置完成后，获取总数 setData是一个异步函数
   ()=>{
    this.setData({
      total:this.total().total,
      totalPrice:this.total().totalPrice
    })
   }
   )
},

  <view class="total">
   <view class="reduce" bindtap="changeCount" data-count="{{product.total && product.total - 1}}" data-pIndex="{{index}}" data-cIndex="{{i}}">-</view>
      <view>{{product.total}}</view>
        <view class="add" bindtap="changeCount" data-count="{{product.total + 1}}" data-pIndex="{{index}}" data-cIndex="{{i}}">+</view>
   </view>
<view class="cart">
  <view>商品数量{{total}}</view>
  <view>总价{{totalPrice}}</view>
</view>

2 小程序中获取元素高度

//获取元素高度
getHeight(){
  const query = wx.createSelectorQuery()
  query.selectAll('.item').boundingClientRect()
  query.selectViewport().scrollOffset()
  query.exec(res=>{
   //console.log(res[0].map(item=>item.top))
   this.setData({
    itemHeights:res[0].map(item=>item.top)
   })
})
},