微信小程序利用swiper+css实现购物车商品删除功能
- 更新时间：2022-07-07 08:19:22
- 编辑：尚景同
要实现的购物车效果如下：
小程序通过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;
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持码农之家。
相关教程
-
微信小程序动态添加分享数据的实操方法
这篇文章主要为大家详细介绍了微信小程序动态添加分享数据的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
发布时间：2019-07-29
-
微信小程序通过gitee进行版本管理的实例
这篇文章主要介绍了微信小程序使用gitee进行版本管理，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
发布时间：2020-04-26
-
微信小程序实现红包功能的实例代码
这篇文章主要为大家详细介绍了微信小程序实现红包功能，以及后端PHP实现逻辑，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
发布时间：2019-09-26
-
微信小程序中生成带参小程序码流程方法
这篇文章主要为大家详细介绍了微信小程序云开发，生成带参小程序码，云函数网络请求，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
发布时间：2019-11-29
-
汇总运用taro开发微信小程序遇到的坑
Taro，京东凹凸实验室出品的适配多端的一个框架，这篇文章主要介绍了使用taro开发微信小程序遇到的坑总结,需要的朋友可以参考下
发布时间：2020-01-16
-
详解微信小程序冒泡事件及阻止方法
这篇文章主要介绍了微信小程序冒泡事件及其阻止方法,结合实例形式分析了事件分类、冒泡及相应阻止操作方法,需要的朋友可以参考下
发布时间：2019-12-30
-
微信小程序自定义导航栏的制作方法
这篇文章主要给大家介绍了关于微信小程序自定义导航栏的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用微信小程序具有一定的参考学习价值，需要的朋友们下面来一起学
发布时间：2020-01-31
