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