微信小程序向左滑动删除仿QQ效果

2024-02-19 19:11:14

前言

微信小程序作为一种轻量级的应用，凭借其强大的功能和便捷的使用体验，受到广大用户的喜爱。作为小程序开发者，我们不断探索新的功能和特性，以满足用户日益增长的需求。其中，向左滑动删除功能就是一项非常实用的功能，可以为用户提供更加流畅的操作体验。

实现原理

微信小程序的向左滑动删除功能主要通过监听 touchstart 和 touchmove 事件实现。当用户手指按住列表项时，触发 touchstart 事件，此时记录手指按下的位置。当手指移动时，触发 touchmove 事件，计算手指移动的距离。如果手指移动的距离超过一定阈值，则触发删除操作。

具体步骤

导入必需的库

import { Component } from '@tarojs/taro'
import { View } from '@tarojs/components'
import { Swiper, SwiperItem } from '@tarojs/components'

定义组件类

class SwipeToDelete extends Component {
  constructor(props) {
    super(props)
    this.state = {
      startX: 0, // 手指按下的位置
      moveX: 0, // 手指移动的位置
      threshold: 50, // 删除操作的阈值
      isDelete: false // 是否触发删除操作
    }
  }

  // 手指按下时触发
  onTouchStart(e) {
    this.setState({
      startX: e.touches[0].clientX
    })
  }

  // 手指移动时触发
  onTouchMove(e) {
    this.setState({
      moveX: e.touches[0].clientX
    })
  }

  // 手指抬起时触发
  onTouchEnd() {
    const { startX, moveX, threshold } = this.state
    if (Math.abs(moveX - startX) > threshold) {
      this.setState({
        isDelete: true
      })
    } else {
      this.setState({
        isDelete: false
      })
    }
  }

  // 渲染函数
  render() {
    const { isDelete } = this.state
    return (
      <View className="swipe-to-delete">
        <Swiper
          className="swiper"
          onTouchStart={this.onTouchStart}
          onTouchMove={this.onTouchMove}
          onTouchEnd={this.onTouchEnd}
        >
          <SwiperItem className="item">
            {this.props.children}
          </SwiperItem>
          <SwiperItem className="delete-item" hidden={!isDelete}>
            删除
          </SwiperItem>
        </Swiper>
      </View>
    )
  }
}

使用组件

import SwipeToDelete from './swipe-to-delete'

export default class PageIndex extends Component {
  render() {
    return (
      <View>
        <SwipeToDelete>
          <View>列表项1</View>
        </SwipeToDelete>
        <SwipeToDelete>
          <View>列表项2</View>
        </SwipeToDelete>
        <SwipeToDelete>
          <View>列表项3</View>
        </SwipeToDelete>
      </View>
    )
  }
}