czh的踩坑筆記 - 微信小程序 - 拖拽操作demo

拖拽功能簡介

一般稱拖拽是鼠標（手指）單點點擊後執行移動（滑動）操作，程序主動計算滑動區域和位置，頁面及時響應操作的一個功能。
重點一 - 需要動畫響應及時
重點二 - 需要頁面展示
誰還不知道啊

源碼自提

https://github.com/czhmisaka/wxDemo_drag.git

源碼講解

1. 使用了wxs，按照官方解釋，應該能爲手機用戶提供更好的性能。（ios端可以有2~20倍提升，安卓端無差異）
2. 控制觸摸穿透，避免組件在操作過程中對外的影響力，這邊用的是catch:touchmove綁定中的一個特性，即參數（isMoving）中爲空字符串時,catch事件會失效。
3. 動畫效果模擬用的時 transform，這個主要時爲了避免修改dom樹的排序。

touchEnd事件返回移動距離

元素捕捉longtap事件

修改isMoving狀態

touch_move事件轉爲可響應狀態

頁面響應動畫

記錄觸摸修改距離

回調函數通知父級頁面提供修改位置的依據

wxs文件源碼

var moveY = 0,
    y = 0;
var lock = false

// 開始移動
function touch_start(e, ownerInstance) {
   
   
    moveY = e.changedTouches[0].clientY
    ownerInstance.callMethod('changeMovingStatus', true)
    lock = true
}

// 移動中
function touch_move(e) {
   
   
    if (!lock) return
    y = e.changedTouches[0].clientY - moveY
    e.instance.setStyle({
   
   
        transform: 'translateY(' + y + 'px)',
        'z-index': 100
    })
}

// 移動位置結束
function touch_end(e, ownerInstance) {
   
   
    lock = false
    e.instance.setStyle({
   
   
        'z-index': 1
    })
    ownerInstance.callMethod('touchEnd', y)
}


module.exports = {
   
   
    touch_start: touch_start,
    touch_move: touch_move,
    touch_end: touch_end
}