小程序 — 实现左滑删除效果②

前言:这章我们为movable-view添加点击事件,完善左滑效果。 GitHub:https://github.com/Ewall1106/miniProgramDemo

1、 拖动事件

(1)在上一章中,我们给movable-view绑定了一个bindchange事件,事件名为onChange,这个事件是干吗的呢?

拖动过程中触发的事件,event.detail = {x: x, y: y, source: source},其中source表示产生移动的原因,值可为touch(拖动)、touch-out-of-bounds(超出移动范围)、out-of-bounds(超出移动范围后的回弹)、friction(惯性)和空字符串(setData)

事件绑定

(2)所以我们就可以利用这个事件做点事情了

  • 首先我们先定义三个初始化变量xcurrentX
data = {
  // x轴方向的偏移
  x: 0,
  // 当前x的值
  currentX: 0
};
  • 然后监听下拖动事件并赋值给currentX
handleMovableChange(e) {
    this.currentX = e.detail.x;
    this.$apply();
}

2、手指触摸事件

将当前的currentX赋值给x以定义偏移量。

methods = {
  handleMovableChange(e) {
    this.currentX = e.detail.x;
    this.$apply();
  },
  handleTouchend(e) {
    if (this.currentX < -46) {
      this.x = -92;
      this.setData({
        x: this.x
      });
    } else {
      this.x = 0;
      this.setData({
        x: this.x
      });
    }
  }
};

上面有几行代码很少但却是整个实现左滑删除效果的核心代码,请仔细看,这里涉及到一个数据渲染的问题,后面我会讲。

this.x = -92;
this.setData({
  x: this.x
});

3、完整代码

全部js代码:

<script>
import wepy from 'wepy';

export default class Chapter5 extends wepy.page {
  data = {
    // x轴方向的偏移
    x: 0,
    // 当前x的值
    currentX: 0
  };

methods = {
  handleMovableChange(e) {
    this.currentX = e.detail.x;
    this.$apply();
  },
  handleTouchend(e) {
    if (this.currentX < -46) {
      this.x = -92;
      this.setData({
        x: this.x
      });
    } else {
      this.x = 0;
      this.setData({
        x: this.x
      });
    }
  }
};
}
</script>

至此,我们的用小程序实现左滑删除的效果基本上就全部实现了,如果你是用小程序原生开发的话,其实原理都是一样的,所以实现的方式也差不多。下一章是进阶。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏IT开发技术与工作效率

IntelliJ IDEA 教程 技巧篇本篇概要

12920
来自专栏守望轩

Visual Studio 2008 每日提示(十四)

#131、你为什么会把窗体设置成为浮动(模式) 原文链接:Why you would want to make a Tool Window Floating ...

35670
来自专栏Alan's Lab

Angular2 返回时组件生命周期函数不被调用的解决方法

这两天使用 Angular2 遇到的一个 @angular/router 的 bug:

16540
来自专栏carven

好用的分屏tab react-native-scrollable-tab-view

如果一个人每天都有惊喜的话,我今天的最大惊喜就是找到了一个react-native-scrollable-tab-view。 我们在写一个应用的时候,总是会有需...

14700
来自专栏程序员同行者

mongodb4.0.2 复制集主从部署

复制集(Replica Sets),是一个基于主/从复制机制的复制功能,进行同一数据的异步同步,从而使多台机器拥有同一数据的都多个副本,由于有自动故障转移和恢复...

48150
来自专栏小白课代表

更新|PC截图工具的最佳选择。

说到截图,最常用的可能就是QQ自带的截图功能了,简单流畅能满足我们的日常需求,依附于QQ,没有特殊的需求甚至不需要其他的截图软件。

14200
来自专栏Ray学习笔记

Jump Start Bootstrap 第4章

JavaScript是网页上事实上的脚本语言。流行的网页功能,例如:漂亮的图片幻灯片、下拉菜单、弹出框等,都可以结合JavaScript和CSS实现。在这章,我...

13940
来自专栏极客慕白的成长之路

图标字体应用实践

使用的时候,通过background-position调整显示的位置,如下图所示:

19020
来自专栏无所事事者爱嘲笑

Vue中scoped css和css module比较

48220
来自专栏Python爬虫与算法进阶

为什么Selenium点不到元素

最近做了许多登陆项目,我会优先选择使用requests来模拟请求,但是有些参数实在是很难获取,这个时候我会使用Selenium,也还是遇到了各种坑,也算是见识到...

16100

扫码关注云+社区

领取腾讯云代金券