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

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

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

拖拽排序列表

思路

界面分為兩層:

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

事件

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

longpress

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

touchmove

滑動的時候觸發(fā)

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

touchend

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

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

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

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

將其他設(shè)置置空

代碼

代碼片段

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

示例

// 初始點擊
  stratBtn(e){
    let index = http.dataIndex(e)[0];//獲取當(dāng)前點擊的列表
    let busArr = this.data.busArr;//獲取列表中的所有數(shù)組
    let pageY = Number(e.touches[0].pageY);//初始點擊的Y點坐標(biāo)
    let busActObj = busArr[index];//單獨記錄當(dāng)前點擊的數(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); //記錄移動點的坐標(biāo)
    this.setData({ //記錄
      mPageY:pageY,
      moveSortBox:true,
    })
  },
  // 結(jié)束點擊
  endBtn(e){
    let sPageY = Number(this.data.sPageY); //獲取初始點的坐標(biāo)
    let busArr = this.data.busArr; //獲取數(shù)組
    let pageY = Number(e.changedTouches[0].pageY);//獲取結(jié)束點的坐標(biāo)
    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)文章希望大家以后多多支持腳本之家!

相關(guān)文章

最新評論

三亚市| 南和县| 福建省| 桑植县| 大姚县| 新兴县| 利川市| 景洪市| 安平县| 舒城县| 宜兰市| 嘉荫县| 偏关县| 藁城市| 紫阳县| 东兴市| 新乡市| 海口市| 措美县| 昌吉市| 乌兰县| 泰州市| 开化县| 池州市| 全椒县| 四平市| 洞头县| 建湖县| 靖西县| 桃源县| 福州市| 灵石县| 临海市| 积石山| 锡林浩特市| 北海市| 兴安县| 宜昌市| 同德县| 酉阳| 宽城|