這篇文章主要介紹了詳解 vue better-scroll滾動插件排坑,現在分享給大家,也給大家做個參考。
BetterScroll號稱目前最好用的行動端滾動插件,因此它的強大之處肯定是存在的。要不...哈哈。個人感覺還是很好用的。這篇文章不是籠統的講 BetterScroll ,而是單講滾動,想要深入了解它,請移步這裡 。
捲動原理
better-scroll 是什麼捲動原理
better- scroll 是一款專注於解決行動裝置(已支援PC)各種捲動場景需求的外掛程式。它的核心是藉鑒的 iscroll 的實現,它的 API 設計基本上兼容 iscroll,在 iscroll 的基礎上又擴展了一些 feature 以及做了一些性能優化。
better-scroll 是基於原生 JS 實作的,不依賴任何框架。它編譯後的程式碼大小是 63kb,壓縮後是 35kb,gzip 後僅有 9kb,是一款非常輕量的 JS lib。
綠色部分為 wrapper,也就是父容器,它會有固定的高度。黃色部分為 content,它是父親容器的第一個子元素,它的高度會隨著內容的大小而撐高。那麼,當 content 的高度不超過父容器的高度,是不能滾動的,而它一旦超過了父容器的高度,我們就可以滾動內容區了。橫向滾動的原理一致就是將固定高度改為固定寬度。 (這裡就不囉嗦了)
縱向捲動
#廢話不多說,我們直接上程式碼。
<template> <p class="wrapper" ref="wrapper"> <ul> <li v-for="item in 8">{{item}}</li> </ul> </p> </template> <script> import BScroll from 'better-scroll'; export default { mounted() { this.$nextTick(() => { this.scroll = new BScroll(this.$refs.wrapper); }); } }; </script> <style type="text/css"> .wrapper{ overflow:hidden; height:100vh; } ul li{ height:400px; } </style>
這是一個Vue BetterScroll縱向滾動demo,這裡要注意的有兩點。
只能有一層父級p,也就是容器
#父級p要設定溢出隱藏,並且固定高度
橫向捲動
橫向捲動,相較於縱向捲動需要動態的去獲取捲動區的寬度,直接上碼。
<template> <p class="tab" ref="tab"> <ul class="tab_content" ref="tabWrapper"> <li class="tab_item" v-for="item in itemList" ref="tabitem"> {{item.title}} </li> </ul> </p> </template> <script> import BScroll from 'better-scroll'; export default { data() { return{ itemList:[ { 'title':'关注' }, { 'title':'推荐' }, { 'title':'深圳' }, { 'title':'视频' }, { 'title':'音乐' }, { 'title':'热点' }, { 'title':'新时代' }, { 'title':'娱乐' }, { 'title':'头条号' }, { 'title':'问答' }, { 'title':'图片' }, { 'title':'科技' }, { 'title':'体育' }, { 'title':'财经' }, { 'title':'军事' }, { 'title':'国际' } ] } }, created() { this.$nextTick(() => { this.InitTabScroll(); }); }, methods:{ InitTabScroll(){ let width=0 for (let i = 0; i <this.itemList.length; i++) { width+=this.$refs.tabitem[0].getBoundingClientRect().width; //getBoundingClientRect() 返回元素的大小及其相对于视口的位置 } this.$refs.tabWrapper.style.width=width+'px' this.$nextTick(()=>{ if (!this.scroll) { this.scroll=new BScroll(this.$refs.tab, { startX:0, click:true, scrollX:true, scrollY:false, eventPassthrough:'vertical' }); }else{ this.scroll.refresh() } }); } } }; </script> <style lang="scss" scoped> .tab{ width: 100vw; overflow: hidden; padding:5px; .tab_content{ line-height: 2rem; display: flex; .tab_item{ flex: 0 0 60px; width:60px; } } } </style>
橫向捲動需要注意。
只能有一層父級p,也就是容器
#父容器要設定溢位隱藏並固定寬度
#動態取得滾動區的寬度
因為最近項目需要,所以從網路查閱了許多資料也無法解決我的問題。 BetterScroll 官網也沒有提供實際demo參考,所以就利用休息時間,寫了這篇文章。希望能對你們有用。需要具體 demo 請移步,別忘了給個star啊,寫文章不容易,給個贊唄!
上面是我整理給大家的,希望今後對大家有幫助。
相關文章:
以上是在vue中使用better-scroll捲動插件的詳細內容。更多資訊請關注PHP中文網其他相關文章!