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

更新時間：2020年07月08日 09:25:58 作者：Simorel

這篇文章主要介紹了微信小程序拖拽排序列表的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

拖拽排序列表

思路

界面分為兩層：

底層，正常列表展示，拖拽的時候不做處理（大牛直接加了動畫，原諒我技藝不精，還沒實現(xiàn)）
頂層，movable-view組件，不長按不展示，之后長按才展示，且沒有點擊事件。

事件

主要監(jiān)聽：longpress , touchmove , touchend 三個事件

longpress

保障長按才有效，并設定許多其他值。

touchmove

滑動的時候觸發(fā)

判斷是否需要滑動頁面，因為 movable-area組件滑動事件被catch掉，無法滑動；
記錄滑動經(jīng)過的項，在頁面【底層】設置經(jīng)過項為其他樣式（算是補足沒有滑動動畫的缺陷吧，不需要可以刪除 lastTarget字段）。

touchend

滑動結(jié)束時觸發(fā)

獲取目標節(jié)點索引，將初始拖拽節(jié)點移動至目標節(jié)點，其中的關(guān)鍵代碼為：

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

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

將其他設置置空

代碼

代碼片段

碼云倉庫歡迎star、提問題。鞋鞋

示例

// 初始點擊
  stratBtn(e){
    let index = http.dataIndex(e)[0];//獲取當前點擊的列表
    let busArr = this.data.busArr;//獲取列表中的所有數(shù)組
    let pageY = Number(e.touches[0].pageY);//初始點擊的Y點坐標
    let busActObj = busArr[index];//單獨記錄當前點擊的數(shù)據(jù)
    this.setData({ //保存數(shù)據(jù)
      sPageY:pageY,
      mPageY:pageY,
      moveSortBox:true,
      clickIndex:index,
      busActObj:busActObj
    })
  },
  // 開始移動
  moveBtn(e){
    let pageY = Number(e.touches[0].pageY); //記錄移動點的坐標
    this.setData({ //記錄
      mPageY:pageY,
      moveSortBox:true,
    })
  },
  // 結(jié)束點擊
  endBtn(e){
    let sPageY = Number(this.data.sPageY); //獲取初始點的坐標
    let busArr = this.data.busArr; //獲取數(shù)組
    let pageY = Number(e.changedTouches[0].pageY);//獲取結(jié)束點的坐標
    let clickIndex = Number(this.data.clickIndex); //初始點的位置
    let busActObj = this.data.busActObj;//獲取初始點的列表單獨數(shù)據(jù)
    let position = parseInt((pageY-sPageY)/90)+(clickIndex+1); //每個盒子固定高度90px (結(jié)束點-初始點/盒子高度)+(初始點的位置+1)可以得到移動的位置
    busArr.splice(clickIndex,1);//刪除初始數(shù)據(jù)
    busArr.splice(position,0,busActObj);//在移動點重新插入數(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)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: