關(guān)于uniApp editor微信滑動問題
更新時間：2021年01月15日 09:56:38 作者：辛夷不改年年色
這篇文章主要介紹了關(guān)于uniApp editor微信滑動問題,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
uniapp 小程序在微信下會出現(xiàn)類似下拉問題
解決方法是在app.vue 的頁面onLaunch方法內(nèi)添加禁止下滑方法
this.$nextTick(() => {
document.body.addEventListener("touchmove", this.addBodyTouchEvent, {
passive: false
});
});
問題解決后在uniApp的editor組件內(nèi)無法滑動
解決方法
data內(nèi)添加這兩個值
添加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); //計算應(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;
}
}
此時滑動效果出現(xiàn)。但是滑動出不流暢。
本想著寫動畫過渡效果。但是。這個滑動是用dom.scrollTop屬性做的。該屬性不屬于css屬性無法使用css過渡動畫
所以寫了一個js方法。
/**
* 動畫垂直滾動到頁面指定位置
* @param { } dom element對象
* @param { Number } currentY 當(dāng)前位置
* @param { Number } targetY 目標(biāo)位置
*/
export function scrollAnimation(dom, currentY, targetY) {
// 計算需要移動的距離
let needScrollTop = targetY - currentY;
let _currentY = currentY;
setTimeout(() => {
// 一次調(diào)用滑動幀數(shù)，每次調(diào)用會不一樣
const dist = Math.ceil(needScrollTop / 10);
_currentY += dist;
dom.scrollTo(_currentY, currentY);
// 如果移動幅度小于十個像素，直接移動，否則遞歸調(diào)用，實現(xiàn)動畫效果
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;
}
//距離太短時不滾動
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); //計算應(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);
}
}
備注一下：
這個問題本來打算用Transform：translateY(y)屬性來寫的，實際上也做了。
但是在做了之后發(fā)現(xiàn)
let dom = this.$refs.editor.$el.getElementsByClassName("ql-editor")[0]；
這里選中的元素是紅框下面的元素。在做偏移的時候整個元素偏移。文檔沒顯示完全但是下方確有一大塊空白。當(dāng)時也沒截圖。記錄一下自己踩得坑。
到此這篇關(guān)于關(guān)于uniApp editor微信滑動問題的文章就介紹到這了,更多相關(guān)uniApp editor微信滑動內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
今天小編就為大家分享一篇laravel實現(xiàn)中文和英語互相切換的例子，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
這篇文章主要給大家介紹了關(guān)于微信小程序?qū)W習(xí)之自定義滾動彈窗的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
jquery+css3實現(xiàn)網(wǎng)頁背景花瓣隨機(jī)飄落特效
在qq空間可以自定義一些插件，裝飾空間，大家通常就是復(fù)制代碼到空間粘貼，會實現(xiàn)非常美觀的效果，有的會隨機(jī)飄落一些花瓣，那么這種效果用代碼怎么實現(xiàn)的呢，下面小編給大家詳解jquery實現(xiàn)網(wǎng)頁背景花瓣隨機(jī)飄落特效，需要的朋友可以參考下2015-08-08
JS作用域閉包、預(yù)解釋和this關(guān)鍵字綜合實例解析
這篇文章主要介紹了JS作用域閉包、預(yù)解釋和this關(guān)鍵字,結(jié)合實例形式分析了javascript作用域閉包、預(yù)解釋和this關(guān)鍵字在具體使用過程中的操作技巧與注意事項,需要的朋友可以參考下2016-12-12
這篇文章主要介紹了js中的內(nèi)部屬性與delete操作符的相關(guān)資料,需要的朋友可以參考下2015-08-08
這篇文章主要介紹了JS vs TS二分法博弈對比分析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2024-01-01
Javascript快速實現(xiàn)瀏覽器系統(tǒng)通知
這篇文章給大家介紹了Javascript快速實現(xiàn)瀏覽器系統(tǒng)通知的方法，非常不錯，具有參考借鑒價值，需要的朋友參考下吧2017-08-08
本篇文章主要介紹了淺談PDF.js使用心得，pdf.js 是一個技術(shù)原型主要用于在 HTML5 平臺上展示 PDF 文檔，無需任何本地技術(shù)支持。非常具有實用價值，需要的朋友可以參考下2018-06-06
JavaScript給url網(wǎng)址進(jìn)行encode編碼的方法
這篇文章主要介紹了JavaScript給url網(wǎng)址進(jìn)行encode編碼的方法,實例分析了javascript中encodeURIComponent函數(shù)的使用技巧,需要的朋友可以參考下2015-03-03
JS函數(shù)動態(tài)傳遞參數(shù)的方法分析【基于arguments對象】
這篇文章主要介紹了JS函數(shù)動態(tài)傳遞參數(shù)的方法,結(jié)合實例形式分析了javascript通過arguments對象獲取傳遞參數(shù)的相關(guān)操作技巧,需要的朋友可以參考下2019-06-06