相思资源网 Design By www.200059.com

本文实例为大家分享了微信小程序实现手指拖动选项排序的具体代码,供大家参考,具体内容如下

效果:

微信小程序实现手指拖动选项排序

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">
 <view class="{{moveoutindex==index" 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;
 background-color: #2952a5;border-radius:50rpx;
}
.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;}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

标签:
微信小程序手指拖动选项排序,微信小程序手指拖动排序,微信小程序拖动排序

相思资源网 Design By www.200059.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
相思资源网 Design By www.200059.com

评论“微信小程序实现手指拖动选项排序”

暂无微信小程序实现手指拖动选项排序的评论...

《魔兽世界》大逃杀!60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容,新游玩模式《强袭风暴》即将于3月21 日在亚服上线,届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕,并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时,他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中,玩家将会进入一个全新的海盗主题大逃杀式限时活动,其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场,作为一个独立于主游戏之外的活动,玩家可以用大逃杀的风格来体验《魔兽世界》,不分职业、不分装备(除了你在赛局中捡到的),光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式,玩家在加入海盗主题的预赛大厅区域前,可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹,《巨龙崛起》和《魔兽世界:巫妖王之怒 经典版》的玩家都可以获得奖励。