微信小程序基于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 19 Javascript
jquery datatable后台封装数据示例代码
Aug 07 Javascript
浅谈javascript获取元素transform参数
Jul 24 Javascript
漫谈JS引擎的运行机制 你应该知道什么
Jun 15 Javascript
Node.js创建Web、TCP服务器
Dec 05 Javascript
angular 内存溢出的问题解决
Jul 12 Javascript
Vue-router 中hash模式和history模式的区别
Jul 24 Javascript
Puppeteer 爬取动态生成的网页实战
Nov 14 Javascript
JavaScript作用域链实例详解
Jan 21 Javascript
原生JS 实现的input输入时表格过滤操作示例
Aug 03 Javascript
微信小程序实现限制用户转发功能的实例代码
Feb 22 Javascript
js实现抽奖的两种方法
Mar 19 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
php循环检测目录是否存在并创建(循环创建目录)
2011/01/06 PHP
说说PHP的autoLoad自动加载机制
2012/09/27 PHP
配置php网页显示各种语法错误
2013/09/23 PHP
PHP实现的汉字拼音转换和公历农历转换类及使用示例
2014/07/01 PHP
php7基于递归实现删除空文件夹的方法示例
2017/06/15 PHP
javascript options属性集合操作代码
2009/12/28 Javascript
仿谷歌主页js动画效果实现代码
2013/07/14 Javascript
jquery实现鼠标拖动图片效果示例代码
2014/01/09 Javascript
Jquery 实现table样式的设定
2015/01/28 Javascript
深入理解JavaScript系列(44):设计模式之桥接模式详解
2015/03/04 Javascript
JavaScript如何实现对数字保留两位小数一位自动补零
2015/12/18 Javascript
json格式数据的添加,删除及排序方法
2016/01/21 Javascript
JS组件Form表单验证神器BootstrapValidator
2016/01/26 Javascript
纯JavaScript代码实现文本比较工具
2016/02/17 Javascript
jquery组件WebUploader文件上传用法详解
2020/10/23 Javascript
JavaScript字符串对象
2017/01/14 Javascript
bootstrap表单按回车会自动刷新页面的解决办法
2017/03/08 Javascript
AugularJS从入门到实践(必看篇)
2017/07/10 Javascript
bootstrap-table实现服务器分页的示例 (spring 后台)
2017/09/01 Javascript
微信小程序 按钮滑动的实现方法
2017/09/27 Javascript
解决vue项目中出现Invalid Host header的问题
2020/11/17 Javascript
python中的实例方法、静态方法、类方法、类变量和实例变量浅析
2014/04/26 Python
Django视图之ORM数据库查询操作API的实例
2017/10/27 Python
django+xadmin+djcelery实现后台管理定时任务
2018/08/14 Python
使用python list 查找所有匹配元素的位置实例
2019/06/11 Python
使用Pyinstaller转换.py文件为.exe可执行程序过程详解
2019/08/06 Python
opencv调整图像亮度对比度的示例代码
2019/09/27 Python
Python字典生成式、集合生成式、生成器用法实例分析
2020/01/07 Python
Django操作session 的方法
2020/03/09 Python
Bench加拿大官方网站:英国城市服装品牌
2017/11/03 全球购物
NICKIS.com荷兰:设计师儿童时装
2020/01/08 全球购物
经济信息系毕业生自荐信
2014/06/02 职场文书
2015年学校团委工作总结
2015/05/26 职场文书
SQL CASE 表达式的具体使用
2022/03/21 SQL Server
Golang 并发编程 SingleFlight模式
2022/04/26 Golang
Win11怎么添加用户?Win11添加用户账户的方法
2022/07/15 数码科技