要實現的購物車效果如下：
小程序通過bind與catch綁定事件，沒有event.stopPropagation()方法。
用touchstart、touchmove、touchend實現滑塊效果，無法動態js控制何時冒泡何時阻止冒泡，就會出現用bind時，左右上下滑動亂竄；用catch，商品區域只能左右滑動，無法上下滾動
而小程序提供的swiper通過css就可以實現刪除滑塊效果，同時不影響頁面的正常滾動。具體如下
<!--html--> <view class="goodsList "> <!--商品--> <view class="goodsItem"> <swiper previous-margin = "610rpx"> <swiper-item class="goodsMsg"> <!--xxx商品信息區域xxx--> </swiper-item> <swiper-item class="delBtn"> <view>刪除</view> </swiper-item> </swiper> </view> </view>
/*css*/ .goodsItem swiper{ height:230rpx; } .goodsItem .goodsMsg{ height:170rpx; padding:30rpx 0rpx; width:750rpx!important; background:#fff; margin-left:-610rpx; } .goodsItem .goodsMsg .delBtn{ color:#fff; line-height:230rpx; font-size:30rpx; text-align: center; display:flex; display:-webkit-flex; justify-content: flex-end; } .goodsItem .delBtn view{ width:140rpx; background:#ff4300; }以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
