欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

微信小程序利用swiper+css實現(xiàn)購物車商品刪除功能

 更新時間：2019年03月06日 11:21:29   作者：嘟嘟睡覺  
這篇文章主要介紹了微信小程序利用swiper+css實現(xiàn)購物車商品刪除功能，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

要實現(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)刪除滑塊效果，同時不影響頁面的正常滾動。具體如下

<!--html-->
  <view class="goodsList ">
      <!--商品-->
      <view class="goodsItem">
        <swiper previous-margin = "610rpx">
          <swiper-item class="goodsMsg">
            <!--xxx商品信息區(qū)域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;
   }

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評論