微信小程序利用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;
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
在微信小程序的开发中,我们会经常遇到页面间数据传递或者相互影响的问题,下面这篇文章主要给大家介绍了关于微信小程序传值(传递数据)的一些方法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-06-06
最近很多平台都上线了显示用户的位置信息的功能，那么这是如何做到的， 据说这个位置信息的准确性在通信网络运营商那里？本文将来探究一下2022-05-05
Z-Blog中用到的js代码...2007-03-03
本篇文章给大家分享了关于JS函数中stack size计算方法的相关知识点，对此有需要的朋友可以跟着学习下。2018-06-06
这篇文章主要介绍了JS中script标签defer和async属性的区别详解的相关资料,需要的朋友可以参考下2016-08-08
这篇文章主要为大家详细介绍了原生JS实现图片轮播跑马灯效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
JS逆向之如何一招彻底解决selenium WebDriver无响应
Selenium Webdriver是一款强大的自动化测试工具,用于模拟真实用户在浏览器中的交互行为,下面这篇文章主要给大家介绍了关于JS逆向之如何一招彻底解决selenium WebDriver无响应的相关资料,需要的朋友可以参考下2024-07-07
这篇文章主要为大家详细介绍了javascript设计模式之装饰者模式，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-01-01
这篇文章主要为大家详细介绍了JavaScript+canvas实现框内跳动小球，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
addeventlistener监听scroll跟touch(实例讲解)
下面小编就为大家带来一篇addeventlistener监听scroll跟touch(实例讲解)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-08-08
最新评论