快捷導(dǎo)航

微信小程序利用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)文章

微信小程序傳值(傳遞數(shù)據(jù))的一些方法匯總
在微信小程序的開(kāi)發(fā)中,我們會(huì)經(jīng)常遇到頁(yè)面間數(shù)據(jù)傳遞或者相互影響的問(wèn)題,下面這篇文章主要給大家介紹了關(guān)于微信小程序傳值(傳遞數(shù)據(jù))的一些方法,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-06-06
利用JavaScript獲取用戶IP屬地方法詳解
最近很多平臺(tái)都上線了顯示用戶的位置信息的功能，那么這是如何做到的，據(jù)說(shuō)這個(gè)位置信息的準(zhǔn)確性在通信網(wǎng)絡(luò)運(yùn)營(yíng)商那里？本文將來(lái)探究一下
2022-05-05
Z-Blog中用到的js代碼
Z-Blog中用到的js代碼...
2007-03-03
詳解JS函數(shù)stack size計(jì)算方法
本篇文章給大家分享了關(guān)于JS函數(shù)中stack size計(jì)算方法的相關(guān)知識(shí)點(diǎn)，對(duì)此有需要的朋友可以跟著學(xué)習(xí)下。
2018-06-06
JS中script標(biāo)簽defer和async屬性的區(qū)別詳解
這篇文章主要介紹了JS中script標(biāo)簽defer和async屬性的區(qū)別詳解的相關(guān)資料,需要的朋友可以參考下
2016-08-08
JS實(shí)現(xiàn)圖片輪播跑馬燈
這篇文章主要為大家詳細(xì)介紹了原生JS實(shí)現(xiàn)圖片輪播跑馬燈效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-07-07
JS逆向之如何一招徹底解決selenium?WebDriver無(wú)響應(yīng)
Selenium Webdriver是一款強(qiáng)大的自動(dòng)化測(cè)試工具,用于模擬真實(shí)用戶在瀏覽器中的交互行為,下面這篇文章主要給大家介紹了關(guān)于JS逆向之如何一招徹底解決selenium?WebDriver無(wú)響應(yīng)的相關(guān)資料,需要的朋友可以參考下
2024-07-07
javascript設(shè)計(jì)模式之裝飾者模式
這篇文章主要為大家詳細(xì)介紹了javascript設(shè)計(jì)模式之裝飾者模式，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-01-01
JavaScript+canvas實(shí)現(xiàn)框內(nèi)跳動(dòng)小球
這篇文章主要為大家詳細(xì)介紹了JavaScript+canvas實(shí)現(xiàn)框內(nèi)跳動(dòng)小球，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-04-04
addeventlistener監(jiān)聽(tīng)scroll跟touch(實(shí)例講解)
下面小編就為大家?guī)?lái)一篇addeventlistener監(jiān)聽(tīng)scroll跟touch(實(shí)例講解)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-08-08