資訊專欄INFORMATION COLUMN
摘要：問題最近在用寫端項目時發(fā)現(xiàn)個問題，的橫向滑動和瀏覽器的橫向滑動翻頁效果出現(xiàn)了沖突。思路我們雖然不能禁止瀏覽器的跳轉(zhuǎn)操作，但是我們可以阻止滑動元素觸發(fā)的所有默認事件啊。
問題：
最近在用vue寫m端項目時發(fā)現(xiàn)個問題，better-scroll的橫向滑動和UC瀏覽器的橫向滑動翻頁效果出現(xiàn)了沖突。
簡單的說，就是滑動scroll組件的時候也會觸發(fā)UC瀏覽器自帶的翻頁效果。
為此在網(wǎng)上找了不少資料，目前網(wǎng)上出現(xiàn)最多的解決方案是使用history.pushState()，使用監(jiān)聽事件，監(jiān)聽到跳頁事件(popstate)時，手動填充路徑為當前頁面地址。
示例代碼如下（引用）：
history.pushState(null, null, document.URL);
window.addEventListener("popstate", function () {
history.pushState(null, null, document.URL);
});
但是我個人在使用的時候發(fā)現(xiàn)了另外一個問題，這個代碼不太符合我的需求場景，我只需要在scroll橫向滑動禁止翻頁，這個代碼相當于將所有跳頁操作禁止了。
于是我在這個基礎(chǔ)上做了些一點改動，首先監(jiān)聽滑塊的滑動，然后在滑塊滑動的時候再去調(diào)用history.pushState，這樣在scroll滑動的時候就阻止了UC瀏覽器的默認翻頁。但是這樣又引發(fā)另外一個問題，瀏覽器history的前進和后退是依靠的是瀏覽歷史的隊列，調(diào)用 history.pushState(null, null, document.URL) 就相當于往當前隊列插入了一個當前頁的歷史記錄。這樣的話，每次使用瀏覽器自帶的前進后退功能的時候都需要連續(xù)觸發(fā)很多次才能跳出當前頁，這樣對于用戶來說顯然是不合理的。
我們雖然不能禁止瀏覽器的跳轉(zhuǎn)操作，但是我們可以阻止滑動元素觸發(fā)的所有默認事件啊。然后只需要判斷在什么時候去阻止默認事件以及恢復默認事件就好了。然后也不會影響點擊等操作。
代碼（基于vue）：往滑塊的html結(jié)點上掛載觸摸事件
往data上掛載數(shù)據(jù)
data() {
return {
isTouchMove: true,
startX: 0,
startY: 0,
endX: 0,
endY: 0,
isPreventDefault:false
};
}
mounted上掛載觸摸執(zhí)行事件
methods: {
touchStart(e){
// 獲取初始位置
this.startX = e.touches[0].clientX;
this.startY = e.touches[0].clientY;
// 記錄是否進入過touchMove
this.isTouchMove = true;
},
touchMove(e){
// 如果是UC瀏覽器 并且第一次滑動執(zhí)行時
if (this.isTouchMove && this.isUC()) {
this.endX = e.touches[0].clientX;
this.endY = e.touches[0].clientY;
// 判斷滑動方向 橫向 | 垂直
if (Math.abs(this.endX - this.startX) > Math.abs(this.endY - this.startY)) {
// 如果滑動為橫向，那么禁止所有默認事件
// 必要！否則會影響縱向頁面的滾動
e.preventDefault()
// 用來輔助判斷是否已經(jīng)禁止過默認事件
this.isPreventDefault = true;
}
// 關(guān)閉處理邏輯 touchMove連續(xù)觸發(fā)就沒必要再進來了
this.isTouchMove = false;
}
},
touchEnd(e){
// 如果已經(jīng)禁止過默認事件 那么恢復默認事件
if(this.isPreventDefault && this.isUC() && e.preventDefault ){
// 恢復默認事件
e.preventDefault()
this.isPreventDefault = false;
}
},
isUC(){
// 判斷是否UC瀏覽器
return navigator.appVersion.indexOf("baidubrowser") !== -1
}
}
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/99825.html
摘要：當設(shè)置為會派發(fā)一個事件，我們會給派發(fā)的參數(shù)加一個私有屬性，值為。但是自定義的事件會阻止一些原生組件的行為。 安裝npm install better-scroll --save引入import BScroll from better-scroll基礎(chǔ)better-scroll支持多參數(shù)配置，可以在初始化的時候傳入第二個參數(shù)let scroll = new BScroll(.wrappe...
摘要：去年年底自己搭了一個在移動端的開發(fā)框架，感覺體驗不是很好。路由懶加載首頁終于寫完了，以上這些就是我在移動端體驗優(yōu)化的實戰(zhàn)。去年年底自己搭了一個vue在移動端的開發(fā)框架，感覺體驗不是很好。上個星期又要做移動端的項目了。所以我花了兩天時間對之前的那個開發(fā)框架做了以下優(yōu)化 自定義vuex-plugins-loading 路由切換動畫 + keep alive 動態(tài)管理緩存組件 better-sc...
摘要：的組件化功能可謂是它的一大亮點，通過將頁面上某一組件的代碼放入一個的文件中進行管理可以大大提高代碼的維護性。項目中未做移動端適配，在不同屏幕手機上打開，可能用戶體驗會差些 一、項目展示： showImg(https://user-gold-cdn.xitu.io/2018/5/18/1637183ad14a696a?w=372&h=791&f=gif&s=2408442); 注意：如果...
一、 基礎(chǔ)實現(xiàn) （1）功能 對 better-scroll 插件的基本封裝，實現(xiàn)移動端的滾動 （2）實現(xiàn) 引入 better-scroll props probeType: better-scroll 配置項之一 （1）取值： 1 滾動的時候會派發(fā) scroll 事件，會截流。 2 滾動的時候?qū)崟r派發(fā) scroll 事件，不會截流。 3 除了實時派發(fā) scroll 事件，在 swipe 的情況...
一、 基礎(chǔ)實現(xiàn) （1）功能 對 better-scroll 插件的基本封裝，實現(xiàn)移動端的滾動 （2）實現(xiàn) 引入 better-scroll props probeType: better-scroll 配置項之一 （1）取值： 1 滾動的時候會派發(fā) scroll 事件，會截流。 2 滾動的時候?qū)崟r派發(fā) scroll 事件，不會截流。 3 除了實時派發(fā) scroll 事件，在 swipe 的情況...
閱讀 2087·2023-04-26 01:44
閱讀 1392·2021-11-12 10:34
閱讀 1724·2021-09-09 09:33
閱讀 1839·2019-08-30 15:44
閱讀 2980·2019-08-30 13:49
閱讀 2280·2019-08-29 15:26
閱讀 1047·2019-08-26 13:30
閱讀 1560·2019-08-23 18:15
