微信小程序利用swiper+css实现购物车商品删除功能


Posted in Javascript onMarch 06, 2019

要实现的购物车效果如下:

微信小程序利用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;
   }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQuery 遮罩层实现(mask)实现代码
Jan 09 Javascript
根据一段代码浅谈Javascript闭包
Dec 14 Javascript
左侧是表头的JS表格控件(自写,网上没有的)
Jun 04 Javascript
jQuery中ajax的使用与缓存问题的解决方法
Dec 19 Javascript
PHPExcel中的一些常用方法汇总
Jan 23 Javascript
JS获取浏览器地址栏的多个参数值的任意值实例代码
Jul 24 Javascript
微信小程序MUI导航栏透明渐变功能示例(通过改变rgba的a值实现)
Jan 24 Javascript
移动端吸顶fixbar的解决方案详解
Jul 17 Javascript
微信小程序获取用户绑定手机号方法示例
Jul 21 Javascript
JavaScript 反射和属性赋值实例解析
Oct 28 Javascript
JavaScript canvas实现雪花随机动态飘落
Feb 08 Javascript
vue vantUI tab切换时 list组件不触发load事件的问题及解决方法
Feb 14 Javascript
JS实现数组深拷贝的方法分析
Mar 06 #Javascript
node.js中ws模块创建服务端和客户端,网页WebSocket客户端
Mar 06 #Javascript
node.js中express模块创建服务器和http模块客户端发请求
Mar 06 #Javascript
微信小程序性能优化之checkSession的使用
Mar 06 #Javascript
详解在微信小程序的JS脚本中使用Promise来优化函数处理
Mar 06 #Javascript
移动端(微信等使用vConsole调试console的方法
Mar 05 #Javascript
利用Vconsole和Fillder进行移动端抓包调试方法
Mar 05 #Javascript
You might like
Cakephp 执行主要流程
2010/03/24 PHP
PHP基于新浪IP库获取IP详细地址的方法
2017/05/04 PHP
phpStudy vscode 搭建debug调试的教程详解
2020/07/28 PHP
JavaScript中实现块作用域的方法
2010/04/01 Javascript
JS添加删除一组文本框并对输入信息加以验证判断其正确性
2013/04/11 Javascript
HTML Color Picker(js拾色器效果)
2013/08/27 Javascript
非常漂亮的JS+CSS图片幻灯切换特效
2013/11/20 Javascript
javascript抽象工厂模式详细说明
2014/12/16 Javascript
实现前后端数据交互方法汇总
2015/04/07 Javascript
由ReactJS的Hello world说开来
2015/07/02 Javascript
Jquery轮播效果实现过程解析
2016/03/30 Javascript
微信小程序 wx:for的使用实例详解
2017/04/27 Javascript
JS+H5 Canvas实现时钟效果
2018/07/20 Javascript
JS使用栈判断给定字符串是否是回文算法示例
2019/03/04 Javascript
Vuex新手的理解与使用详解
2019/05/31 Javascript
Jquery实现获取子元素的方法分析
2019/08/24 jQuery
详解elementUI中input框无法输入的问题
2020/04/27 Javascript
[04:16]完美世界DOTA2联赛PWL S2 集锦第一期
2020/11/23 DOTA
Python模拟脉冲星伪信号频率实例代码
2018/01/03 Python
django-rest-swagger对API接口注释的方法
2019/08/29 Python
python 解决cv2绘制中文乱码问题
2019/12/23 Python
Python-opencv实现红绿两色识别操作
2020/06/04 Python
keras使用Sequence类调用大规模数据集进行训练的实现
2020/06/22 Python
检测用户浏览器是否支持CSS3的方法
2009/08/29 HTML / CSS
一款恶搞头像特效的制作过程 利用css3和jquery
2014/11/21 HTML / CSS
台湾生鲜宅配:大口市集
2017/10/14 全球购物
Feelunique德国官方网站:欧洲最大的在线美容零售商
2019/07/20 全球购物
乌克兰的第一家手表店:Deka
2020/03/05 全球购物
2014年大班元旦活动方案
2014/02/26 职场文书
2014党委书记四风问题对照检查材料思想汇报
2014/09/22 职场文书
上课玩手机的检讨书
2014/10/01 职场文书
成绩单评语
2015/01/04 职场文书
2015年检验员工作总结范文
2015/04/30 职场文书
go 实现简易端口扫描的示例
2021/05/22 Golang
python模块与C和C++动态库相互调用实现过程示例
2021/11/02 Python
漫画「处刑少女的生存之道」第3卷封面公开
2022/03/21 日漫