這篇文章主要講解了微信小程序如何實(shí)現(xiàn)手指拖動(dòng)選項(xiàng)排序,內(nèi)容清晰明了,對(duì)此有興趣的小伙伴可以學(xué)習(xí)一下,相信大家閱讀完之后會(huì)有幫助。
從網(wǎng)站建設(shè)到定制行業(yè)解決方案,為提供成都做網(wǎng)站、成都網(wǎng)站建設(shè)服務(wù)體系,各種行業(yè)企業(yè)客戶(hù)提供網(wǎng)站建設(shè)解決方案,助力業(yè)務(wù)快速發(fā)展。創(chuàng)新互聯(lián)將不斷加快創(chuàng)新步伐,提供優(yōu)質(zhì)的建站服務(wù)。
效果:
wxml:
<view> <view class="dileititle">手指移動(dòng)選項(xiàng)排序</view> <view id="movebox"> <block wx:for="{{list}}" wx:key="index"> <view catchtouchmove="listitemmove" catchtouchend="listitemmove" data-index="{{index}}" class="flex1 dileiitemlist" id="movelist{{index}}" > <view class="{{moveoutindex==index?'changemovenow':''}}" ></view> <view class="ranknum">{{index+1}}</view> <view class="flex1" > <view >{{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;}
看完上述內(nèi)容,是不是對(duì)微信小程序如何實(shí)現(xiàn)手指拖動(dòng)選項(xiàng)排序有進(jìn)一步的了解,如果還想學(xué)習(xí)更多內(nèi)容,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
新聞標(biāo)題:微信小程序如何實(shí)現(xiàn)手指拖動(dòng)選項(xiàng)排序
本文URL:http://www.muchs.cn/article49/jiddeh.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供服務(wù)器托管、網(wǎng)站營(yíng)銷(xiāo)、定制開(kāi)發(fā)、Google、品牌網(wǎng)站制作、網(wǎng)站導(dǎo)航
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)