最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

微信小程序拖拽排序列表的示例代碼

 更新時(shí)間:2020年07月08日 09:25:58   作者:Simorel  
這篇文章主要介紹了微信小程序拖拽排序列表的示例代碼,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

拖拽排序列表

思路

界面分為兩層:

  • 底層,正常列表展示,拖拽的時(shí)候不做處理(大牛直接加了動(dòng)畫(huà),原諒我技藝不精,還沒(méi)實(shí)現(xiàn))
  • 頂層,movable-view組件,不長(zhǎng)按不展示,之后長(zhǎng)按才展示,且沒(méi)有點(diǎn)擊事件。

事件

主要監(jiān)聽(tīng):longpress , touchmove , touchend 三個(gè)事件

longpress

保障長(zhǎng)按才有效,并設(shè)定許多其他值。

touchmove

滑動(dòng)的時(shí)候觸發(fā)

  • 判斷是否需要滑動(dòng)頁(yè)面,因?yàn)?movable-area組件 滑動(dòng)事件被catch掉,無(wú)法滑動(dòng);
  • 記錄滑動(dòng)經(jīng)過(guò)的項(xiàng),在頁(yè)面【底層】設(shè)置經(jīng)過(guò)項(xiàng)為其他樣式(算是補(bǔ)足沒(méi)有滑動(dòng)動(dòng)畫(huà)的缺陷吧,不需要可以刪除 lastTarget字段)。

touchend

滑動(dòng)結(jié)束時(shí)觸發(fā)

獲取目標(biāo)節(jié)點(diǎn)索引,將初始拖拽節(jié)點(diǎn)移動(dòng)至目標(biāo)節(jié)點(diǎn),其中的關(guān)鍵代碼為:

list.splice(futureIndex, 0, list.splice(dragElementIndex, 1)[0]); // 移動(dòng)位置

(這行代碼參考了Vue.Draggable中一行代碼)

將其他設(shè)置置空

代碼

代碼片段

碼云倉(cāng)庫(kù) 歡迎star、提問(wèn)題。鞋鞋

示例

// 初始點(diǎn)擊
  stratBtn(e){
    let index = http.dataIndex(e)[0];//獲取當(dāng)前點(diǎn)擊的列表
    let busArr = this.data.busArr;//獲取列表中的所有數(shù)組
    let pageY = Number(e.touches[0].pageY);//初始點(diǎn)擊的Y點(diǎn)坐標(biāo)
    let busActObj = busArr[index];//單獨(dú)記錄當(dāng)前點(diǎn)擊的數(shù)據(jù)
    this.setData({ //保存數(shù)據(jù)
      sPageY:pageY,
      mPageY:pageY,
      moveSortBox:true,
      clickIndex:index,
      busActObj:busActObj
    })
  },
  // 開(kāi)始移動(dòng)
  moveBtn(e){
    let pageY = Number(e.touches[0].pageY); //記錄移動(dòng)點(diǎn)的坐標(biāo)
    this.setData({ //記錄
      mPageY:pageY,
      moveSortBox:true,
    })
  },
  // 結(jié)束點(diǎn)擊
  endBtn(e){
    let sPageY = Number(this.data.sPageY); //獲取初始點(diǎn)的坐標(biāo)
    let busArr = this.data.busArr; //獲取數(shù)組
    let pageY = Number(e.changedTouches[0].pageY);//獲取結(jié)束點(diǎn)的坐標(biāo)
    let clickIndex = Number(this.data.clickIndex); //初始點(diǎn)的位置
    let busActObj = this.data.busActObj;//獲取初始點(diǎn)的列表單獨(dú)數(shù)據(jù)
    let position = parseInt((pageY-sPageY)/90)+(clickIndex+1); //每個(gè)盒子固定高度90px (結(jié)束點(diǎn)-初始點(diǎn)/盒子高度)+(初始點(diǎn)的位置+1)可以得到移動(dòng)的位置
    busArr.splice(clickIndex,1);//刪除初始數(shù)據(jù)
    busArr.splice(position,0,busActObj);//在移動(dòng)點(diǎn)重新插入數(shù)據(jù)
    this.setData({//保存
      moveSortBox:false,
      busArr:busArr
    })
  },

參考鏈接

[1] SortableJS Vue.Draggable

[2] SortableJS Sortable

[3] SortableJS演示示例 Vue.Draggable

[4] 好想再胖十斤 25行代碼解決小程序的拖拽排序

到此這篇關(guān)于微信小程序拖拽排序列表的示例代碼的文章就介紹到這了,更多相關(guān)微信小程序拖拽排序列表內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

最新評(píng)論

石泉县| 耿马| 阳信县| 陕西省| 朔州市| 康马县| 寿阳县| 山东省| 广水市| 万荣县| 二连浩特市| 宜丰县| 宜都市| 太谷县| 财经| 寿阳县| 普兰店市| 和政县| 阿巴嘎旗| 云梦县| 荆门市| 吉安市| 天长市| 新平| 普安县| 龙口市| 玉屏| 乡城县| 葫芦岛市| 石泉县| 调兵山市| 彭州市| 右玉县| 安陆市| 旅游| 武清区| 奉新县| 保靖县| 晋中市| 仪征市| 湛江市|