微信小程序利用swiper+css实现购物车商品删除功能
更新时间：2019年03月06日 11:21:29 作者：嘟嘟睡觉
这篇文章主要介绍了微信小程序利用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;
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家分享了一些实用性较高的js方法，方便大家开发时使用，感兴趣的小伙伴们可以参考一下2016-04-04
这篇文章主要介绍了javascript 删除所有事件监听器,文中还通过示例代码介绍了javaScript删除对象属性总结方法，结合示例代码给大家介绍的非常详细，需要的朋友可以参考下2023-06-06
这篇文章主要为大家学习介绍了JavaScript中数组双重去重的几个常用方法，文中的示例代码讲解详细，感兴趣的小伙伴可以跟随小编一起学习一下2023-07-07
JavaScript的性能问题不容小觑，这就需要我们开发人员在编写JavaScript程序时多注意一些细节，本文非常详细的介绍了一下JavaScript性能优化方面的知识点，绝对是干货，需要的朋友快来一起学习吧2016-01-01
这篇文章主要为大家详细介绍了js实现PC端和移动端刮卡效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-02-02
iScroll是我们在做手机网页中常用的滑动控件之一。单说其功能已相当丰富。但个别时候也是会掉坑的，正好这次就遇上了。在android的app中嵌入网页时不少手机会出现一次点击两次触发的现象。经过一段时间的折腾，总算想到了一个还算合理的解决放案。2015-03-03
这篇文章主要介绍了JS+CSS实现带关闭按钮DIV弹出窗口的方法,实例分析了div弹出层窗口的实现技巧,非常具有实用价值,具有一定参考借鉴价值,需要的朋友可以参考下2015-02-02
这篇文章主要以实例的方式讲解了避免javascript冲突的方法，具有一定的参考价值，感兴趣的朋友可以参考一下2016-01-01
用javascript实现计算两个日期的间隔天数...2007-08-08
这篇文章主要为大家详细介绍了js实现通过开始结束控制的计时器，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-02-02
最新评论