在我們的h5或移動端網頁開發中，常常會需要實現滾動載入資料，等需求，而在開發中原生開發往往會帶來意想不到的問題，因此我們引入better-scroll來幫我們實現流暢的滾動效果。
better-scroll 是乙個移動端滾動的解決方案，它是基於 iscroll 的重寫，它和 iscroll 的主要區別在這裡。better-scroll 也很強大，不僅可以做普通的滾動列表，還可以做輪播圖、picker 等等。
先看**及
<div
class
>
<
ul class
="content"
>
<
li>ul被li標籤自動撐開，高度不固定
當頁面內容的高度超過視口高度的時候，會出現縱向滾動條；當頁面內容的寬度超過視口寬度的時候，會出現橫向滾動條。也就是當我們的視口展示不下內容的時候，會通過滾動條的方式讓使用者滾動螢幕看到剩餘的內容。
首先 ：引入better-scroll第三方元件
其次：獲取滾動區域父級dom元素（固定高度的元素）
最後：例項化better-scroll（引數說明：引數1--dom元素 ， 引數2：相關配置）
首先看**
<this.$nexttick執行的 dom 已經渲染了確保滾動正常。this.$nexttick 是乙個非同步函式，底層用到了 mutationobserver 或者是 settimeout(fn, 0)。其實我們在這裡把 this.$nexttick 替換成 settimeout(fn, 20) 也是可以的（20 ms 是乙個經驗值，每乙個 tick 約為 17 ms）template
>
<
div
class
ref>
<
ul class
="content"
>
<
li>...
li>
<
li>...
li>
...
ul>
div>
template
>
<
script
>
import bscroll from
'better-scroll
'export
default
) }
}script
>
新建scroll.vue
<新建index.vue簡單去使用他 （引數pullup 開啟向上滑動）template
>
<
div
class
="wrap"
ref>
<
slot
>mm
slot
>
div>
template
>
<
script
>
import bscroll from
"better-scroll";
export
default
, /**
* 點選列表是否派發click事件
*/click: ,
/*** 是否開啟橫向滾動
*/scrollx: ,
/*** 是否派發滾動事件
*/listenscroll: ,
/*** 列表的資料
*/data: ,
/*** 是否派發滾動到底部的事件，用於上拉載入
*/pullup: ,
/*** 是否派發頂部下拉的事件，用於下拉重新整理
*/pulldown: ,
/*** 是否派發列表滾動開始的事件
*/beforescroll: ,
/*** 當資料更新後，重新整理scroll的延時。
*/refreshdelay: ,
},mounted() )
settimeout(()
=>
, 20
); },
methods:
//better-scroll的初始化
this
.scroll
=new
bscroll(
this
probetype:
this
.probetype,
click:
this
.click,
scrollx:
this
.scrollx,
});//是否派發滾動事件if(
this
.listenscroll) );
}//是否派發滾動到底部事件，用於上拉載入if(
this
.pullup)
});}
//是否派發頂部下拉事件，用於下拉重新整理if(
this
.pulldown)
});}
//是否派發列表滾動開始的事件if(
this
.beforescroll) );}},
disable() ,
enable() ,
refresh() ,
scrollto() ,
scrolltoelement() ,
},destroyed(),
watch: ,
this
.refreshdelay);
},},
};script
>
<
style
lang
='scss'
scoped
>
style
>
<實現效果template
>
<
better
class
:data
="data"
:pullup
="pullup"
@scrolltoend
="loaddata"
>
<
ul class
="content"
>
<
li v-for
="(item, i) in data"
:key
="i"
>}
li>
ul>
better
>
template
>
<
script
>
import better from
"./betterscrollss";
import from
"vuex";
export
default
, data() ,
};},
created() ,
computed: ,
watch: ,
},methods: ,
},};script
>
<
style
lang
='scss'
scoped
>
.content li
.wrap
style
>
格式：let scroll= new bscroll(object,);
注意，如果在某乙個元件內建立了乙個bscroll的例項，在元件生命週期結束前要注意呼叫destroy方法，否則在滑動過程中切換頁面會導致一直觸發scroll事件，導致一些意想不到的問題，切記！！！(this.scroll.destroy())
event事件
probetype: 3})
scroll.on('scroll', (pos) => )
vue 入門 之 安裝vue 環境
點 next 完成安裝 輸入 node v 檢測 node 版本及是否安裝成功 輸入 npm v 檢測 npm 版本 2.安裝 映象 cnpm 輸入 npm install g cnpm registry 進行 cnpm 安裝 3.安裝 vue cli 腳手架 輸入 cnpm install g v...
Vue篇之Vue快速上手
vue安裝 1.使用cdn方法 首先要進行node.js的安裝，安裝node可以參考 由於npm安裝速度較慢，在這裡附上cnpm 映象安裝命令，npm install g cnpm registry name為你要安裝的模組名 cnpm install name npm 或cnpm 安裝腳手架 np...
vue插槽樣式 vue基礎之插槽
categories vue基礎 tags 插槽element ui 插槽slot 插槽 vue內建元件 做為承載分發內容的出口 普通插槽 插槽使用 全域性元件 第乙個引數是元件名，第二個引數是options vue.component vbtn template 我是頭部元件 var vconte...