微信小程序之列表左滑删除功能

2020-06-24 17:08:29 浏览数 (10)

介绍

  • 第一次写小程序，记录一下遇到的需求以及解决方法。可能功能不是很难，主要是做下记录。为以后遇到相同的需求做铺垫。

什么是左滑删除

  • 用过QQ的人都知道，消息列表内，左滑单个聊天可以删除、置顶的操作。对于移动端窄小的屏幕来说，这种交互可以说是非常的节省地方。故受到了众多产品狗的喜爱。
imageimage

实现原理

  • 最外层一个view水平方向排列，里面包含一个内容区view,一个操作区view
  • 让你要展示的布局充满屏幕，通过css样式让超出的删除按钮隐藏
  • 监听touch事件，平移布局显示和隐藏删除按钮(列表每一项中有一个isTouchMove属性，通过监听touch改变该属性给列表不同的样式将隐藏的按钮显示出来)

直接上代码

  • wxml<view class="list-page"> <view class="list-item {{user.isTouchMove?'list-item-touch-active':''}}" wx:for="{{list}}" wx:for-item="user" wx:for-index="index" wx:key="user.id" bindtouchstart="touchstart" bindtouchmove="touchmove" data-id="{{user.id}}">
代码语言：txt复制
<view class="item-content">
代码语言：txt复制
  <view class="content-name">{{user.name}}</view>
代码语言：txt复制
  <view class="content-info">
代码语言：txt复制
    <text>{{user.phone}}</text>
代码语言：txt复制
    <text>{{user.sex}}</text>
代码语言：txt复制
  </view>
代码语言：txt复制
</view>
代码语言：txt复制
<view class="item-delete">删除</view>

</view>

