微信小程序实现左滑动删除效果


Posted in Javascript onMarch 30, 2020

最近做微信小程序项目遇到左滑动效果,比如在我的收藏页面,我的历史浏览记录页面,我的购物车页面,大多数都会用到这种效果,我把代码复制出来,供大家参考,用的时候直接用模板,再此基础上修改就行。

wxml中的代码:

<view class="touch-item {{item.isTouchMove ? 'touch-move-active' : ''}}" data-index=" {{index}}" bindtouchstart="touchstart" bindtouchmove="touchmove" wx:for="{{items}}" wx:key="">
 <view class="content">
 <view class='com'>
 <view class='tp'>
  <image src="{{item.image_src}}" class='img' />
 </view>
 <view class='txt'>
  <view class='tit'>{{item.goods_name}}</view>

  <view class='bot'>

  <block wx:if="{{item.marketable=='true'}}">
  <view class="pri">
  <text class="new-price">¥{{item.goods_price}}</text>
  <text class="old-price">¥{{item.mktprice}}</text>
  </view>
  <navigator class='a'>
  <label class='ti1'>可使用优惠券</label>
  </navigator>
  </block>
  <block wx:else>
  <navigator class='a'>
  <label class='ti'>对不起该商品已下架</label>
  </navigator>
  </block>

  </view>
 </view>
 </view>
 </view>
<view class="del" catchtap="del" data-index="{{index}}" data-productid="{{item.product_id}}" data-goodsid="{{item.goods_id}}">删除</view>
</view>

我这是对完接口之后的代码,循环items,然后用{{item.}}取到下面的值,并且用了一个判断,如果后台返回来的字段值marketable==‘true',让其显示商品的销售价和原价,否则显示该商品已下架。

js中的代码:

data: {
 startX: 0, //开始坐标
 startY: 0
 },
 touchstart: function(e) {
 //开始触摸时 重置所有删除
 this.data.items.forEach(function(v, i) {
 if (v.isTouchMove) //只操作为true的
 v.isTouchMove = false;
 })
 this.setData({
 startX: e.changedTouches[0].clientX,
 startY: e.changedTouches[0].clientY,
 items: this.data.items
 })
 },
 //滑动事件处理
 touchmove: function(e) {
 var that = this,
 index = e.currentTarget.dataset.index, //当前索引
 startX = that.data.startX, //开始X坐标
 startY = that.data.startY, //开始Y坐标
 touchMoveX = e.changedTouches[0].clientX, //滑动变化坐标
 touchMoveY = e.changedTouches[0].clientY, //滑动变化坐标
 //获取滑动角度
 angle = that.angle({
 X: startX,
 Y: startY
 }, {
 X: touchMoveX,
 Y: touchMoveY
 });
 that.data.items.forEach(function(v, i) {
 v.isTouchMove = false
 //滑动超过30度角 return
 if (Math.abs(angle) > 30) return;
 if (i == index) {
 if (touchMoveX > startX) //右滑
  v.isTouchMove = false
 else //左滑
  v.isTouchMove = true
 }
 })
 //更新数据
 that.setData({
 items: that.data.items
 })
 },

 /**
 * 计算滑动角度
 * @param {Object} start 起点坐标
 * @param {Object} end 终点坐标
 */
 angle: function(start, end) {
 var _X = end.X - start.X,
 _Y = end.Y - start.Y
 //返回角度 /Math.atan()返回数字的反正切值
 return 360 * Math.atan(_Y / _X) / (2 * Math.PI);
 },

wxml中的代码:

.touch-item {
 background-color: #fff;
 margin-top: 20rpx;
 display: flex;
 justify-content: space-between;
 width: 100%;
 overflow: hidden;
 box-sizing: border-box;
}

.content {
 width: 100%;
 -webkit-transition: all 0.4s;
 transition: all 0.4s;
 -webkit-transform: translateX(180rpx);
 transform: translateX(180rpx);
 margin-left: -180rpx;
}

.touch-move-active .content, .touch-move-active .del {
 -webkit-transform: translateX(0);
 transform: translateX(0);
}

.com {
 padding: 25rpx;
 height: 210rpx;
}

.tp {
 background-color: white;
 float: left;
}

.img {
 width: 210rpx;
 height: 210rpx;
 display: inline-block;
 vertical-align: middle;
 border-radius: 15rpx;
}

.txt {
 width: 420rpx;
 margin-left: 270rpx;
 position: relative;
}

.txt .tit {
 font-size: 28rpx;
 display: -webkit-box;
 -webkit-box-orient: vertical;
 -webkit-line-clamp: 2;
 overflow: hidden;
}

.txt .bot {
 width: 100%;
 font-size: 24rpx;
 margin-top: 20rpx;
}

.ti1 {
 margin-top: 15rpx;
 font-size: 23rpx;
 background-color: #fce64c;
 padding: 10rpx;
 display: inline-block;
}

.ti {
 margin-top: 35rpx;
 font-size: 28rpx;
 display: inline-block;
 color: #a2a2a2;
}

