uniApp editor微信滑動問題

 uniapp 小程序在微信下會出現相似下拉問題

 

解決方法是在app.vue 的頁面onLaunch方法內添加禁止下滑方法

 

this.$nextTick(() => {
     document.body.addEventListener("touchmove", this.addBodyTouchEvent, {
       passive: false
     });
   });

問題解決後在uniApp的editor組件內沒法滑動

 

解決方法

 

 

data內添加這兩個值

 

 

添加touchstart和touchend方法手動寫滑動效果

touchstart(e) {
     this.previewScrollTop = e.touches[0].pageY;
   },
   touchend(e) {
     let distance = e.changedTouches[0].pageY - this.previewScrollTop;
     if (Math.abs(distance) <= 10) {
       return false;
     }
     //距離過短時不滾動
     let dom = this.$refs.editor.$el.getElementsByClassName("ql-editor")[0],
       maxHeight = Math.max(0, dom.scrollHeight - dom.clientHeight), //最大高度範圍
       tempData = this.scrollTop + (distance >= 0 ? -60 : 60); //計算應該高度數據
     if (tempData >= maxHeight) {
       this.scrollTop = maxHeight;
       dom.scrollTop = this.scrollTop;
     } else if (tempData <= 0) {
       this.scrollTop = 0;
       dom.scrollTop = this.scrollTop;
     } else {
       this.scrollTop = tempData;
dom.scrollTop = this.scrollTop;
     }
   }

此時滑動效果出現。可是滑動出不流暢。

本想着寫動畫過渡效果。可是。這個滑動是用dom.scrollTop屬性作的。該屬性不屬於css屬性沒法使用css過渡動畫

因此寫了一個js方法。

/**
* 動畫垂直滾動到頁面指定位置
* @param {  } dom element對象
* @param { Number } currentY 當前位置
* @param { Number } targetY 目標位置
*/
export function scrollAnimation(dom, currentY, targetY) {
 // 計算須要移動的距離
 let needScrollTop = targetY - currentY;
 let _currentY = currentY;
 setTimeout(() => {
   // 一次調用滑動幀數，每次調用會不同
   const dist = Math.ceil(needScrollTop / 10);
   _currentY += dist;
   dom.scrollTo(_currentY, currentY);
   // 若是移動幅度小於十個像素，直接移動，不然遞歸調用，實現動畫效果
   if (needScrollTop > 10 || needScrollTop < -10) {
     scrollAnimation(dom, _currentY, targetY);
   } else {
     dom.scrollTo(_currentY, targetY);
   }
 }, 1);
}

從新調用

touchend(e) {
     let distance = e.changedTouches[0].pageY - this.previewScrollTop;
     if (Math.abs(distance) <= 10) {
       return false;
     }
     //距離過短時不滾動
     let dom = this.$refs.editor.$el.getElementsByClassName("ql-editor")[0],
       maxHeight = Math.max(0, dom.scrollHeight - dom.clientHeight), //最大高度範圍
       tempData = this.scrollTop + (distance >= 0 ? -60 : 60); //計算應該高度數據
     if (tempData >= maxHeight) {
       this.scrollTop = maxHeight;
       dom.scrollTop = this.scrollTop;
     } else if (tempData <= 0) {
       this.scrollTop = 0;
       dom.scrollTop = this.scrollTop;
     } else {
       this.scrollTop = tempData;
       scrollAnimation(dom, 0, this.scrollTop);
     }
   }。

備註一下：

這個問題原本打算用Transform：translateY(y)屬性來寫的，實際上也作了。

可是在作了以後發現

let dom = this.$refs.editor.$el.getElementsByClassName("ql-editor")[0]；

 

 

 這裏選中的元素是紅框下面的元素。在作偏移的時候整個元素偏移。文檔沒顯示徹底可是下方確有一大塊空白。當時也沒截圖。記錄一下本身踩得坑。