這次帶給大家vue better-scroll的滾動插件使用詳解,使用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,也就是容器
橫向捲動
橫向滾動,相較於縱向滾動需要動態的去獲取滾動區的寬度,直接上碼。<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>橫向捲動需要注意。
以上是vue better-scroll的捲動插件使用詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!