快捷導(dǎo)航

關(guān)于uniApp editor微信滑動(dòng)問(wèn)題

更新時(shí)間：2021年01月15日 09:56:38 作者：辛夷不改年年色

這篇文章主要介紹了關(guān)于uniApp editor微信滑動(dòng)問(wèn)題,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

uniapp 小程序在微信下會(huì)出現(xiàn)類似下拉問(wèn)題

解決方法是在app.vue 的頁(yè)面onLaunch方法內(nèi)添加禁止下滑方法

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

問(wèn)題解決后在uniApp的editor組件內(nèi)無(wú)法滑動(dòng)

解決方法

data內(nèi)添加這兩個(gè)值

添加touchstart和touchend方法手動(dòng)寫滑動(dòng)效果

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;
}
//距離太短時(shí)不滾動(dòng)
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); //計(jì)算應(yīng)該高度數(shù)據(jù)
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;
}
}

此時(shí)滑動(dòng)效果出現(xiàn)。但是滑動(dòng)出不流暢。

本想著寫動(dòng)畫過(guò)渡效果。但是。這個(gè)滑動(dòng)是用dom.scrollTop屬性做的。該屬性不屬于css屬性無(wú)法使用css過(guò)渡動(dòng)畫

所以寫了一個(gè)js方法。

/**
* 動(dòng)畫垂直滾動(dòng)到頁(yè)面指定位置
* @param { } dom element對(duì)象
* @param { Number } currentY 當(dāng)前位置
* @param { Number } targetY 目標(biāo)位置
*/
export function scrollAnimation(dom, currentY, targetY) {
// 計(jì)算需要移動(dòng)的距離
let needScrollTop = targetY - currentY;
let _currentY = currentY;
setTimeout(() => {
// 一次調(diào)用滑動(dòng)幀數(shù)，每次調(diào)用會(huì)不一樣
const dist = Math.ceil(needScrollTop / 10);
_currentY += dist;
dom.scrollTo(_currentY, currentY);
// 如果移動(dòng)幅度小于十個(gè)像素，直接移動(dòng)，否則遞歸調(diào)用，實(shí)現(xiàn)動(dòng)畫效果
if (needScrollTop > 10 || needScrollTop < -10) {
scrollAnimation(dom, _currentY, targetY);
} else {
dom.scrollTo(_currentY, targetY);
}
}, 1);
}

重新調(diào)用

touchend(e) {
let distance = e.changedTouches[0].pageY - this.previewScrollTop;
if (Math.abs(distance) <= 10) {
return false;
}
//距離太短時(shí)不滾動(dòng)
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); //計(jì)算應(yīng)該高度數(shù)據(jù)
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);
}
}

備注一下：

這個(gè)問(wèn)題本來(lái)打算用Transform：translateY(y)屬性來(lái)寫的，實(shí)際上也做了。

但是在做了之后發(fā)現(xiàn)

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

這里選中的元素是紅框下面的元素。在做偏移的時(shí)候整個(gè)元素偏移。文檔沒(méi)顯示完全但是下方確有一大塊空白。當(dāng)時(shí)也沒(méi)截圖。記錄一下自己踩得坑。

到此這篇關(guān)于關(guān)于uniApp editor微信滑動(dòng)問(wèn)題的文章就介紹到這了,更多相關(guān)uniApp editor微信滑動(dòng)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: