小程序 — 实现左滑删除效果(列表)③

前言:实现完整的列表左滑删除功能。 GitHub:https://github.com/Ewall1106/miniProgramDemo

1、列表渲染

首先我们初始化一个list列表并为其添加数据,这个列表有两个值分别为标题文字title和初始的偏移量x

list: [
  {
    x: 0,
    title: '这里是内容区域0'
  },
  {
    x: 0,
    title: '这里是内容区域1'
  },
  {
    x: 0,
    title: '这里是内容区域2'
  },
  {
    x: 0,
    title: '这里是内容区域3'
  }
],
// 记录当前偏移量
currentX: 0

然后我们在页面上循环渲染这个列表,这里就不多说了。

2、事件处理

(1)首先我们要给touchend事件传递一个参数,参数值为当前用户触摸列表的索引值,让我们可以知道,到底用户是触摸了哪个列表项。 (2)然后我们要在触摸事件结束的时候判断偏移量的位置

handleTouchend(idx, e) {
  if (this.currentX < -46) {
    this.list[idx].x = -92;
    this.setData({
      list: this.list
    });
  } else {
    this.list[idx].x = 0;
    this.setData({
      list: this.list
    });
  }
}
  • 上面几行代码很重要,解决了这么一个问题: 列表渲染的问题,由于js的限制,不能检测到数组中值的变化,所以我们先改变了list数组项中的值,然后在用this.setData()重新赋值一遍,关于这个问题,可以看看vue中关于列表渲染的注意事项,原理是一样的:https://cn.vuejs.org/v2/guide/list.html#%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9

(3)最后就是删除功能的实现

同理我们也需要获取用户点击删除按钮的索引值,然后进行删除,很简单不多说,看代码:

handleDelete(idx) {
  this.list.splice(idx, 1);
  this.setData({
    list: this.list
  });
}

3、小结

这就是我们实现左滑删除效果的全部内容了,利用了小程序的movable组件实现了大部分的功能,关于js主要是在处理列表渲染的时候,这里是个坑,其他就没什么难点了,看看最后的效果图吧:

最终效果

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏技术博客

Knockout.Js官网学习(enable绑定、disable绑定)

enable绑定使DOM元素只有在参数值为 true的时候才enabled。在form表单元素input,select,和textarea上非常有用。

12620
来自专栏快乐八哥

使用jQuery Draggable和Droppable实现拖拽功能

上篇博客中已经介绍了web开发中基本拖放原理,现在给出需要完成的功能。最后运行的效果如下图所示: ? 主要功能需求说明: 1.左侧的元素结构最后会通过Ajax ...

38060
来自专栏vue学习

小程序 — 选项卡

(2)将用户点击传过来的index值赋给data中改变当前的索引值activeIndex

32720
来自专栏游戏杂谈

鼠标按键的获取

看到现在很多应用,包括做的很优秀的产品,很多居然是支持右键进行拖拽的,在页面有滚动条时,也不会随着鼠标移动的方向向上、向下去滚动滚动条。

12530
来自专栏技术博客

ExtJs二(实现登录)

  在上一次http://www.cnblogs.com/aehyok/archive/2013/04/17/3025957.html主要是搭建Ext环境,本次...

23910
来自专栏更流畅、简洁的软件开发方式

.net firamework 框架里面的控件的继承关系。

     记得当初学习VB6.0的时候,入门的书,一上来就是控件的介绍,控件的属性、事件的使用,拖拽一个文本框、一个按钮,然后再双击按钮,在按钮的事件里面给文本...

23470
来自专栏个人随笔

表单

一.表单    表单就是一个将用户信息组织起来的容器:       <将需要用户填写的内容放置在表单容器中,当用户单击"提交"按钮的时候,表单会将数据统一发送给...

30190
来自专栏进击的君君的前端之路

Vue成神之路之全局API

vue.js——开发版本:包含完整的警告和调试模式 vue.min.js——生产版本:删除了警告,进行了压缩

14830
来自专栏一个会写诗的程序员的博客

JS如何模拟鼠标点击X,Y坐标

https://developer.mozilla.org/zh-CN/docs/Web/API/Document/createEvent

2.2K50
来自专栏mySoul

微信小程序自定义组件

其中,components为组件目录,nodemodules为模块目录,pages为小程序的页面目录,utils为一些基础功能的封装。好比安装的第三方百度统计功...

43230

扫码关注云+社区

领取腾讯云代金券