小程序添加网址外链_微信小程序基于movable

微信小程序基于movable-view实现滑动删除效果       这篇文章主要介绍了微信小程序基于movable-view实现滑动删除效果,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下

基于movable-view实现的一种较为完美的滑动删除效果

前言:用了很多去实现滑动删除的效果,都不太尽如人意,最后用小程序官方专用滑动组件来实现,但是这个组件有一点坑,咱们慢慢道来

1、wxml布局

 view 
 view wx:for="{{list}}" wx:key="id" 
 movable-area 
 !-- 坑就在这里,当你向右滑动一点点距离的时候它就停住了,不回去。坑 -- 
 movable-view 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 
 view 删除 /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实现滑动删除效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对凡科网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!


相关阅读