wxml:
<view>
<view class="dileititle">手指移动选项排序</view>
<view style="width:740rpx;height:80vh;overflow-y:auto;margin:auto;" id="movebox">
<block wx:for="{
{list}}" wx:key="index">
<view catchtouchmove="listitemmove" catchtouchend="listitemmove" data-index="{
{index}}" class="flex1 dileiitemlist" id="movelist{
{index}}" style="left:0;right:0;{
{nowmoveindex==index?('position:absolute;top:'+movetop+'px;height:'+itemheight+'px;'):''}}">
<view class="{
{moveoutindex==index?'changemovenow':''}}" style="height:0;transition: height 0.2s;"></view>
<view class="ranknum">{
{index+1}}</view>
<view class="flex1" style="border-radius:10rpx;width:440rpx;position:relative;color:#fff;">
<view style="flex:1;text-align: center;margin-right: 20rpx;padding: 20rpx 20rpx;background:#8eb1f7;border-radius:10rpx;">{
{item.member.nickname}}</view>
</view>
</view>
</block>
</view>
</view>
page {
background-color: #fff;
font-size: 30rpx;
text-align: center;
color: #2952a5;
}
.dileiitemlist {
justify-content: center;
padding-top: 30rpx;
flex-wrap: wrap;
}
.dileititle {
font-size: 32rpx;
line-height: 100rpx;
}
.ranknum {
width: 60rpx;
height: 60rpx;
line-height: 60rpx;
text-align: center;
border-radius: 50%;
border: 1rpx solid #2952a5;
margin-right: 30rpx;
}
.changemovenow {
width: 100%;
height: 60px !important;
}
.flex1 {
display: flex;
align-items: center;
}
js
let app = getApp()
app.unitgameinfo = { "members": [{ "member": { "nickname": "小程序照片合成", "job": "ckext" }, }, { "member": { "nickname": "高球丸子" }, }, { "member": { "nickname": "DRobertdsf", "job": "黄金" }, }, { "member": { "nickname": "erer", "job": "ckext" }, }, { "member": { "nickname": "just do it", "job": "黄金" }, }, { "member": { "nickname": "888" }, }], };
Page({
data: {
},
onLoad: function (options) {
var info = app.unitgameinfo, list;
list = info.members;
this.setData({ options, info, list });
this.getwxmlcode("#movebox", (resp) => {
this.setData({ movebox: resp })
setTimeout(() => {
this.getwxmlcode("#movelist0", (res) => {
this.setData({ movelist0: res })
var jiange = res.top - resp.top;
var yiban = res.bottom - res.top + jiange;
this.setData({
itemheight: res.bottom - res.top,
jiange: yiban, //两条中间到另一条的距离
jianqu: resp.top - (res.bottom - res.top) / 2, //位置要减去距离
})
})
}, 300)
})
},
getwxmlcode(str, cal) {
const query1 = wx.createSelectorQuery()
query1.select(str).boundingClientRect()
query1.selectViewport().scrollOffset()
query1.exec((res) => {
if (cal) cal(res[0])
})
},
listitemmove(e) {
// console.log(e)
if (e.type == "touchmove") {
var movetop = e.touches[0].pageY - this.data.itemheight;
var moveoutindex = parseInt((movetop - this.data.jianqu) / this.data.jiange);
if (e.currentTarget.dataset.index <= moveoutindex) moveoutindex++;
this.moveoutindex = moveoutindex;
this.setData({ nowmoveindex: e.currentTarget.dataset.index, movetop, moveoutindex })
} else {
let index = e.currentTarget.dataset.index, score = this.data.list;
let data = { ...score[index] };
score.splice(index, 1);
if (index <= this.moveoutindex - 1) this.moveoutindex--;
score.splice(this.moveoutindex, 0, data);
this.setData({ list: score, moveoutindex: -1, nowmoveindex: -1 });
}
},
})