微信小程序、uniapp使用touchstart和touchmove左右滑动删除。以及解决上下抖动问题。
展示效果图直接上代码
<viewv-for="(item, index) in arr":key="item.id"@touchstart="touchstart($event)"@touchmove="touchmove(index, $event)":class="['touch-item', item.isTouchMove ? 'touch-move-active' : '']"
><view class="content"><view class="date_flex"><view><text class="date">{{ item.data }}</text><text class="quantity">{{ item.text }}</text></view><view><u-switch space="2" v-model="value" activeColor="#FFDA00" size="40" inactiveColor="rgb(230, 230, 230)"></u-switch></view></view><view class="bottom_date">1, 2, 3, 4</view></view><view class="del" @tap="del(index)"><view class="detail"><view class="detail_img"><img :src="require('@/static/images/detail.png')" alt=""></view><view class="detail_text">删除</view></view>
</view>
</view>
如果要修改里面内容直接从content这个类修改就行。
export default {data() {return {arr: [{ id: '1', data: '12:00', text: '1份', isTouchMove: false },{ id: '2', data: '12:00', text: '1份', isTouchMove: false },],startX: 0, //开始坐标startY: 0,};},methods: {touchstart(e) {console.log('start', e);//开始触摸时 重置所有删除this.arr.forEach((v, i) => {if (v.isTouchMove)//只操作为true的v.isTouchMove = false;});this.startX = e.changedTouches[0].clientX;this.startY = e.changedTouches[0].clientY;},//滑动事件处理touchmove: function (indexNum, target) {let that = this,index = indexNum, //当前索引startX = that.startX, //开始X坐标startY = that.startY, //开始Y坐标touchMoveX = target.changedTouches[0].clientX, //滑动变化坐标touchMoveY = target.changedTouches[0].clientY, //滑动变化坐标//获取滑动角度angle = that.angle({ X: startX, Y: startY }, { X: touchMoveX, Y: touchMoveY });that.arr.forEach(function (v, i) {v.isTouchMove = false;//滑动超过30度角 returnif (Math.abs(angle) > 15) return;if (i == index) {if (touchMoveX > startX)//右滑v.isTouchMove = false;//左滑else v.isTouchMove = true;}});},/*** 计算滑动角度* @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);},//删除事件del: function (index) {this.arr.splice(index, 1);},},
};
.touch-item {font-size: 28rpx;display: flex;justify-content: space-between;width: 100%; // 少一个会看到按钮overflow: hidden;margin-top: 40rpx;
}
.content {width: 100%;padding: 20rpx;line-height: 44rpx;margin-right: 0;-webkit-transition: all 0.4s;transition: all 0.4s;-webkit-transform: translateX(90px);transform: translateX(90px);margin-left: -154rpx;.date_flex {display: flex;justify-content: space-between;.date {font-size: 40rpx;font-family: PingFangSC-Medium, PingFang SC;font-weight: 500;color: #333333;margin-right: 49rpx;}.quantity {font-size: 24rpx;font-family: PingFangSC-Medium, PingFang SC;font-weight: 500;color: #ff9200;}}.bottom_date {margin-top: 10rpx;}
}
.del {background-color: orangered;width: 180rpx;display: flex;flex-direction: column;align-items: center;justify-content: center;color: #fff;-webkit-transform: translateX(90px);transform: translateX(90px);-webkit-transition: all 0.4s;transition: all 0.4s;.detail {.detail_img {text-align: center;img {width: 30rpx;height: 30rpx;}}.detail_text {font-size: 28rpx;font-family: PingFangSC-Regular, PingFang SC;font-weight: 400;color: #FFFFFF;}}
}
.touch-move-active .content,
.touch-move-active .del {-webkit-transform: translateX(0);transform: translateX(0);
}
直接复制粘贴就行。拿上直接用。
如果遇到滑动会导致上下抖动用这个解决。给最外层得一个view标签加一个样式。
.rev {position: fixed;top: 0;left: 0;right: 0;bottom: 0;margin: 0;overflow: hidden;
}
这样的话滑动会有阴影,但不会抖动,可以尝试一下看看,如果哪位能人能解决,就麻烦分享一下了 。在此谢过。
微信小程序、uniapp使用touchstart和touchmove左右滑动删除。以及解决上下抖动问题。相关推荐
- 微信小程序uni-app
文章目录 一.微信小程序uni-app 二.下载微信开发者工具 三.小程序开发 一.微信小程序uni-app 小程序是一种不需要下载.安装即可使用的应用,它实现了应用触手可及的梦想,用户扫一扫或者搜一 ...
- uniapp开发微信小程序-4.页面跳转与横向滑动
uniapp开发微信小程序-4.页面跳转与横向滑动 本篇文章主要是想记录一下横向滑动功能,备忘的同时给大家做个分享. 但既然是初级分享系列文章,为了方便新手朋友的上手工作,还是在此之前说一下页面跳转的 ...
- 微信小程序uni-app前端应用框架和HBuilderX工具使用及Git管理项目
微信小程序uni-app前端应用框架和HBuilderX工具使用及Git管理项目 官方地址:https://uniapp.dcloud.io/ 1.起步 1.1.简介 uni-app 是一个使用 Vu ...
- 微信小程序/uni-app 蓝牙打印开发教程和常见问题总结【文末附源码】
微信小程序/uni-app 蓝牙打印开发教程和常见问题总结[文末附源码] 文章目录 微信小程序/uni-app 蓝牙打印开发教程和常见问题总结[文末附源码] 1️⃣ 写在前面 2️⃣ 蓝牙连接流程 3 ...
- 开发微信小程序(uniapp)
@2021SC@SDUSC WebStorm开发微信小程序(uniapp) 创建项目 采用cli方式创建的项目 vue create -p dcloudio/uni-preset-vue my-pro ...
- 关于微信小程序开发中遇到的缺少game.json问题的解决
关于微信小程序开发中遇到的缺少game.json问题的解决 参考文章: (1)关于微信小程序开发中遇到的缺少game.json问题的解决 (2)https://www.cnblogs.com/ygxd ...
- php小程序session取不到,微信小程序实现Session功能及无法获取session问题的解决方法...
因为小程序原生不支持Cookie,因此也不支持Session. 网上找到的的一些方法有缺陷,而且很多累赘,估计没有实际测试过,在此直接给出实测可用的代码. 大概思路就是借助小程序本地储存+网络请求的h ...
- 如何去掉微信小程序导航栏,以及禁止页面滑动
如何去掉微信小程序导航栏,以及禁止页面滑动 1.微信小程序要去掉微信自带的导航栏,只需要在app.json中加上 "navigationStyle": "custom&q ...
- 关于微信小程序uniapp版的推送消息
1.按钮触发推送消息 <button type="primary" size="mini" @tap="pushMesage"> ...
最新文章
- Swift - 使用addSubview()方法将StoryBoard中的视图加载进来
- .net中调用esb_都是应用集成,ESB和集成引擎对医疗业务场景的“口味”为何不同?...
- 微软任务管理软件 Planner,Office 365 用户免费用
- 知道一点怎么设直线方程_【初中数学】反比例函数策略(二) ——构造方程法...
- c mysql 工具类_Jave工具——servlet+jsp编程中mysql数据库连接及操作通用工具类
- oracle数据库解锁表
- C++ 虚析构函数作用
- Unity3D之NGUI基础7:UI动态加载
- Python_正则(设置pattern变量实例)
- 阶段1 语言基础+高级_1-3-Java语言高级_08-JDK8新特性_第3节 两种获取Stream流的方式_6_Stream流中的常用方法_count...
- Matlab经纬度坐标转换xy坐标,经纬度坐标系转换为UTM坐标系(matlab)
- 排队系统拥塞控制的位置
- 让你彻悟人生的555句金玉良言
- 迷宫_随机实验_边做边学深度强化学习:PyTorch程序设计实践(1)
- 华为设备配置静态路由与NQA联动
- 湖北大学知行学院考研计算机,湖北大学知行学院考研怎么样
- 目标检测计算指标APmAP
- 解决IDEA创建Maven工程没有src目录还很慢的问题
- 东北大学大学物理实验报告——2.2刚体转动惯量的测定
- 幸运盒子幸运砸金蛋微信盲盒游戏源码