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