脚本宝典收集整理的这篇文章主要介绍了微信小程序 利用swiper + css 实现购物车商品删除功能,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
要实现的购物车效果如下:
小程序通过bind与catch绑定事件,没有event.stopPRopagation()方法。
bind:不会阻止冒泡事件向上冒泡,
catch:可以阻止冒泡事件向上冒泡
用touchstart、touchmove、touchend实现滑块效果,无法动态js控制何时冒泡何时阻止冒泡,就会出现用bind时,左右上下滑动乱窜;用catch,商品区域只能左右滑动,无法上下滚动
而小程序提供的swiPEr通过css就可以实现删除滑块效果,同时不影响页面的正常滚动。具体如下
<!--htML-->
<view class="goodsList ">
<!--商品-->
<view class="goodsItem">
<swiper previous-margin = "610rpx">
<swiper-item class="goodsMsg">
<!--xxx商品信息区域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;
}
以上是脚本宝典为你收集整理的微信小程序 利用swiper + css 实现购物车商品删除功能全部内容,希望文章能够帮你解决微信小程序 利用swiper + css 实现购物车商品删除功能所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。