欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間: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)文章

  • javascript垃圾收集機制的原理分析

    javascript垃圾收集機制的原理分析

    javascript具有自動垃圾收集機制,執(zhí)行環(huán)境會負(fù)責(zé)管理代碼執(zhí)行過程中使用的內(nèi)存。在編寫javascript程序時,開發(fā)人員不用再關(guān)心內(nèi)存使用問題,所需內(nèi)存的分配以及無用內(nèi)存的回收完全實現(xiàn)了自動管理。本文將詳細(xì)介紹javascript的垃圾收集機制
    2016-12-12
  • JavaScript中的style.cssText使用教程

    JavaScript中的style.cssText使用教程

    這篇文章主要介紹了JavaScript中的cssText是什么,style.cssText使用教程,cssText返回值是什么,需要的朋友可以參考下
    2014-11-11
  • 原生JS實現(xiàn)的輪播圖功能詳解

    原生JS實現(xiàn)的輪播圖功能詳解

    這篇文章主要介紹了原生JS實現(xiàn)的輪播圖功能,結(jié)合實例形式分析了javascript實現(xiàn)輪播圖的原理、操作技巧與相關(guān)注意事項,需要的朋友可以參考下
    2018-08-08
  • javascript日期對象格式化為字符串的實現(xiàn)方法

    javascript日期對象格式化為字符串的實現(xiàn)方法

    本篇文章主要是對javascript日期對象格式化為字符串的實現(xiàn)方法進(jìn)行了詳細(xì)的介紹,需要的朋友可以過來參考下,希望對大家有所幫助
    2014-01-01
  • JavaScript使用performance實現(xiàn)查看內(nèi)存

    JavaScript使用performance實現(xiàn)查看內(nèi)存

    這篇文章主要為大家詳細(xì)介紹了JavaScript如何使用performance實現(xiàn)查看內(nèi)存,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
    2024-03-03
  • javascript中字符串拼接詳解

    javascript中字符串拼接詳解

    字符串拼接是所有程序設(shè)計語言都需要的操作。當(dāng)拼接結(jié)果較長時,如何保證效率就成為一個很重要的問題。本文介紹的是Javascript中的字符串拼接,希望對你有幫助,一起來看。
    2014-09-09
  • js+css實現(xiàn)的圓角邊框TAB選項卡滑動門代碼分享(2款)

    js+css實現(xiàn)的圓角邊框TAB選項卡滑動門代碼分享(2款)

    這篇文章主要為大家詳細(xì)介紹了兩種js+css實現(xiàn)的圓角邊框TAB選項卡滑動門效果,很實用的代碼,推薦給大家,有需要的小伙伴可以參考下
    2015-08-08
  • 淺談JS中的常用選擇器及屬性、方法的調(diào)用

    淺談JS中的常用選擇器及屬性、方法的調(diào)用

    下面小編就為大家?guī)硪黄獪\談JS中的常用選擇器及屬性、方法的調(diào)用。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-07-07
  • js 控制圖片大小核心講解

    js 控制圖片大小核心講解

    控制圖片大小的方法有很多,在本文將為大家詳細(xì)介紹下使用js實現(xiàn)縮放圖片,核心代碼如下,感興趣的朋友可以參考下
    2013-10-10
  • Json實現(xiàn)傳值到后臺代碼實例

    Json實現(xiàn)傳值到后臺代碼實例

    這篇文章主要介紹了Json實現(xiàn)傳值到后臺代碼實例,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
    2020-06-06

最新評論