這篇文章主要介紹了微信小程序怎么利用swiper+css實現(xiàn)購物車商品刪除功能，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

專注于為中小企業(yè)提供成都做網(wǎng)站、網(wǎng)站建設(shè)服務(wù),電腦端+手機端+微信端的三站合一,更高效的管理,為中小企業(yè)凱里免費做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動了成百上千企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設(shè)實現(xiàn)規(guī)模擴充和轉(zhuǎn)變。

要實現(xiàn)的購物車效果如下：

小程序通過bind與catch綁定事件，沒有event.stopPropagation()方法。

• bind：不會阻止冒泡事件向上冒泡，

• catch：可以阻止冒泡事件向上冒泡

用touchstart、touchmove、touchend實現(xiàn)滑塊效果，無法動態(tài)js控制何時冒泡何時阻止冒泡，就會出現(xiàn)用bind時，左右上下滑動亂竄；用catch，商品區(qū)域只能左右滑動，無法上下滾動

而小程序提供的swiper通過css就可以實現(xiàn)刪除滑塊效果，同時不影響頁面的正常滾動。具體如下

  
      
      
        
          
            
          
          
            刪除
          
        
      
  

 /*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;
   }

感謝你能夠認真閱讀完這篇文章，希望小編分享的“微信小程序怎么利用swiper+css實現(xiàn)購物車商品刪除功能”這篇文章對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識等著你來學習!