小程序实现卡片

Posted on Edited on In

自用笔记：本文属于自用笔记，不做详解，仅供参考。在此记录自己已理解并开始遵循的前端代码规范。What How Why

返回顶部及获取滑动距离

1
2
<!-- 组件 -->
<card-sroll wx:if="{{List.length}}" catch:cancelAdd="cardAdd" catch:cancelCut="cardCut"></card-sroll>
1
2
3
4
5
6
7
8
9
10
11
12
<!-- 组件 -->
<view class="sroll">
  <view class="container container1" wx:if="{{page == 1}}" bindtouchstart="touchStart" bindtouchmove="touchMove" bindtouchend="touchEnd" animation="{{ani1}}">
    121212
  </view>
  <view class="container container2" wx:if="{{page == 2}}"  bindtouchstart="touchStart" bindtouchmove="touchMove" bindtouchend="touchEnd" animation="{{ani2}}">
    121212
  </view>
  <view class="container container3" wx:if="{{page == 3}}"  bindtouchstart="touchStart" bindtouchmove="touchMove" bindtouchend="touchEnd" animation="{{ani3}}">
    1212121
  </view>
</view>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.container{
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 0 25rpx;
  box-sizing: border-box;
}
.container1{
}
.container2{
}
.container3{
}
page{
  height: 100%
}
属性说明
touchStart触摸开始事件
touchMove触摸移动事件
touchEnd触摸结束事件
clientX触摸目标在视口中的x坐标。
clientY触摸目标在视口中的y坐标。
force
identifier标识触摸的唯一ID。
pageX触摸目标在页面中的x坐标。
pageY触摸目标在页面中的y坐标。
move2left向左滑动操作
move2right向右滑动操作
screenX触摸目标在屏幕中的x坐标。
screenY触摸目标在屏幕中的y坐标。
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
const app = getApp()
var startX, endX;
var moveFlag = true;// 判断执行滑动事件

Component({
  data: {
    page : 1,
    ani1: '',
    ani2: '',
    ani3: ''
  },
  touchStart (e) {
    startX = e.touches[0].pageX; // 获取触摸时的原点
    moveFlag = true;
  },
  // 触摸移动事件
  touchMove (e) {
    endX = e.touches[0].pageX; // 获取触摸时的原点
    if (moveFlag) {
      if (endX - startX > 50) {
        console.log("move right");
        this.move2right();
        moveFlag = false;
      }
      if (startX - endX > 50) {
        console.log("move left");
        this.move2left();
        moveFlag = false;
      }
    }
  },
  // 触摸结束事件
  touchEnd (e) {
    moveFlag = true; // 回复滑动事件
  },
  //向左滑动操作
  move2left () {
    let {page, navTab, bottomList} = this.data
    var that = this
    if (page == bottomList.length) {
      return
    }
    var animation = wx.createAnimation({
      duration: 1000,
      timingFunction: 'ease',
      delay: 100
    });
    animation.opacity(0.2).translate(-500, 0).step()
    this.setData({
      ani1: page == 1 ? animation.export() : '',
      ani2: page == 2 ? animation.export() : ''
    })
    setTimeout(function () {
      that.setData({
        page: page + 1,
        ani3: '',
        ani2: ''
      });
    }, 800)
    this.triggerEvent('cancelAdd', page)
  },
  //向右滑动操作
  move2right () {
    let {page, navTab, bottomList} = this.data
    var that = this
    if (page == 1) {
      return
    }
    var animation = wx.createAnimation({
      duration: 1000,
      timingFunction: 'ease',
      delay: 100
    });
    animation.opacity(0.2).translate(500, 0).step()
    this.setData({
      ani3: page == 3 ? animation.export() : '',
      ani2: page == 2 ? animation.export() : ''
    })
    setTimeout(function () {
      that.setData({
        page: page - 1,
        ani1: '',
        ani2: ''
      });
    }, 800)
    this.triggerEvent('cancelCut', page)
  }
})
1
2
3
4
```


```wx