微信小程序利用swiper+css實(shí)現(xiàn)購物車商品刪除功能
更新時(shí)間：2019年03月06日 11:21:29 作者：嘟嘟睡覺
這篇文章主要介紹了微信小程序利用swiper+css實(shí)現(xiàn)購物車商品刪除功能，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
要實(shí)現(xiàn)的購物車效果如下：
小程序通過bind與catch綁定事件，沒有event.stopPropagation()方法。
- bind：不會阻止冒泡事件向上冒泡，
- catch：可以阻止冒泡事件向上冒泡
用touchstart、touchmove、touchend實(shí)現(xiàn)滑塊效果，無法動態(tài)js控制何時(shí)冒泡何時(shí)阻止冒泡，就會出現(xiàn)用bind時(shí)，左右上下滑動亂竄；用catch，商品區(qū)域只能左右滑動，無法上下滾動
而小程序提供的swiper通過css就可以實(shí)現(xiàn)刪除滑塊效果，同時(shí)不影響頁面的正常滾動。具體如下
<!--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)文章
在微信小程序的開發(fā)中,我們會經(jīng)常遇到頁面間數(shù)據(jù)傳遞或者相互影響的問題,下面這篇文章主要給大家介紹了關(guān)于微信小程序傳值(傳遞數(shù)據(jù))的一些方法,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-06-06
最近很多平臺都上線了顯示用戶的位置信息的功能，那么這是如何做到的， 據(jù)說這個(gè)位置信息的準(zhǔn)確性在通信網(wǎng)絡(luò)運(yùn)營商那里？本文將來探究一下2022-05-05
Z-Blog中用到的js代碼...2007-03-03
本篇文章給大家分享了關(guān)于JS函數(shù)中stack size計(jì)算方法的相關(guān)知識點(diǎn)，對此有需要的朋友可以跟著學(xué)習(xí)下。2018-06-06
JS中script標(biāo)簽defer和async屬性的區(qū)別詳解
這篇文章主要介紹了JS中script標(biāo)簽defer和async屬性的區(qū)別詳解的相關(guān)資料,需要的朋友可以參考下2016-08-08
這篇文章主要為大家詳細(xì)介紹了原生JS實(shí)現(xiàn)圖片輪播跑馬燈效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
JS逆向之如何一招徹底解決selenium?WebDriver無響應(yīng)
Selenium Webdriver是一款強(qiáng)大的自動化測試工具,用于模擬真實(shí)用戶在瀏覽器中的交互行為,下面這篇文章主要給大家介紹了關(guān)于JS逆向之如何一招徹底解決selenium?WebDriver無響應(yīng)的相關(guān)資料,需要的朋友可以參考下2024-07-07
這篇文章主要為大家詳細(xì)介紹了javascript設(shè)計(jì)模式之裝飾者模式，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-01-01
JavaScript+canvas實(shí)現(xiàn)框內(nèi)跳動小球
這篇文章主要為大家詳細(xì)介紹了JavaScript+canvas實(shí)現(xiàn)框內(nèi)跳動小球，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
addeventlistener監(jiān)聽scroll跟touch(實(shí)例講解)
下面小編就為大家?guī)硪黄猘ddeventlistener監(jiān)聽scroll跟touch(實(shí)例講解)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-08-08