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

 更新时间:2020年01月08日 15:42:13   作者:黑土地里的小萝卜  
这篇文章主要介绍了微信小程序基于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实现滑动删除效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

相关文章

  • 全面理解JavaScript中的继承(必看)

    全面理解JavaScript中的继承(必看)

    下面小编就为大家带来一篇全面理解JavaScript中的继承(必看)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-06-06
  • js代码延迟一定时间后执行一个函数的实例

    js代码延迟一定时间后执行一个函数的实例

    下面小编就为大家带来一篇js代码延迟一定时间后执行一个函数的实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-02-02
  • 最简单的tab切换实例代码

    最简单的tab切换实例代码

    下面小编就为大家带来一篇最简单的tab切换实例代码。小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-05-05
  • 利用JS如何获取form表单数据

    利用JS如何获取form表单数据

    这篇文章主要给大家介绍了关于利用JS如何获取form表单数据的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用JS具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-12-12
  • js中字符型和数值型数字的互相转化方法(必看)

    js中字符型和数值型数字的互相转化方法(必看)

    下面小编就为大家带来一篇js中字符型和数值型数字的互相转化方法(必看)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-04-04
  • js漂浮广告实现代码

    js漂浮广告实现代码

    js漂浮广告实现代码,本质上就是一个来回滚动的小图片,也是一种广告形式,需要的朋友可以收藏下
    2015-08-08
  • javascript实现查找数组中最大值方法汇总

    javascript实现查找数组中最大值方法汇总

    本文给大家汇总了一下使用javascript实现查找数组中最大最小值的一些方法,非常的简单实用,有需要的小伙伴可以来参考下。
    2016-02-02
  • 移动web开发之touch事件实例详解

    移动web开发之touch事件实例详解

    下面小编就为大家分享一篇移动web开发之touch事件实例详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-01-01
  • javascript下4个跨浏览器必备的函数

    javascript下4个跨浏览器必备的函数

    如果你的项目要用到 JavaScript,而你不使用任何 JavaScript 框架,那么对于那些常用且各个浏览器明显不同的地方就需要用函数来封装起来。
    2010-03-03
  • js中的触发事件对象event.srcElement与event.target详解

    js中的触发事件对象event.srcElement与event.target详解

    这篇文章主要给大家介绍了js中的触发事件对象event.srcElement与event.target的相关资料,文中介绍的非常详细,对大家具有一定的参考价值,需要的朋友们下面来一起看看吧。
    2017-03-03

最新评论