微信小程序基于movable-view实现滑动删除效果
程序员文章站
2022-07-06 18:52:18
基于movable-view实现的一种较为完美的滑动删除效果
前言:用了很多去实现滑动删除的效果,都不太尽如人意,最后用小程序官方专用滑动组件来实现,但是这个组件有一点坑,咱们慢慢道...
基于movable-view实现的一种较为完美的滑动删除效果
前言:用了很多去实现滑动删除的效果,都不太尽如人意,最后用小程序官方专用滑动组件来实现,但是这个组件有一点坑,咱们慢慢道来
1、wxml布局
<view class="list"> <view class="row" wx:for="{{list}}" wx:key="id"> <movable-area class="list_item"> <!-- 坑就在这里,当你向右滑动一点点距离的时候它就停住了,不回去。坑 --> <movable-view class="itmem_wrap" direction="horizontal" inertia="{{true}}" out-of-bounds="{{true}}" x="{{item.x}}" damping="{{60}}" data-index="{{index}}" bind:touchstart="touchmovestarthandle" bind:touchend="touchmoveendhandle"> {{'滑动删除' + item.id}} </movable-view> <view class="delete_wrap"> <view class="delete_btn">删除</view> </view> </movable-area> </view> </view>
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); } })
4、最终效果预览
总结
以上所述是小编给大家介绍的微信小程序基于movable-view实现滑动删除效果,希望对大家有所帮助
上一篇: 难得一见的动物习性照片
下一篇: 西班牙斗牛图片,胆小勿入,看着都疼。