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

介紹

• 第一次寫小程序，記錄一下遇到的需求以及解決方法。可能功能不是很難，主要是作下記錄。爲之後遇到相同的需求作鋪墊。

什麼是左滑刪除

• 用過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.js
const 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 startX
var startY
class 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.js
import touch from './utils/touch.js'//新加
App({
  globalData: {
    userInfo: null
  },
  touch: new touch() //實例化這個touch對象
})

末尾

• 到這裏左滑刪除就告一段落了，主要就是先使用css將刪除按鈕隱藏起來，而後經過監聽touch事件去改變列表中每一項的一個屬性，間接修改這個條目的樣式將刪除按鈕顯示出來
• 源碼上傳至github 微信小程序之列表左滑刪除功能
• 原文地址 微信小程序之列表左滑刪除功能