WXML部分
1 <view class="index">
2
3 <!-- 数据展示区 -->
4 <scroll-view
5 class="scroll-list"
6 scroll-y
7 style="height: {{windowHeight - bottomHeight}}px"
8 bindscroll="bindscroll">
9 <view class="scroll-item" wx:for="{{optionsList}}" wx:key="index">
10 <view>{{item.time}}</view>
11 </view>
12 </scroll-view>
13
14 <!-- 页面可拖拽区域 -->
15 <view
16 wx:if='{{editting}}'
17 class="touchView"
18 catchtouchstart="scrollTouchStart"
19 catchtouchmove="scrollTouchMove"
20 catchtouchend="scrollTouchEnd"
21 style="height: {{windowHeight - bottomHeight}}px">
22 </view>
23
24 <!-- 页面拖拽处理区域 -->
25 <movable-area
26 wx:if='{{editting}}'
27 class="moveable_row"
28 style="height: {{windowHeight - bottomHeight}}px">
29 <movable-view
30 class="moveable_item {{moveData ? 'show' : 'hide'}}"
31 style="height: {{scrollItemHeight}}px;"
32 direction="vertical"
33 x="{{moveData.x}}"
34 y="{{moveData.y}}"
35 inertia="false"
36 damping="9999"
37 friction="9999"
38 >
39 <view class="scroll-item moving" hidden='{{!moveData}}'>
40 <view>{{selectItem.time}}</view>
41 </view>
42 </movable-view>
43 </movable-area>
44
45 <!-- 底部栏 -->
46 <view class="index-bottom">
47 <button type="primary" wx:if='{{!editting}}' bindtap="changeEditing">编辑</button>
48 <button type="warn" wx:else bindtap="changeEditing">取消</button>
49 </view>
50
51 </view>
WXSS部分
1 .index {
2 position: relative;
3 }
4
5 /* 数据展示区 */
6 .scroll-list{
7 width: 100%;
8 }
9 .scroll-item {
10 width: 100%;
11 padding: 10rpx 20rpx;
12 box-sizing: border-box;
13 border: 1px solid #999;
14 }
15 .scroll-item.moving {
16 border: 1px dashed blue;
17 }
18
19 /* 页面可拖拽区域 */
20 .touchView {
21 width: 100%;
22 position: absolute;
23 left: 0;
24 top: 0;
25 z-index: 1;
26 }
27
28 /* 页面拖拽处理区域 */
29 .moveable_row {
30 width: 100%;
31 position: absolute;
32 left: 0;
33 top: 0;
34 }
35 .moveable_item {
36 width: 100%;
37 }
38 .moveable_item.show {
39 background: #fff;
40 }
41 .moveable_item.hide {
42 background: transparent;
43 }
44
45
46 /* 底部栏 */
47 .index-bottom {
48 width: 100%;
49 display: flex;
50 justify-content: flex-end;
51 padding: 10rpx 20rpx;
52 box-sizing: border-box;
53 }
js部分
1 Page({
2 data:{
3 optionsList: [], // 数据源
4 windowHeight: 0, // 屏幕高度
5 scrollItemHeight: 0, // 列表单项高度
6 bottomHeight: 0, // 底部按钮高度
7 selectItem: {}, // 当前选中元素
8 selectIndex: 0, // 当前选中索引
9 editting: true, // 是否是“编辑”状态
10 moveData: null, // 列表项移动时记录移动位置
11 scrollTop: 0 // scroll-view距离顶部距离
12 },
13 // 初始化页面数据
14 init() {
15 this.setData({
16 optionsList: [{time: '12:00'}, {time: '13:00'}, {time: '14:00'}, {time: '15:00'}, {time: '16:00'}, {time: '17:00'}, {time: '18:00'}, {time: '19:00'}, {time: '20:00'}, {time: '21:00'}, {time: '22:00'}, {time: '23:00'}, {time: '24:00'}, {time: '25:00'}, {time: '26:00'}, {time: '27:00'}, {time: '28:00'}, {time: '29:00'}, {time: '30:00'}, {time: '31:00'}, {time: '32:00'}, {time: '33:00'}, {time: '34:00'}, {time: '35:00'}],
17 windowHeight: wx.getSystemInfoSync().windowHeight
18 }, () => {
19 wx.createSelectorQuery().select('.index-bottom').boundingClientRect(res => {
20 this.setData({
21 bottomHeight: res.height
22 })
23 }).exec()
24 wx.createSelectorQuery().select('.scroll-item').boundingClientRect(res => {
25 this.setData({
26 scrollItemHeight: res.height
27 })
28 }).exec()
29 });
30 },
31
32 // 开始拖拽
33 scrollTouchStart(event) {
34 const { scrollItemHeight } = this.data
35 const firstTouchPosition = {
36 x: event.changedTouches[0].pageX,
37 y: event.changedTouches[0].pageY,
38 }
39 const { data, index } = this.getPositionDomByXY(firstTouchPosition);
40 this.setData({
41 moveData:{
42 x: 0,
43 y: firstTouchPosition.y - scrollItemHeight / 2
44 },
45 selectItem: data,
46 selectIndex: index
47 })
48
49 },
50
51 // 拖拽ing...
52 scrollTouchMove(event) {
53 const { scrollItemHeight } = this.data
54 this.setData({
55 moveData:{
56 x: 0,
57 y: event.changedTouches[0].pageY - scrollItemHeight / 2
58 },
59 })
60
61 },
62
63 // 拖拽结束
64 scrollTouchEnd:function (event) {
65 const { selectIndex, optionsList } = this.data
66 const endTouchPosition = {
67 x: event.changedTouches[0].pageX,
68 y: event.changedTouches[0].pageY,
69 }
70 const { index } = this.getPositionDomByXY(endTouchPosition)
71 // 交换顺序
72 const temp = optionsList[selectIndex]
73 optionsList[selectIndex] = optionsList[index]
74 optionsList[index] = temp
75 this.setData({
76 optionsList,
77 moveData: null
78 })
79 },
80
81 // 根据(x,y)坐标轴获取页面元素
82 getPositionDomByXY(potions) {
83 const { scrollItemHeight, optionsList, scrollTop } = this.data
84 const y = potions.y + scrollTop;
85 const len = optionsList.length
86 for(let i = 0; i < len; i++){
87 if(y >= i*scrollItemHeight && y < (i+1)*scrollItemHeight){
88 // 返回匹配到的数据项
89 return {
90 data: optionsList[i],
91 index: i
92 };
93 }
94 }
95 return y > (len-1)*scrollItemHeight ? {
96 // 匹配项位于列表之下
97 data: optionsList[len - 1],
98 index: len - 1
99 } : {
100 // 匹配项位于列表之上
101 data: optionsList[0],
102 index: 0
103 }
104 },
105
106 // 切换编辑状态
107 changeEditing() {
108 const { editting } = this.data
109 this.setData({ editting: !editting })
110 },
111
112 // 监听滚动事件
113 bindscroll(e) {
114 this.data.scrollTop = e.detail.scrollTop
115 },
116 onLoad: function () {
117 this.init()
118 },
119 });
