没有合适的资源?快使用搜索试试~ 我知道了~
微信小程序实现手指拖动选项排序
9 下载量 58 浏览量
2020-10-15
10:04:54
上传
评论
收藏 47KB PDF 举报
温馨提示
试读
2页
主要介绍了微信小程序实现手指拖动选项排序,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
资源推荐
资源详情
资源评论
微信小程序实现手指拖动选项排序微信小程序实现手指拖动选项排序
主要介绍了微信小程序实现手指拖动选项排序,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
本文实例为大家分享了微信小程序实现手指拖动选项排序的具体代码,供大家参考,具体内容如下
效果:
wxml:
<view>
<view class="dileititle">手指移动选项排序</view>
<view style="width:740rpx;height:80vh;overflow-y:auto;padding:0 90rpx;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>
<button class='tijiao' catchtap="lastsubmit">确定</button>
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});
}
},
onShow: function(){
},
lastsubmit(){
console.log(this.data.list)
},
})
wxss:
page{background-color: #fff;font-size:30rpx;text-align: center;color: #2952a5;}
.tijiao{
color: #fff;font-size: 30rpx;line-height: 2.8;
margin: 20rpx auto 20rpx;width:80vw;position: fixed;bottom: 50rpx;left: 10vw;
资源评论
weixin_38631182
- 粉丝: 8
- 资源: 954
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功