标签：事件 xss 大于 std idt view translate mic wxs
最近po主写小程序过程中遇到一个拖拽排序需求. 上网一顿搜索未果, 遂自行实现.
这次就不上效果图了, 直接扫码感受吧.
首先由于并没有啥现成的小程序案例给我参考. 所以有点无从下手, 那就找个h5的拖拽实现参考参考. 于是在jquery插件网看了几个拖拽排序实现后基本确定了思路. 大概就是用 transform 做变换. 是的, 灵感这种东西就是借鉴过来的～～
首先能拖拽的元素最起码都要是一样的大小, 至于不规则大小, 或者大小成倍数关系的均不在本次实现范围.
然后我们对应需求找解决方案:
使用 movable-view 实现拖拽, 这种方式简单快捷, 但是由于我们的灵感是使用 transform 做变换, 而这里 movable-view 本身也是用 transform 来实现的, 所以会有冲突, 遂弃之.
使用自定义手势, 如 touchstart, touchmove, touchend. 对的又是这三个基佬, 虽然我们在做下拉刷新时候采用用了 movable-view 而抛弃这三兄弟. 但是是金子总会发光的, 今天就是你们三兄弟展示自身本领的时候了(真香警告). 废话有点多, 言归正传, 使用自定义手势可以方便我们控制每一个细节, 美中不足的是他们的父亲并没有提供手动阻止冒泡的特性, 搞了个 catch 和 bind 事件, 然并不支持动态切换, 所以很坑爹, 不过这都不是问题, 就是坑了些罢了.
排序是基于拖拽的, 通过上面 touchstart, touchmove, touchend 这三兄弟拿到触摸信息后动态计算出当前元素的排序位置,然后根据当前激活元素的排序位置去动态更换数组内其他元素的位置. 大概意思就是十个兄弟做一排, 老大起来跑到老三的位置, 老三看了看往前移了移, 老二看了看也往前移了移. 当然这是正序, 还有逆序, 比如老十跑到了老大的位置, 那么老大到老九都得顺序后移一个位置.
自定义列数, 到是没啥难度, 小程序组件暴露一个列属性, 然后把计算过程中的固定的列数改成该参数就可以了
先上 touchstart, touchmove, touchend 三兄弟
这里为了体验把 touchstart 换成了 longpress 长按触发. 首先我们需要设置一个状态 touch 表示我们在拖拽了. 然后就是获取 pageX, pageY 注意这里获取 pageX, pageY 而不是 clientX, clientY 因为我们的 drag 组件有可能会有 margin 或者顶部仍有其他元素, 这时候如果获取 clientX, clientY 就会出现偏差了. 这里把当前 pageX, pageY 设置为初始触摸点 startX, startY.
然后需要计算下初始化的激活元素的偏移位置 tranX 和 tranY, 这里为了优化体验在列数为1的时候初始化 tranX 不做位移, tranY 移动到当前激活元素中间位置, 多列的时候把 tranX 和 tranY 全部位移到当前激活元素中间位置.
最后设置当前激活元素的索引 cur 以及偏移量 tranX, tranY. 然后震动一下下 wx.vibrateShort() 体验美美哒.
/**
* 长按触发移动排序
*/
longPress(e) {
this.setData({
touch: true
});
this.startX = e.changedTouches[0].pageX
this.startY = e.changedTouches[0].pageY
let index = e.currentTarget.dataset.index;
if(this.data.columns === 1) { // 单列时候X轴初始不做位移
this.tranX = 0;
} else { // 多列的时候计算X轴初始位移, 使 item 水平中心移动到点击处
this.tranX = this.startX - this.item.width / 2 - this.itemWrap.left;
}
// 计算Y轴初始位移, 使 item 垂直中心移动到点击处
this.tranY = this.startY - this.item.height / 2 - this.itemWrap.top;
this.setData({
cur: index,
tranX: this.tranX,
tranY: this.tranY,
});
wx.vibrateShort();
}touchmove 每次都是故事的主角, 这次也不列外. 看这满满的代码量就知道了. 首先进来需要判断是否在拖拽中, 不是则需要返回.
然后判断是否超过一屏幕. 这是啥意思呢, 因为我们的拖拽元素可能会很多甚至超过整个屏幕, 需要滑动来处理. 但是我们这里使用了 catch:touchmove 事件所以会阻塞页面滑动. 于是我们需要在元素超过一个屏幕的时候进行处理, 这里分两种情况. 一种是我们拖拽元素到页面底部时候页面自动向下滚动一个元素高度的距离, 另一种是当拖拽元素到页面顶部时候页面自动向上滚动一个元素高度的距离.
接着我们设置已经重新计算好的 tranX 和 tranY, 并获取当前元素的排序关键字 key 作为初始 originKey, 然后通过当前的 tranX 和 tranY 使用 calculateMoving 方法计算出 endKey.
最后我们调用 this.insert(originKey, endKey) 方法来对数组进行排序
touchMove(e) {
if (!this.data.touch) return;
let tranX = e.touches[0].pageX - this.startX + this.tranX,
tranY = e.touches[0].pageY - this.startY + this.tranY;
let overOnePage = this.data.overOnePage;
// 判断是否超过一屏幕, 超过则需要判断当前位置动态滚动page的位置
if(overOnePage) {
if(e.touches[0].clientY > this.windowHeight - this.item.height) {
wx.pageScrollTo({
scrollTop: e.touches[0].pageY + this.item.height - this.windowHeight,
duration: 300
});
} else if(e.touches[0].clientY < this.item.height) {
wx.pageScrollTo({
scrollTop: e.touches[0].pageY - this.item.height,
duration: 300
});
}
}
this.setData({tranX: tranX, tranY: tranY});
let originKey = e.currentTarget.dataset.key;
let endKey = this.calculateMoving(tranX, tranY);
// 防止拖拽过程中发生乱序问题
if (originKey == endKey || this.originKey == originKey) return;
this.originKey = originKey;
this.insert(originKey, endKey);
}通过以上介绍我们已经基本完成了拖拽排序的主要功能, 但是还有两个关键函数没有解析. 其中一个就是 calculateMoving 方法, 该方法根据当前偏移量 tranX 和 tranY 来计算 目标key.
具体计算规则:
/**
* 根据当前的手指偏移量计算目标key
*/
calculateMoving(tranX, tranY) {
let rows = Math.ceil(this.data.list.length / this.data.columns) - 1,
i = Math.round(tranX / this.item.width),
j = Math.round(tranY / this.item.height);
i = i > (this.data.columns - 1) ? (this.data.columns - 1) : i;
i = i < 0 ? 0 : i;
j = j < 0 ? 0 : j;
j = j > rows ? rows : j;
let endKey = i + this.data.columns * j;
endKey = endKey >= this.data.list.length ? this.data.list.length - 1 : endKey;
return endKey
}拖拽排序中没有解析的另一个主要函数就是 insert方法. 该方法根据 originKey(起始key) 和 endKey(目标key) 来对数组进行重新排序.
具体排序规则:
/**
* 根据起始key和目标key去重新计算每一项的新的key
*/
insert(origin, end) {
let list;
if (origin < end) {
list = this.data.list.map((item) => {
if (item.key > origin && item.key <= end) {
item.key = item.key - 1;
} else if (item.key == origin) {
item.key = end;
}
return item
});
this.getPosition(list);
} else if (origin > end) {
list = this.data.list.map((item) => {
if (item.key >= end && item.key < origin) {
item.key = item.key + 1;
} else if (item.key == origin) {
item.key = end;
}
return item
});
this.getPosition(list);
}
}以上 insert 方法中我们最后调用了 getPosition 方法, 该方法用于计算每一项元素的 tranX 和 tranY 并进行渲染, 该函数在初始化渲染时候也需要调用. 所以加了一个 vibrate 变量进行不同的处理判断.
该函数执行逻辑:
最后注意, 该函数并未改变 list 中真正的排序, 而是根据 key 来进行伪排序, 因为如果改变 list 中每一个项的顺序 dom结构会发生变化, 这样就达不到我们要的丝滑效果了. 但是最后 this.triggerEvent(‘change‘, {listData: listData}) 时候是真正排序后的数据, 并且已经去掉了 key, tranX, tranY 的原始数据信息(这里每一项数据有key, tranX, tranY 是因为初始化时候做了处理, 所以使用时无需考虑)
/**
* 根据排序后 list 数据进行位移计算
*/
getPosition(data, vibrate = true) {
let list = data.map((item, index) => {
item.tranX = this.item.width * (item.key % this.data.columns);
item.tranY = Math.floor(item.key / this.data.columns) * this.item.height;
return item
});
this.setData({
list: list
});
if(!vibrate) return;
this.setData({
itemTransition: true
})
wx.vibrateShort();
let listData= [];
list.forEach((item) => {
listData[item.key] = item.data
});
this.triggerEvent('change', {listData: listData});
}写了这么久, 三兄弟就剩最后一个了, 这个兄dei貌似不怎么努力嘛, 就两行代码？
是的, 就两行... 一行判断是否在拖拽, 另一行清除缓存数据
touchEnd() {
if (!this.data.touch) return;
this.clearData();
}因为有重复使用, 所以选择把这些逻辑包装了一层.
/**
* 清除参数
*/
clearData() {
this.originKey = -1;
this.setData({
touch: false,
cur: -1,
tranX: 0,
tranY: 0
});
}介绍完三兄弟以及他们的表亲后, 故事就剩我们的 init 方法了.
init 方法执行逻辑:
init() {
// 遍历数据源增加扩展项, 以用作排序使用
let list = this.data.listData.map((item, index) => {
let data = {
key: index,
tranX: 0,
tranY: 0,
data: item
}
return data
});
this.setData({
list: list,
itemTransition: false
});
this.windowHeight = wx.getSystemInfoSync().windowHeight;
// 获取每一项的宽高等属性
this.createSelectorQuery().select(".item").boundingClientRect((res) => {
let rows = Math.ceil(this.data.list.length / this.data.columns);
this.item = res;
this.getPosition(this.data.list, false);
let itemWrapHeight = rows * res.height;
this.setData({
itemWrapHeight: itemWrapHeight
});
this.createSelectorQuery().select(".item-wrap").boundingClientRect((res) => {
this.itemWrap = res;
let overOnePage = itemWrapHeight + res.top > this.windowHeight;
this.setData({
overOnePage: overOnePage
});
}).exec();
}).exec();
}以下是整个组件的 wxml, 其中具体渲染部分使用了抽象节点 <item item="{{item.data}}"></item> 并传入了每一项的数据, 使用抽象节点是为了具体展示的效果和该组件本身代码解耦. 如果要到性能问题或者觉得麻烦, 可直接在该组件下编写样式代码.
<view>
<view style="overflow-x: {{overOnePage ? 'hidden' : 'initial'}}">
<view class="item-wrap" style="height: {{ itemWrapHeight }}px;">
<view class="item {{cur == index? 'cur':''}} {{itemTransition ? 'itemTransition':''}}"
wx:for="{{list}}"
wx:key="{{index}}"
id="item{{index}}"
data-key="{{item.key}}"
data-index="{{index}}"
style="transform: translate3d({{index === cur ? tranX : item.tranX}}px, {{index === cur ? tranY: item.tranY}}px, 0px);width: {{100 / columns}}%"
bind:longpress="longPress"
catch:touchmove="touchMove"
catch:touchend="touchEnd">
<item item="{{item.data}}"></item>
</view>
</view>
</view>
<view wx:if="{{overOnePage}}" class="indicator">
<view>滑动此区域滚动页面</view>
</view>
</view>这里我直接把 scss 代码拉出来了, 这样看的更清楚, 具体完整代码文末会给出地址
@import "../../assets/css/variables";
.item-wrap {
position: relative;
.item {
position: absolute;
width: 100%;
z-index: 1;
&.itemTransition {
transition: transform 0.3s;
}
&.cur {
z-index: 2;
background: $mainColorActive;
transition: initial;
}
}
}
.indicator {
position: fixed;
z-index: 99999;
right: 0rpx;
top: 50%;
margin-top: -250rpx;
padding: 20rpx;
& > view {
width: 36rpx;
height: 500rpx;
background: #ffffff;
border-radius: 30rpx;
box-shadow: 0 0 10rpx -4rpx rgba(0, 0, 0, 0.5);
color: $mainColor;
padding-top: 90rpx;
box-sizing: border-box;
font-size: 24rpx;
text-align: center;
opacity: 0.8;
}
}该拖拽组件来来回回花了我好几周时间, 算的上是该组件库中最有质量的一个组件了. 所以如果您看了觉得还不错欢迎star. 当然遇到问题在 issues 提给我就行了, 我回复还是蛮快的～～
还有就是该组件受限制于微信本身的 api 以及一些特性, 在超出一屏时候会无法滑动. 这里我做了个判断超出一屏时候加了个指示器辅助滑动, 使用时可对样式稍做修改(因为感觉有点丑...)
其他的好像没啥了...
补充一句, 该组件基本上没怎么使用太多小程序相关的特性, 所以按照这个思虑用h5实现应该也是可以的, 如果有h5方面的需求应该也是可以满足的...
标签：事件 xss 大于 std idt view translate mic wxs
原文地址：https://www.cnblogs.com/haha1212/p/11562944.html
