資訊專欄INFORMATION COLUMN
摘要：讓用戶可以滾動(dòng)頁(yè)面。事件中拿到想要的后瀏覽器已經(jīng)隱藏地址欄和工具欄，放開(kāi)插件滾動(dòng)。發(fā)現(xiàn)派發(fā)的方法在父組件中監(jiān)聽(tīng)后獲取位置參數(shù)的效果不太好必須要手指貼著滑動(dòng)才可以這個(gè)設(shè)置為可以實(shí)時(shí)派發(fā)滾動(dòng)事件和位置參數(shù)其他坑點(diǎn)待發(fā)現(xiàn)歡迎大佬一起交流
寫(xiě)在前面
由于最近一個(gè)移動(dòng)端項(xiàng)目中許多地方有滾動(dòng)需求, 橫向,縱向的都有,所以就基于better-scroll封裝了一個(gè)通用的滾動(dòng)組件,期間也踩了一些坑,有時(shí)候會(huì)滾動(dòng)失效,初始化的時(shí)候就不能滾動(dòng)等等...
better-scroll地址: https://ustbhuangyi.github.io...
當(dāng)然, 我們還可以添加更多的配置功能, 這個(gè)需要依據(jù)你自己的需求來(lái)了,詳情配置去better-scroll官網(wǎng)看看
使用scroll組件 縱向滾動(dòng)// 下面是樣式 .main { width: 100%; height: calc(100vh - 52px); background-color: #f7f8fa; .main-content { height: 100%; overflow: hidden; position: relative; } } 添加需要滾動(dòng)的DOM元素: 如ul>li等, 或者多個(gè)子組件
縱向滾動(dòng)主要是要注意的是: scroll下的第一個(gè)子元素，它的高度需要讓內(nèi)容來(lái)?yè)伍_(kāi)!!! 否則無(wú)法滾動(dòng)
圖片中已經(jīng)標(biāo)識(shí)出來(lái)了...
// 樣式
橫向滾動(dòng)下我們傳入配置值就行了; 這里主要是注意樣式的書(shū)寫(xiě)! 也就是scroll下的第一個(gè)子元素的寬度要由內(nèi)容撐寬才可以...,代碼塊中也標(biāo)注出來(lái)了.
踩過(guò)的坑點(diǎn)1.純靜態(tài)頁(yè)面的滾動(dòng)
舉個(gè)栗子,我現(xiàn)在寫(xiě)了一個(gè)彈出層,就是靜態(tài)數(shù)據(jù)渲染,但是需求也需要滾動(dòng),因?yàn)閱雾?yè)可能顯示不下, 雖說(shuō)better-scroll的原理是第一個(gè)子元素超出父盒子就可以實(shí)現(xiàn)滾動(dòng)了, 彈出層只有在點(diǎn)擊彈窗的時(shí)候才會(huì)渲染,所以是無(wú)法滾動(dòng)的, 在彈窗出來(lái)后再手動(dòng)刷新scroll組件; 這里我們就可以通過(guò)那個(gè)data屬性搞事情了,每次點(diǎn)擊彈窗后,往data中丟個(gè)數(shù)據(jù),這樣會(huì)觸發(fā)scroll組件的watch, 然后手動(dòng)刷新,就可以實(shí)現(xiàn)滾動(dòng)了...
// 部分代碼示例// 側(cè)邊欄彈出層組件 methods: { showPopup() { this.onOff.push("1"), // 刷新scroll組件 this.$refs.aside.show(); } }
2.scroll容器數(shù)據(jù)變化導(dǎo)致無(wú)法正常滾動(dòng), 可能情況是:
- 初始化的時(shí)候就有問(wèn)題,去檢查一下第一個(gè)子元素高度||寬度是否是由其子元素?fù)伍_(kāi)的
- 接口數(shù)據(jù)還未請(qǐng)求回來(lái)就初始化了, 比如圖片,此時(shí)初始化就沒(méi)算上圖片的高度,
這時(shí)候就需要手動(dòng)調(diào)用this.$refs.scroll.refresh()來(lái)刷新scroll組件, 矯正滾動(dòng)高度
- 頁(yè)面容器設(shè)為100vh后發(fā)現(xiàn), 無(wú)法觸發(fā)上滑隱藏URL框的需求;
消除手機(jī)URL欄: 需要滿足列表的高度需要設(shè)置固定,外層盒子要大于手機(jī)視口高度,滑動(dòng)時(shí)才能消除url地址欄
解決：監(jiān)聽(tīng)頁(yè)面路由事件beforeRouteEnter,先禁止掉scroll插件的滾動(dòng)。
讓用戶可以滾動(dòng)頁(yè)面。
window.onscroll事件中拿到想要的scrollTop后（瀏覽器已經(jīng)隱藏地址欄和工具欄），放開(kāi)scroll插件滾動(dòng)。
- 發(fā)現(xiàn)better-scroll派發(fā)的scroll方法, 在父組件中監(jiān)聽(tīng)后獲取位置參數(shù)的效果不太好; 必須要手指貼著滑動(dòng)才可以...
這個(gè)設(shè)置 probeType 為 3 可以實(shí)時(shí)派發(fā)滾動(dòng)事件和位置參數(shù)
3.其他坑點(diǎn)待發(fā)現(xiàn)...歡迎大佬一起交流
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/104749.html
摘要：從之前黃軼老師的高仿外賣開(kāi)始接觸過(guò)這個(gè)滾動(dòng)庫(kù)，感覺(jué)體驗(yàn)感很好，用起來(lái)也比較順手，所以在后來(lái)的項(xiàng)目聯(lián)系中就一直在使用。 前言 雖然在此之前已經(jīng)有類似的仿豆瓣電影的webapp,但或是開(kāi)發(fā)的有些簡(jiǎn)潔功能不太完善，或是體驗(yàn)感覺(jué)得可以再完善下，所以自己摸索著對(duì)比豆瓣和豆瓣電影兩款app做了一下，初步滿足了自己的想法，經(jīng)過(guò)幾次完善基本不會(huì)出現(xiàn)bug，如果發(fā)現(xiàn)存在問(wèn)題請(qǐng)告訴我修改，謝謝！ 2017...
摘要：去年年底自己搭了一個(gè)在移動(dòng)端的開(kāi)發(fā)框架，感覺(jué)體驗(yàn)不是很好。路由懶加載首頁(yè)終于寫(xiě)完了，以上這些就是我在移動(dòng)端體驗(yàn)優(yōu)化的實(shí)戰(zhàn)。去年年底自己搭了一個(gè)vue在移動(dòng)端的開(kāi)發(fā)框架，感覺(jué)體驗(yàn)不是很好。上個(gè)星期又要做移動(dòng)端的項(xiàng)目了。所以我花了兩天時(shí)間對(duì)之前的那個(gè)開(kāi)發(fā)框架做了以下優(yōu)化 自定義vuex-plugins-loading 路由切換動(dòng)畫(huà) + keep alive 動(dòng)態(tài)管理緩存組件 better-sc...
摘要：概述項(xiàng)目是基于，成品是一個(gè)移動(dòng)端的音樂(lè)播放器，來(lái)源于的實(shí)戰(zhàn)課程。播放器是全局組件，放在下面，通過(guò)傳遞數(shù)據(jù)，觸發(fā)提交，從而使播放器開(kāi)始工作。將請(qǐng)求的數(shù)據(jù)格式化后再通過(guò)傳遞，組件間共享，實(shí)現(xiàn)歌曲的播放切換等。 概述 項(xiàng)目是基于Vue.js，成品是一個(gè)移動(dòng)端的音樂(lè)播放器，來(lái)源于imooc的實(shí)戰(zhàn)課程。自己動(dòng)手實(shí)踐并加以修改拓展。項(xiàng)目的大致流程是Vue-cli構(gòu)建開(kāi)發(fā)環(huán)境，分析需求，設(shè)計(jì)構(gòu)思，規(guī)...
摘要：的組件化功能可謂是它的一大亮點(diǎn)，通過(guò)將頁(yè)面上某一組件的代碼放入一個(gè)的文件中進(jìn)行管理可以大大提高代碼的維護(hù)性。項(xiàng)目中未做移動(dòng)端適配，在不同屏幕手機(jī)上打開(kāi)，可能用戶體驗(yàn)會(huì)差些 一、項(xiàng)目展示： showImg(https://user-gold-cdn.xitu.io/2018/5/18/1637183ad14a696a?w=372&h=791&f=gif&s=2408442); 注意：如果...
閱讀 2590·2021-09-26 10:13
閱讀 6010·2021-09-08 10:46
閱讀 698·2019-08-30 15:53
閱讀 2972·2019-08-29 16:13
閱讀 2766·2019-08-26 12:23
閱讀 3495·2019-08-26 11:24
閱讀 1102·2019-08-23 18:09
閱讀 1038·2019-08-23 17:08
