推荐下载
-
2020-05-12 浏览：740
-
2020-05-06 浏览：521
-
2020-05-08 浏览：510
-
2020-04-04 浏览：504
-
2020-05-12 浏览：500
微信小程序之购物车和父子组件传值及calc的注意事项
发布时间:2020-10-03
1.效果图
3.父组件实现
要实现图中删除的效果，使用组件的形式更好做点，我当时本想直接在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=http://www.yiyongtong.com/archives/"/images/selected.png"></image> </view> <view class="commodityInfo"> <view class="commodityImg"> <image src=http://www.yiyongtong.com/archives/"{{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=http://www.yiyongtong.com/archives/"/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: 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.父组件实现
