微信小程序利用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插件分享
May 22 Javascript
使用PHP+JQuery+Ajax分页的实现
Apr 23 Javascript
子页向父页传值示例
Nov 27 Javascript
zepto中使用swipe.js制作轮播图附swipeUp,swipeDown不起效果问题
Aug 27 Javascript
JavaScript字符串删除重复字符的方法
Dec 25 Javascript
jquery 动态增加删除行的简单实例(推荐)
Oct 12 Javascript
JavaScript排序算法动画演示效果的实现方法
Oct 18 Javascript
js 定位到某个锚点的方法
Nov 19 Javascript
bootstrap 下拉多选框进行多选传值问题代码分析
Feb 14 Javascript
详解Vue使用 vue-cli 搭建项目
Apr 20 Javascript
vue.js template模板的使用(仿饿了么布局)
Aug 13 Javascript
angular2 组件之间通过service互相传递的实例
Sep 30 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
全国FM电台频率大全 - 13 福建省
2020/03/11 无线电
php下实现伪 url 的超简单方法[转]
2007/09/24 PHP
PHP远程连接MYSQL数据库非常慢的解决方法
2008/07/05 PHP
ezSQL PHP数据库操作类库
2010/05/16 PHP
使用PHP curl模拟浏览器抓取网站信息
2013/10/28 PHP
PHP实现单例模式最安全的做法
2014/06/13 PHP
JS 用6N±1法求素数 实例教程
2009/10/20 Javascript
用jQuery打造TabPanel效果代码
2010/05/22 Javascript
javascript hashtable 修正版 下载
2010/12/30 Javascript
javascript 表格内容排序 简单操作示例代码
2014/01/03 Javascript
jQuery的$.proxy()应用示例介绍
2014/04/03 Javascript
IE中鼠标经过option触发mouseout的解决方法
2015/01/29 Javascript
jquery mobile 移动web(5)
2015/12/20 Javascript
js 获取站点应用名的简单实例
2016/08/18 Javascript
jquery对象与DOM对象转化
2017/02/08 Javascript
解决vue项目报错webpackJsonp is not defined问题
2018/03/14 Javascript
Angular4集成ng2-file-upload的上传组件
2018/03/14 Javascript
vue的for循环使用方法
2019/02/12 Javascript
vue实现页面切换滑动效果
2020/06/29 Javascript
[01:08:17]2018DOTA2亚洲邀请赛3月29日 小组赛B组 EG VS VGJ.T
2018/03/30 DOTA
Python获取Linux系统下的本机IP地址代码分享
2014/11/07 Python
python简单程序读取串口信息的方法
2015/03/13 Python
Python中用于计算对数的log()方法
2015/05/15 Python
Python入门_浅谈逻辑判断与运算符
2017/05/16 Python
书单|人生苦短,你还不用python!
2017/12/29 Python
Python OpenCV 直方图的计算与显示的方法示例
2018/02/08 Python
Python使用matplotlib实现基础绘图功能示例
2018/07/03 Python
opencv实现静态手势识别 opencv实现剪刀石头布游戏
2019/01/22 Python
描述RIP和OSPF区别以及特点
2015/01/17 面试题
网站美工岗位职责
2014/04/02 职场文书
商业用房租赁协议书
2014/10/13 职场文书
2015年市场部工作总结
2015/04/30 职场文书
婚宴父母致辞
2015/07/27 职场文书
亲情作文之母爱
2019/09/25 职场文书
MySQL主从搭建(多主一从)的实现思路与步骤
2021/05/13 MySQL
深入解读Java三大集合之map list set的用法
2021/11/11 Java/Android