在做微信小程序时，觉得小组里对购物车的实现不是很完美，就自己尝试的写了下，然后用到了父子组件传值，父子组件传值的话，和vue框架上是非常相似的，以及calc这个css函数，calc有个注意点，自己不怎么用，一时间有差点忘了，这里记录下
下面话不多说了，来一起看看详细的介绍吧
1.效果图
2.子组件实现
要实现图中删除的效果，使用组件的形式更好做点，我当时本想直接在pages里实现，不过结果就是，滑动时，所有的商品都显示了删除按钮，除非用数组将每个商品要移动的距离存储起来，不过这样的话就很麻烦，所以我也是用组件来实现的
关于微信组件，可以直接点击链接访问官网查看自定义组件
子组件index.wxml
<view bindtouchstart="handleTouchStart" bindtouchmove="handleTouchMove"> <view bindtap="handleSelect" data-is-selected="{{commodity.isselected}}"> <view wx:if="{{commodity.isselected==0}}"></view> <image wx:else src="https://www.jb51.net/images/selected.png"></image> </view> <view> <view> <image src="https://www.jb51.net/{{commodity.image}}"></image> </view> <view> <view>{{commodity.title}}</view> <view>规格：{{commodity.standard?commodity.standard:'无'}}</view> <view> <view>￥{{commodity.price}}</view> <view> <i-input-number value="{{selectedNum}}" min="1" max="{{commodity.stock}}" bindchange="numChange" /> </view> </view> </view> </view> <view> <image src="https://www.jb51.net/images/delete.png"></image> <text>删除</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: 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中的数字输入框
{ "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.父组件实现
父组件index.wxml，这里用的是假数据，所以操作上会有一些是联调时不必要的操作