因?yàn)橹皇亲鰝€(gè)小案例 我就直接代碼寫page頁面里了 其實(shí)很簡單 組件稍微改一下就好了
wxss
/* 設(shè)置movable-area的寬度 */
.area{
width: 100%;
}
/* a b c 每條元素的樣式 */
movable-view {
width: calc(100% - 2px);
background-color: red;
height: 60rpx;
line-height: 60rpx;
color: #FFFFFF;
text-align: center;
border: royalblue 1px solid;
}
就是很普通的樣式編寫
js代碼
Page({
data: {
//排序的集合數(shù)據(jù)源
list: [
{ text: 'a', id: 0 },
{ text: 'b', id: 1 },
{ text: 'c', id: 2 }
],
nodeHeight: 0, //記錄單個(gè)節(jié)點(diǎn)的高度 px像素單位
//設(shè)置movable-area總高度
totalHeight: 0
},
//第一個(gè)要執(zhí)行的生命周期
onLoad: function () {
//調(diào)用初始化函數(shù)
this.initialization();
},
//將指定元素 在數(shù)組中后移一個(gè)下標(biāo)
moveElementBackward(arr, index) {
if((index + 1) === arr.length) {
return arr
}
const element = arr[index];
arr.splice(index, 1);
arr.splice(index + 1, 0, element);
return arr;
},
//將指定元素 在數(shù)組中前移一個(gè)下標(biāo)
moveIndexForward(arr, index) {
if(index == 0){
return arr
}
var newArr = Array.from(arr);
var value1 = newArr[index];
var value2 = newArr[index - 1];
newArr[index] = value2;
newArr[index - 1] = value1;
return newArr;
},
//初始化加載數(shù)據(jù)
initialization() {
//先確認(rèn) list是有數(shù)據(jù)的 如果沒有直接 return結(jié)束邏輯
let list = this.data.list
if(!list.length) {
return
}
const query = wx.createSelectorQuery()
//獲取 node 第一個(gè)節(jié)點(diǎn)的高度 不然不知道每個(gè)節(jié)點(diǎn)到底多高
query.select('.node').boundingClientRect()
query.exec((doms) => {
/*
循環(huán)遍歷list top是與頂部的距離
就是 當(dāng)前下標(biāo)乘以 當(dāng)個(gè)高度
例如 一個(gè) 40 那么 第二個(gè)的位置搞好是 40 而第三個(gè)則要在 80 第一個(gè)在 0
*/
list = list.map((item,index) => {
item.top = (index*doms[0].height)
return item
})
//給總高度 單個(gè)節(jié)點(diǎn)高度 和 movable-area的高度賦值
this.setData({
nodeHeight: doms[0].height,
totalHeight: (doms[0].height * list.length),
list: list
})
})
},
//當(dāng)用戶拖拽完松開手時(shí)觸發(fā)
handleTouchEnd() {
//調(diào)用initialization 初始化數(shù)據(jù)
this.initialization()
},
//當(dāng)用戶拖動(dòng)某塊元素時(shí)觸發(fā)
handleTouchMove: function (event) {
//獲取到當(dāng)前用拖動(dòng)的是第幾個(gè)元素
const index = event.currentTarget.dataset.index
//定義一個(gè)list 接受tata中的list
const list = this.data.list
// 計(jì)算出 當(dāng)前下標(biāo)應(yīng)該在的位置 加上 多 三分之二個(gè)節(jié)點(diǎn)的高度
const top = ((index * this.data.nodeHeight) + (this.data.nodeHeight * (2/3)))
// 計(jì)算出當(dāng)前元素應(yīng)該在的位置 并減去 三分之二個(gè)節(jié)點(diǎn)的高度
const bottom = ((index * this.data.nodeHeight) - (this.data.nodeHeight * (2/3)))
//獲取movable-area和movable-view節(jié)點(diǎn)
const query = wx.createSelectorQuery().in(this)
query.select('.area').boundingClientRect()
query.selectAll('.node').boundingClientRect()
query.exec(res => {
//存儲(chǔ)movable-area 元素信息
const nodeRect = res[0]
//獲取用戶當(dāng)前拖動(dòng)的元素信息
const nodeTop = res[1][index]
//用 node 與屏幕頂部的距離減去 area與屏幕頂部的距離 間距得到 node與area的距離
const distance = (nodeTop.top - nodeRect.top)
//用移動(dòng)距離判斷 是否下移了 2/3個(gè)節(jié)點(diǎn)還要多的距離
if(distance > top) {
// 調(diào)用 向后移動(dòng)一個(gè)下標(biāo)的函數(shù)
const newArray = this.moveElementBackward(list, index);
//調(diào)用setData 修改函數(shù) 修改 data中的 list 換成我們新處理好的函數(shù)
this.setData({
list: newArray
})
//等待 響應(yīng)式數(shù)據(jù)修改并生效后再執(zhí)行的nextTick
wx.nextTick(() => {
//調(diào)用初始化函數(shù)
this.initialization();
})
}
//用移動(dòng)距離判斷 是否上移了 2/3個(gè)節(jié)點(diǎn)還要多的距離
if(distance < bottom) {
//調(diào)用函數(shù) 將 當(dāng)前下標(biāo)上一一下 向上調(diào)1
const newArray = this.moveIndexForward(list, index);
this.setData({
list: newArray
})
//等待 響應(yīng)式數(shù)據(jù)修改并生效后再執(zhí)行的nextTick
wx.nextTick(() => {
//調(diào)用初始化函數(shù)
this.initialization();
})
}
})
}
});
我的注釋還是寫的非常認(rèn)真的 大家可以好好讀一讀
然后 wxml 沒什么特別的 就是渲染一下list文章來源：http://www.zghlxwxcb.cn/news/detail-725391.html
<movable-area
class = "area"
style = "height: {{totalHeight}}px;"
>
<movable-view
wx:for="{{list}}"
wx:key="id"
data-index="{{index}}"
y="{{item.top}}"
direction="all"
class="node"
bindtouchmove="handleTouchMove"
bindtouchend="handleTouchEnd"
>
{{item.text}}
</movable-view>
</movable-area>
這樣 我們就做了一個(gè) 可以上下拖動(dòng)元素排序的小案例了
效果也是非常不錯(cuò)的文章來源地址http://www.zghlxwxcb.cn/news/detail-725391.html
到了這里，關(guān)于微信小程序通過 movable-area 做一個(gè)與vuedraggable相似的上下拖動(dòng)排序控件的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
