大橙子网站建设,新征程启航
为企业提供网站建设、域名注册、服务器等服务
怎么在微信小程序中利用movable-view实现滑动删除效果?针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。
创新互联建站是一家集网站建设,内乡企业网站建设,内乡品牌网站建设,网站定制,内乡网站建设报价,网络营销,网络优化,内乡网站推广为一体的创新建站企业,帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿,时刻以成就客户成长自我,坚持不断学习、思考、沉淀、净化自己,让我们为更多的企业打造出实用型网站。
1、wxml布局
{{'滑动删除' + item.id}} 删除
2、wxss(这里我用的less布局,布局很重要)
page { background-color: #efefef; } .list { padding: 30rpx 30rpx 0; .row { width: 100%; overflow: hidden; margin-bottom: 30rpx; .list_item { border-radius: 12rpx; position: relative; left: -120rpx; width: calc(100% + 120rpx); height: 160rpx; .itmem_wrap { width: calc(100% - 120rpx); height: 100%; display: flex; align-items: center; justify-content: center; position: relative; left: 120rpx; z-index: 2; background-color: #fff; } .delete_wrap { position: absolute; right: 0; top: 0; width: 50%; height: 100%; background-color: rgb(219, 54, 54); display: flex; justify-content: flex-end; z-index: 1; .delete_btn { width: 120rpx; height: 100%; display: flex; justify-content: center; align-items: center; color: #fff; } } } } }
3、JavaScript
const app = getApp() Page({ data: { list: [{ id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }, { id: 5 }, { id: 6 }, { id: 7 }, { id: 8 }, { id: 9 }, { id: 10 } ], startX: '', startY: '' }, onLoad: function () { this.setListX(); }, // 给每一项设置x值 setListX() { this.data.list.map(item => { item.x = 0; }) this.setData({ list: this.data.list }) }, // 开始滑动 touchMoveStartHandle(e) { // 我们要记录滑动开始的坐标点,后面计算要用到 if (e.touches.length == 1) { this.setData({ startX: e.touches[0].clientX, startY: e.touches[0].clientY }); } }, // 滑动事件处理,一次只能滑出一个删除按钮 为了防止滑动出现抖动,我们用滑动结束事件 touchMoveEndHandle: function (e) { var currentIndex = e.currentTarget.dataset.index, //当前索引 startX = this.data.startX, //开始X坐标 startY = this.data.startY, //开始Y坐标 touchMoveEndX = e.changedTouches[0].clientX, //滑动变化X坐标 touchMoveEndY = e.changedTouches[0].clientY, //滑动变化Y坐标 //获取滑动角度 angle = this.angle({ X: startX, Y: startY }, { X: touchMoveEndX, Y: touchMoveEndY }); //滑动超过50度角 return,防止上下滑动触发 if (Math.abs(angle) > 50) return; this.data.list.map((item, index) => { if (touchMoveEndX > startX) { // 右滑 if (index == currentIndex) item.x = 0; } else { // 左滑 item.x = -120 if (index != currentIndex) item.x = 0; } }) this.setData({ list: this.data.list }) }, /** * 计算滑动角度 * start 起点坐标 * end 终点坐标 * Math.PI 表示一个圆的周长与直径的比例,约为 3.14159;PI就是圆周率π,PI是弧度制的π,也就是180° */ angle: function (start, end) { var _X = end.X - start.X, _Y = end.Y - start.Y return 360 * Math.atan(_Y / _X) / (2 * Math.PI); } })
关于怎么在微信小程序中利用movable-view实现滑动删除效果问题的解答就分享到这里了,希望以上内容可以对大家有一定的帮助,如果你还有很多疑惑没有解开,可以关注创新互联行业资讯频道了解更多相关知识。