微信小程序实现侧滑删除

Posted on | Edited on

微信小程序实现侧滑删除

三种办法： scroll-view, movable-view配合movable-area, view

View

删除上一行后，下一行的删除按钮会显示，这个问题在scroll-view的方法中还是存在

目前就是在点击删除的时候，把删除按钮隐藏

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
import {View,Button} from '@tarojs/components'
import { Component } from '../../lib/component'

import './sliderLeft.scss'

class SliderLeft extends Component {
  state = {
    style: '',
    delBtnWidth: 100,
    startX: 0,
  }
  
  touchStart(e) {
    if(e.touches.length==1){
      this.setState({
        //设置触摸起始点水平方向位置
        startX:e.touches[0].clientX
      });
    }
  }

  touchEnd(e) {
    if(e.changedTouches.length==1){
      //手指移动结束后水平位置
      const endX = e.changedTouches[0].clientX;
      //触摸开始与结束，手指移动的距离
      const disX = this.state.startX - endX;
      const delBtnWidth = this.state.delBtnWidth;
      //如果距离小于删除按钮的1/5，不显示删除按钮
      const txtStyle = disX > delBtnWidth/5 ? "left:-"+delBtnWidth+"rpx":"left:0rpx";
      this.setState({
        style: txtStyle
      })
    }
  }

  touchMove(e) {
    if(e.touches.length==1){
      //手指移动时水平方向位置
      const moveX = e.touches[0].clientX;
      //手指起始点位置与移动期间的差值
      const disX = this.state.startX - moveX;
      const delBtnWidth = this.state.delBtnWidth;
      let txtStyle = "";
      if(disX <= 0){//如果移动距离小于等于0，文本层位置不变
        txtStyle = "left:0rpx";
      } else if(disX > 0 ){//移动距离大于0，文本层left值等于手指移动距离
        txtStyle = "left:-"+disX+"rpx";
        if(disX>=delBtnWidth){
          //控制手指移动距离最大值为删除按钮的宽度
          txtStyle = "left:-"+delBtnWidth+"rpx";
        }
      }
      this.setState({
        style: txtStyle
      })
    }
  }
  
  render () {

    return (
      <View className='item-scroll' onTouchStart={this.touchStart} onTouchEnd={this.touchEnd} onTouchMove={this.touchMove} style={this.state.style}>
        <View className='item'>
          {this.state.checkedItems.includes(item.orderItemId) ? (
            <View className='check' onClick={this.uncheckItem.bind(this, item.orderItemId, item.quantity)}>
              <Image src={CheckImage} class='checkImage' mode='scaleToFill'></Image>
            </View>
          ) : (
            <View className='check' onClick={this.checkItem.bind(this, item.orderItemId, item.quantity)}>
              <View className='check-item'></View>
            </View>
          )}
          <Image src={item.imageUrl} className='item-image' mode='scaleToFill'></Image>
          <View className='item-intro'>
            <View className='item-name'>{item.productDesc}</View>
            <View className='item-price-quantity'>
              <Text className='item-promotion-price'>￥{item.itemGrand}</Text>
              {/* 加减按钮 */}
              <View className='plus'>
                <View className={item.quantity > 1 ? 'plus-reduce' : 'plus-reduce-disable'} onClick={this.decreaseItem.bind(this, item.orderItemId, item.quantity)}>-</View>
                <View className='plus-content'>{item.quantity}</View>
                <View className='plus-plus' onClick={this.increaseItem.bind(this, item.orderItemId, item.quantity)}>+</View>
              </View>
            </View>
          </View>
          {/* 删除整行 */}
          <View className='item-del' onClick={this.clearItem.bind(this, item.orderItemId, item.quantity)}>
            删除
          </View>
        </View>
      </View>
    )
  }
}

export default SliderLeft