微信小程序基于movable-view实现滑动删除效果


Posted in Javascript onJanuary 08, 2020

基于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实现滑动删除效果

总结

以上所述是小编给大家介绍的微信小程序基于movable-view实现滑动删除效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
动态为事件添加js代码示例
Feb 15 Javascript
javascript showModalDialog 多层模态窗口实现页面提交及刷新的代码
Nov 28 Javascript
浅析hasOwnProperty方法的应用
Nov 20 Javascript
jQuery中delegate和on的用法与区别详细解析
Jan 26 Javascript
JavaScript函数详解
Feb 27 Javascript
基于Turn.js 实现翻书效果实例解析
Jun 20 Javascript
关于Javascript中defer和async的区别总结
Sep 20 Javascript
Angular中ng-options下拉数据默认值的设定方法
Jun 21 Javascript
详解http访问解析流程原理
Oct 18 Javascript
微信小程序有旋转动画效果的音乐组件实例代码
Aug 22 Javascript
vue实现codemirror代码编辑器中的SQL代码格式化功能
Aug 27 Javascript
基于Vue.js+Nuxt开发自定义弹出层组件
Oct 09 Javascript
小程序自定义模板实现吸顶功能
Jan 08 #Javascript
微信小程序静默登录的实现代码
Jan 08 #Javascript
微信小程序wxs实现吸顶效果
Jan 08 #Javascript
微信小程序实现吸顶特效
Jan 08 #Javascript
nuxt配置通过指定IP和端口访问的实现
Jan 08 #Javascript
JS如何实现网站中PC端和手机端自动识别并跳转对应的代码
Jan 08 #Javascript
js判断浏览器的环境(pc端,移动端,还是微信浏览器)
Dec 24 #Javascript
You might like
关于Intype一些小问题的解决办法
2008/03/28 PHP
php抽象类用法实例分析
2015/07/07 PHP
详解Yii2 之 生成 URL 的方法
2017/06/16 PHP
[原创]静态页面也可以实现预览 列表不同的显示方式
2006/10/14 Javascript
跨浏览器的 mouseenter mouseleave 以及 compareDocumentPosition的使用说明
2010/05/04 Javascript
JavaScript 面向对象编程(1) 基础
2010/05/18 Javascript
jquery中focus()函数实现当对象获得焦点后自动把光标移到内容最后
2013/09/29 Javascript
ztree获取选中节点时不能进入可视区域出现BUG如何解决
2015/12/03 Javascript
理解javascript异步编程
2016/01/27 Javascript
使用jQuery Mobile框架开发移动端Web App的入门教程
2016/05/17 Javascript
轻松实现js弹框显示选项
2016/09/13 Javascript
第一次记录Bootstrap table学习笔记(1)
2017/05/18 Javascript
微信小程序组件 marquee实例详解
2017/06/23 Javascript
Vue 3.0 前瞻Vue Function API新特性体验
2019/08/12 Javascript
js实现上传图片并显示图片名称
2019/12/18 Javascript
vue Cli 环境删除与重装教程 - 版本文档
2020/09/11 Javascript
[04:03]辉夜杯主赛事 12月25日RECAP精彩回顾
2015/12/26 DOTA
[01:09:10]NB vs Liquid Supermajor小组赛 A组胜者组决赛 BO3 第一场 6.2
2018/06/04 DOTA
python查询sqlite数据表的方法
2015/05/08 Python
详解python调度框架APScheduler使用
2017/03/28 Python
python时间序列按频率生成日期的方法
2019/05/14 Python
python输入多行字符串的方法总结
2019/07/02 Python
Python3实现汉语转换为汉语拼音
2019/07/08 Python
Python中的类与类型示例详解
2019/07/10 Python
pandas中DataFrame修改index、columns名的方法示例
2019/08/02 Python
在 Python 中接管键盘中断信号的实现方法
2020/02/04 Python
Python实现井字棋小游戏
2020/03/09 Python
如何利用Python matplotlib绘制雷达图
2020/12/21 Python
一张图片能隐含千言万语之隐藏你的程序代码
2012/12/13 HTML / CSS
AmazeUI框架搭建的方法步骤(图文)
2020/08/17 HTML / CSS
525心理活动总结
2014/07/04 职场文书
幼儿园六一亲子活动方案
2014/08/26 职场文书
行政文员岗位职责
2015/02/04 职场文书
建筑工程材料员岗位职责
2015/04/11 职场文书
离婚撤诉申请书范本
2015/05/18 职场文书
Python Django / Flask如何使用Elasticsearch
2022/04/19 Python