微信小程序利用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 相关文章推荐
JS(JQuery)操作Array的相关方法介绍
Feb 11 Javascript
使用VS开发 Node.js指南
Jan 06 Javascript
angularJS 入门基础
Feb 09 Javascript
javascript框架设计之浏览器的嗅探和特征侦测
Jun 23 Javascript
跟我学习javascript的var预解析与函数声明提升
Nov 16 Javascript
JavaScript中关于for循环删除数组元素内容时出现的问题
Nov 21 Javascript
浅析如何利用angular结合translate为项目实现国际化
Dec 08 Javascript
防止重复发送 Ajax 请求
Feb 15 Javascript
JS获取子、父、兄节点方法小结
Aug 14 Javascript
微信小程序中使用ECharts 异步加载数据的方法
Jun 27 Javascript
详解微信小程序scroll-view横向滚动的实践踩坑及隐藏其滚动条的实现
Mar 14 Javascript
一文快速详解前端框架 Vue 最强大的功能
May 21 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
PHP XML操作的各种方法解析(比较详细)
2010/06/17 PHP
解析php中session的实现原理以及大网站应用应注意的问题
2013/06/17 PHP
php根据操作系统转换文件名大小写的方法
2014/02/24 PHP
php计算两个日期时间差(返回年、月、日)
2014/06/19 PHP
php限制文件下载速度的代码
2015/10/20 PHP
PHP中localeconv()函数的用法
2019/03/26 PHP
Laravel统计一段时间间隔的数据方法
2019/10/09 PHP
Javascript 不能释放内存.
2006/09/07 Javascript
Ucren Virtual Desktop V2.0
2006/11/07 Javascript
jquery缓动swing liner控制动画过程不同时刻的速度
2014/05/29 Javascript
Javascript页面跳转常见实现方式汇总
2015/11/28 Javascript
vue.js 表格分页ajax 异步加载数据
2016/10/18 Javascript
Vuex2.0+Vue2.0构建备忘录应用实践
2016/11/30 Javascript
JavaScript组成、引入、输出、运算符基础知识讲解
2016/12/08 Javascript
canvas快速绘制圆形、三角形、矩形、多边形方法介绍
2016/12/29 Javascript
BootStrap 模态框实现刷新网页并关闭功能
2017/01/04 Javascript
JQuery中Ajax的操作完整例子
2017/03/07 Javascript
微信小程序tabBar模板用法实例分析【附demo源码下载】
2017/11/28 Javascript
LayerClose弹窗关闭刷新方法
2018/08/17 Javascript
浅谈redux以及react-redux简单实现
2018/08/28 Javascript
Python模拟简单电梯调度算法示例
2018/08/20 Python
用Python编写一个高效的端口扫描器的方法
2018/12/20 Python
python覆盖写入,追加写入的实例
2019/06/26 Python
Python+OpenCv制作证件图片生成器的操作方法
2019/08/21 Python
pytorch中的自定义数据处理详解
2020/01/06 Python
python:删除离群值操作(每一行为一类数据)
2020/06/08 Python
北美三大旅游网站之一:Travelocity
2017/08/12 全球购物
美国领先的个性化礼品商城:Personalization Mall
2019/07/27 全球购物
高中生期末评语
2014/01/28 职场文书
学生会主席竞聘书
2014/03/31 职场文书
团日活动总结范文
2014/04/25 职场文书
后进生评语大全
2015/01/04 职场文书
英文感谢信格式
2015/01/21 职场文书
大学生学期个人总结
2015/02/12 职场文书
Python 数据可视化神器Pyecharts绘制图像练习
2022/02/28 Python
使用 MybatisPlus 连接 SqlServer 数据库解决 OFFSET 分页问题
2022/04/22 SQL Server