微信小程序利用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 相关文章推荐
firefox 和 ie 事件处理的细节,研究,再研究 书写同时兼容ie和ff的事件处理代码
Apr 12 Javascript
JQuery+JS实现仿百度搜索结果中关键字变色效果
Aug 02 Javascript
Javascript中arguments和arguments.callee的区别浅析
Apr 24 Javascript
编写高性能Javascript代码的N条建议
Oct 12 Javascript
JS百度地图搜索悬浮窗功能
Jan 12 Javascript
使用vue-resource进行数据交互的实例
Sep 02 Javascript
angularjs实现table增加tr的方法
Feb 27 Javascript
vue单页面应用打开新窗口显示跳转页面的实例
Sep 21 Javascript
Vue父子组件之间的通信实例详解
Sep 28 Javascript
JavaScript对象的特性与实践应用深入详解
Dec 30 Javascript
React实现todolist功能
Dec 28 Javascript
node.js文件的复制、创建文件夹等相关操作
Feb 05 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语法(1)
2006/10/09 PHP
攻克CakePHP系列一 连接MySQL数据库
2008/10/22 PHP
利用discuz实现PHP大文件上传应用实例代码
2008/11/14 PHP
php侧拉菜单 漂亮,可以向右或者向左展开,支持FF,IE
2009/10/15 PHP
PHP面向接口编程 耦合设计模式 简单范例
2011/03/23 PHP
PHPUnit安装及使用示例
2014/10/29 PHP
js中将具有数字属性名的对象转换为数组
2011/03/06 Javascript
jquery绑定原理 简单解析与实现代码分享
2011/09/06 Javascript
学习从实践开始之jQuery插件开发 菜单插件开发
2012/05/03 Javascript
javascript采用数组实现tab菜单切换效果
2012/12/12 Javascript
jQuery.clean使用方法及思路分析
2013/01/07 Javascript
js给dropdownlist添加选项的小例子
2013/03/04 Javascript
JQuery与JS里submit()的区别示例介绍
2014/02/17 Javascript
jquery datatable后台封装数据示例代码
2014/08/07 Javascript
javascript常用正则表达式汇总
2015/07/31 Javascript
JavaScript电子时钟倒计时第二款
2016/01/10 Javascript
如何用js实现鼠标向上滚动时浮动导航
2016/07/18 Javascript
JS提示:Uncaught SyntaxError: Unexpected token ILLEGAL错误的解决方法
2016/08/19 Javascript
Angular企业级开发——MVC之控制器详解
2017/02/20 Javascript
vue 使用Jade模板写html,stylus写css的方法
2018/02/23 Javascript
Python实现完整的事务操作示例
2017/06/20 Python
小米5s微信跳一跳小程序python源码
2018/01/08 Python
解决python3 json数据包含中文的读写问题
2018/05/10 Python
python使用knn实现特征向量分类
2018/12/26 Python
Python While循环语句实例演示及原理解析
2020/01/03 Python
python求numpy中array按列非零元素的平均值案例
2020/06/08 Python
解决Python3.7.0 SSL低版本导致Pip无法使用问题
2020/09/03 Python
美国著名首饰网站:BaubleBar
2016/08/29 全球购物
网络工程与软件技术毕业生自荐信
2013/09/24 职场文书
端午节粽子促销活动方案
2014/02/02 职场文书
国庆宣传标语
2014/06/30 职场文书
债务纠纷委托书范本
2014/10/14 职场文书
运动会闭幕式致辞
2015/07/29 职场文书
清明节随笔
2015/08/15 职场文书
作文之亲情600字
2019/09/23 职场文书
Win11怎样将锁屏账户头像图片改成动画视频
2021/11/21 数码科技