</view>

  • wxss.list-page{ display: flex; flex-direction: column; border-top: 2rpx solid #f0f0f0 } .list-item{ height: 160rpx; width: 100%; display: flex; justify-content: space-between; align-items: center; border-bottom: 2rpx solid #f0f0f0; } .item-content{ width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; padding: 0 20rpx 0 20rpx; -webkit-transition: all 0.4s; transition: all 0.4s; -webkit-transform: translateX(180rpx); transform: translateX(180rpx); margin-left: -200rpx; } .content-info{ display: flex; width: 100%; justify-content: space-between; font-size: 32rpx; color: #999 } .content-name{ width: 100%; } .list-item-touch-active .item-content{ margin-left: -100rpx; } .list-item-touch-active .item-content, .list-item-touch-active .item-delete { -webkit-transform: translateX(0) !important; transform: translateX(0) !important; } .item-delete{ width: 100rpx; height: 160rpx; display: flex; justify-content: center; align-items: center; background: red; color: #fff; font-size: 32rpx; -webkit-transform: translateX(180rpx); transform: translateX(180rpx); -webkit-transition: all 0.4s; transition: all 0.4s; }
  • js// pages/list/list.js const App = getApp() Page({

/**

* 页面的初始数据

*/

data: {

代码语言：txt复制
list:[
代码语言：txt复制
  {
代码语言：txt复制
    id:1,
代码语言：txt复制
    name:'张三',
代码语言：txt复制
    phone:'15955040222',
代码语言：txt复制
    sex:'男',
代码语言：txt复制
    isTouchMove:false,
代码语言：txt复制
  },
代码语言：txt复制
  {
代码语言：txt复制
    id: 2,
代码语言：txt复制
    name: '张三',
代码语言：txt复制
    phone: '15955040222',
代码语言：txt复制
    sex: '男',
代码语言：txt复制
    isTouchMove: false,
代码语言：txt复制
  },
代码语言：txt复制
  {
代码语言：txt复制
    id: 3,
代码语言：txt复制
    name: '张三',
代码语言：txt复制
    phone: '15955040222',
代码语言：txt复制
    sex: '男',
代码语言：txt复制
    isTouchMove: false,
代码语言：txt复制
  },
代码语言：txt复制
  {
代码语言：txt复制
    id: 4,
代码语言：txt复制
    name: '张三',
代码语言：txt复制
    phone: '15955040222',
代码语言：txt复制
    sex: '男',
代码语言：txt复制
    isTouchMove: false,
代码语言：txt复制
  },
代码语言：txt复制
  {
代码语言：txt复制
    id: 5,
代码语言：txt复制
    name: '张三',
代码语言：txt复制
    phone: '15955040222',
代码语言：txt复制
    sex: '男',
代码语言：txt复制
    isTouchMove: false,
代码语言：txt复制
  },
代码语言：txt复制
  {
代码语言：txt复制
    id: 6,
代码语言：txt复制
    name: '张三',
代码语言：txt复制
    phone: '15955040222',
代码语言：txt复制
    sex: '男',
代码语言：txt复制
    isTouchMove: false,
代码语言：txt复制
  },
代码语言：txt复制
  {
代码语言：txt复制
    id: 7,
代码语言：txt复制
    name: '张三',
代码语言：txt复制
    phone: '15955040222',
代码语言：txt复制
    sex: '男',
代码语言：txt复制
    isTouchMove: false,
代码语言：txt复制
  },
代码语言：txt复制
]

},

touchstart: function (e) {

代码语言：txt复制
//开始触摸时 重置所有删除
代码语言：txt复制
let data = App.touch._touchstart(e, this.data.list) //将修改过的list setData
代码语言：txt复制
this.setData({
代码语言：txt复制
  list: data
代码语言：txt复制
})

},

//滑动事件处理

touchmove: function (e) {

代码语言：txt复制
let data = App.touch._touchmove(e, this.data.list,'id')//将修改过的list setData
代码语言：txt复制
this.setData({
代码语言：txt复制
  list: data
代码语言：txt复制
})

},

})

  • 对于滑动事件的处理专门封装了一个.js文件，防止以后还会用到。var startX var startY class touch {

constructor() {

}

_touchstart(e, items) {

代码语言：txt复制
//开始触摸时 重置所有删除
代码语言：txt复制
items.forEach(function (v, i) {
代码语言：txt复制
  if (v.isTouchMove) //只操作为true的
代码语言：txt复制
    v.isTouchMove = false;
代码语言：txt复制
})
代码语言：txt复制
startX = e.changedTouches[0].clientX
代码语言：txt复制
startY = e.changedTouches[0].clientY
代码语言：txt复制
return items

}

_touchmove(e, items,key) {

代码语言：txt复制
  const id = e.currentTarget.dataset.id, //获取列表中每一项的唯一值，可以取id
代码语言：txt复制
  touchMoveX = e.changedTouches[0].clientX, //滑动变化坐标
代码语言：txt复制
  touchMoveY = e.changedTouches[0].clientY, //滑动变化坐标
代码语言：txt复制
  //获取滑动角度
代码语言：txt复制
  angle = this._angle({
代码语言：txt复制
    X: startX,
代码语言：txt复制
    Y: startY
代码语言：txt复制
  }, {
代码语言：txt复制
      X: touchMoveX,
代码语言：txt复制
      Y: touchMoveY
代码语言：txt复制
    });
代码语言：txt复制
items.forEach(function (v, i) {
代码语言：txt复制
  v.isTouchMove = false
代码语言：txt复制
  //滑动超过30度角 return
代码语言：txt复制
  if (Math.abs(angle) > 30) return;
代码语言：txt复制
  if (v[key] == id) { //判断滑动的id与列表中的id是否一致，如果是的话，改变滑动这一项的isTouchMove属性
代码语言：txt复制
    if (touchMoveX > startX) //右滑
代码语言：txt复制
      v.isTouchMove = false
代码语言：txt复制
    else //左滑
代码语言：txt复制
      v.isTouchMove = true
代码语言：txt复制
  }
代码语言：txt复制
})
代码语言：txt复制
return items

}

_angle(start, end) {

代码语言：txt复制
var _X = end.X - start.X,
代码语言：txt复制
  _Y = end.Y - start.Y
代码语言：txt复制
//返回角度 /Math.atan()返回数字的反正切值
代码语言：txt复制
return 360 * Math.atan(_Y / _X) / (2 * Math.PI);

}

}

export default touch//app.js

import touch from './utils/touch.js'//新加

App({

globalData: {

代码语言：txt复制
userInfo: null

},

touch: new touch() //实例化这个touch对象

})

  • 然后去引用这个touch.js文件,在app.js文件中

末尾

  • 到这里左滑删除就告一段落了，主要就是先使用css将删除按钮隐藏起来，然后通过监听touch事件去改变列表中每一项的一个属性，间接修改这个条目的样式将删除按钮显示出来
  • 源码上传至github 微信小程序之列表左滑删除功能
  • 原文地址 微信小程序之列表左滑删除功能
css javascript 数据库一体机TData html

0 人点赞