要實現的購物車效果如下：

小程序通過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;   }

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持錯新站長站。