微信小程序之购物车和父子组件传值及calc的注意事项

最新推荐文章于 2023-11-13 11:47:18 发布

一只叮code的小蚊子

最新推荐文章于 2023-11-13 11:47:18 发布

阅读量622

点赞数

分类专栏：微信小程序 JavaScript 文章标签：购物车的实现微信小程序父子组件传值 this.triggerEvent calc计算注意点

本文链接：https://blog.csdn.net/zjw222/article/details/84000913

版权

本文介绍了如何在微信小程序中实现购物车功能，包括子组件和父组件的实现、父子组件间的值传递，特别是子组件向父组件触发事件。同时，讨论了calc计算时需要注意的浏览器兼容性和格式要求，以及在处理商品价格计算时的思考过程。

摘要由CSDN通过智能技术生成

在做微信小程序时，觉得小组里对购物车的实现不是很完美，就自己尝试的写了下，然后用到了父子组件传值，父子组件传值的话，和vue框架上是非常相似的，以及calc这个css函数，calc有个注意点，自己不怎么用，一时间有差点忘了，这里记录下

1.效果图

2.子组件实现

要实现图中删除的效果，使用组件的形式更好做点，我当时本想直接在pages里实现，不过结果就是，滑动时，所有的商品都显示了删除按钮，除非用数组将每个商品要移动的距离存储起来，不过这样的话就很麻烦，所以我也是用组件来实现的
关于微信组件，可以直接点击链接访问官网查看自定义组件
子组件index.wxml

<view class="commodityItem" bindtouchstart="handleTouchStart" bindtouchmove="handleTouchMove" style="transform:translateX({
  {-rightSpace}}px)">
  <view class="selectedBtn" bindtap="handleSelect" data-is-selected="{
  {commodity.isselected}}">
    <view class="noSelected" wx:if="{
  {commodity.isselected==0}}"></view>
    <image class="selectedImg" wx:else src="/images/selected.png"></image>
  </view>
  <view class="commodityInfo">
    <view class="commodityImg">
      <image src="{
  {commodity.image}}"></image>          
    </view>
    <view class="commodityTitle">
      <view class="title">{
  {commodity.title}}</view>
      <view class="standard">规格：{
  {commodity.standard?commodity.standard:'无'}}</view>
      <view class="count">
        <view class="price">￥{
  {commodity.price}}</view>
        <view class="commodityNum">
          <i-input-number value="{
  {selectedNum}}" min="1" max="{
  {commodity.stock}}" bindchange="numChange" />
        </view>
      </view>
    </view>
  </view>
  <view class="deleteBtn">
    <image class="deleteImg" src="/images/delete.png"></image>
    <text class="deleteText">删除</text>
  </view>
</view>

子组件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: 2