亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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

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

要實(shí)現(xiàn)的購(gòu)物車效果如下：

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

  • bind：不會(huì)阻止冒泡事件向上冒泡，
  • catch：可以阻止冒泡事件向上冒泡

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

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

<!--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;
   }

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

相關(guān)文章

最新評(píng)論