介绍

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

什么是左滑删除

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

实现原理

  • 最外层一个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}}">    <view class="item-content">      <view class="content-name">{{user.name}}</view>      <view class="content-info">         <text>{{user.phone}}</text>        <text>{{user.sex}}</text>      </view>    </view>    <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.jsconst App = getApp()Page({  /**   * 页面的初始数据   */  data: {    list:[      {        id:1,        name:'张三',        phone:'15955040222',        sex:'男',        isTouchMove:false,      },      {        id: 2,        name: '张三',        phone: '15955040222',        sex: '男',        isTouchMove: false,      },      {        id: 3,        name: '张三',        phone: '15955040222',        sex: '男',        isTouchMove: false,      },      {        id: 4,        name: '张三',        phone: '15955040222',        sex: '男',        isTouchMove: false,      },      {        id: 5,        name: '张三',        phone: '15955040222',        sex: '男',        isTouchMove: false,      },      {        id: 6,        name: '张三',        phone: '15955040222',        sex: '男',        isTouchMove: false,      },      {        id: 7,        name: '张三',        phone: '15955040222',        sex: '男',        isTouchMove: false,      },    ]  },  touchstart: function (e) {    //开始触摸时 重置所有删除    let data = App.touch._touchstart(e, this.data.list) //将修改过的list setData    this.setData({      list: data    })  },  //滑动事件处理  touchmove: function (e) {    let data = App.touch._touchmove(e, this.data.list,'id')//将修改过的list setData    this.setData({      list: data    })  },})
  • 对于滑动事件的处理专门封装了一个.js文件,防止以后还会用到。
var startXvar startYclass touch {  constructor() {  }  _touchstart(e, items) {    //开始触摸时 重置所有删除    items.forEach(function (v, i) {      if (v.isTouchMove) //只操作为true的        v.isTouchMove = false;    })    startX = e.changedTouches[0].clientX    startY = e.changedTouches[0].clientY    return items  }  _touchmove(e, items,key) {      const id = e.currentTarget.dataset.id, //获取列表中每一项的唯一值,可以取id      touchMoveX = e.changedTouches[0].clientX, //滑动变化坐标      touchMoveY = e.changedTouches[0].clientY, //滑动变化坐标      //获取滑动角度      angle = this._angle({        X: startX,        Y: startY      }, {          X: touchMoveX,          Y: touchMoveY        });    items.forEach(function (v, i) {      v.isTouchMove = false      //滑动超过30度角 return      if (Math.abs(angle) > 30) return;      if (v[key] == id) { //判断滑动的id与列表中的id是否一致,如果是的话,改变滑动这一项的isTouchMove属性        if (touchMoveX > startX) //右滑          v.isTouchMove = false        else //左滑          v.isTouchMove = true      }    })    return items  }  _angle(start, end) {    var _X = end.X - start.X,      _Y = end.Y - start.Y    //返回角度 /Math.atan()返回数字的反正切值    return 360 * Math.atan(_Y / _X) / (2 * Math.PI);  }}export default touch
  • 然后去引用这个touch.js文件,在app.js文件中
//app.jsimport touch from './utils/touch.js'//新加App({  globalData: {    userInfo: null  },  touch: new touch() //实例化这个touch对象})

末尾

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