.del {
 background-color: red;
 width: 180rpx;
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 color: #fff;
 -webkit-transform: translateX(180rpx);
 transform: translateX(180rpx);
 -webkit-transition: all 0.4s;
 transition: all 0.4s;
}

.new-price {
 font-weight: 600;
 color: #ff503c;
 font-size: 35rpx;
}

.old-price {
 margin-left: 30rpx;
 text-decoration: line-through;
 font-size: 28rpx;
 color: #b1b1b1;
}

为大家推荐现在关注度比较高的微信小程序教程一篇:《微信小程序开发教程》小编为大家精心整理的,希望喜欢。

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

Javascript 相关文章推荐
Jquery获得控件值的三种方法总结
Feb 13 Javascript
Javascript设计模式之观察者模式的多个实现版本实例
Mar 03 Javascript
Bootstrap基本布局实现方法详解
Nov 25 Javascript
node.js操作MongoDB的实例详解
Oct 11 Javascript
微信小程序之分享页面如何返回首页的示例
Mar 28 Javascript
使用JavaScript实现node.js中的path.join方法
Aug 12 Javascript
vue配置nprogress实现页面顶部进度条
Sep 21 Javascript
浅谈Three.js截图并下载的大坑
Nov 01 Javascript
在vue项目实现一个ctrl+f的搜索功能
Feb 28 Javascript
在Vue中实现随hash改变响应菜单高亮
Mar 09 Javascript
vue 导出文件,携带请求头token操作
Sep 10 Javascript
Handtrack.js库实现实时监测手部运动(推荐)
Feb 08 Javascript
jquery ui 实现 tab标签功能示例【测试可用】
Jul 25 #jQuery
小程序实现左滑删除效果
Jul 25 #Javascript
微信公众号获取用户地理位置并列出附近的门店的示例代码
Jul 25 #Javascript
详解Vue.js和layui日期控件冲突问题解决办法
Jul 25 #Javascript
turn.js异步加载实现翻书效果
Jul 25 #Javascript
js 实现ajax发送步骤过程详解
Jul 25 #Javascript
MockJs结合json-server模拟后台数据
Aug 26 #Javascript
You might like
asp和php下textarea提交大量数据发生丢失的解决方法
2008/01/20 PHP
PHP防注入安全代码
2008/04/09 PHP
在smarty模板中使用PHP函数的方法
2011/04/23 PHP
php.ini-dist 和 php.ini-recommended 的区别介绍(方便开发与安全的朋友)
2012/07/01 PHP
PHP的foreach中使用引用时需要注意的一个问题和解决方法
2014/05/29 PHP
PHP程序员不应该忽略的3点
2015/10/09 PHP
thinkPHP模板引擎用法示例
2016/12/08 PHP
关于jQuery参考实例2.0 用jQuery选择元素
2013/04/07 Javascript
封装html的select标签的js操作实例
2013/07/02 Javascript
jquery实现用户信息修改验证输入方法汇总
2015/07/18 Javascript
jQuery实现彩带延伸效果的网页加载条loading动画
2015/10/29 Javascript
用AngularJS来实现监察表单按钮的禁用效果
2016/11/02 Javascript
JavaScript仿支付宝6位数字密码输入框
2016/12/29 Javascript
微信小程序实现的一键连接wifi功能示例
2019/04/24 Javascript
JavaScript常用内置对象用法分析
2019/07/09 Javascript
Vue解析带html标签的字符串为dom的实例
2019/11/13 Javascript
three.js欧拉角和四元数的使用方法
2020/07/26 Javascript
vue监听键盘事件的相关总结
2021/01/29 Vue.js
用Python代码来解图片迷宫的方法整理
2015/04/02 Python
利用Tkinter(python3.6)实现一个简单计算器
2017/12/21 Python
python脚本监控Tomcat服务器的方法
2018/07/06 Python
python binascii 进制转换实例
2019/06/12 Python
Django错误:TypeError at / 'bool' object is not callable解决
2019/08/16 Python
Python创建空列表的字典2种方法详解
2020/02/13 Python
python爬虫开发之urllib模块详细使用方法与实例全解
2020/03/09 Python
matplotlib 生成的图像中无法显示中文字符的解决方法
2020/06/10 Python
浅谈sklearn中predict与predict_proba区别
2020/06/28 Python
Python爬虫入门教程01之爬取豆瓣Top电影
2021/01/24 Python
哪些情况下不应该使用索引
2015/07/20 面试题
二手房买卖协议书
2014/04/10 职场文书
党的群众路线教育实践活动对照检查材料范文
2014/09/24 职场文书
2014年网络管理员工作总结
2014/12/01 职场文书
小学元宵节活动总结
2015/02/06 职场文书
教师学习中国梦心得体会
2016/01/05 职场文书
个人的事迹材料怎么写
2019/04/24 职场文书
MySQL数据库安装方法与图形化管理工具介绍
2022/05/30 MySQL