一项栏、什么事better-scroll时鸵？
better-scroll 是一款重點(diǎn)解決移動(dòng)端（已支持 PC）各種滾動(dòng)場(chǎng)景需求的插件脐帝。它的核心是借鑒的 iscroll 的實(shí)現(xiàn)吟秩，它的 API 設(shè)計(jì)基本兼容 iscroll包蓝，在 iscroll 的基礎(chǔ)上又?jǐn)U展了一些 feature 以及做了一些性能優(yōu)化驶社。
better-scroll 是基于原生 JS 實(shí)現(xiàn)的，不依賴任何框架养晋。它編譯后的代碼大小是 63kb衬吆，壓縮后是 35kb，gzip 后僅有 9kb绳泉，是一款非常輕量的 JS lib。
二姆泻、使用
1.安裝
首先在package.json里面加入better-scroll的依賴零酪，然后使用npm安裝
npm install better-scroll --save-dev
2.引入
在需要使用的插件中引入better-scroll
import BScroll from 'better-scroll'
3.vue使用better-scroll
//html
<template>
<div class="tabbar">
<div class="wrapper" ref="wrapper">
<div class="bscroll-container">
<!-- 刷新提示信息 -->
<div class="top-tip">
<span class="refresh-hook">{{pulldownMsg}}</span>
</div>
<!-- 內(nèi)容列表 -->
<ul class="content">
<li v-for="item in data">{{item}}</li>
</ul>
<!-- 底部提示信息 -->
<div class="bottom-tip">
<span class="loading-hook">{{pullupMsg}}</span>
</div>
</div>
</div>
<!-- alert提示刷新成功 -->
<div class="alert-hook" :style="{display: alertHook}">刷新成功</div>
</div>
</template>
//js
<script>
import BScroll from "better-scroll"
const count = 1
export default {
data(){
return {
data: [0,1,2,3,4,5,6],
pulldownMsg: '下拉刷新',
pullupMsg: '加載更多',
alertHook: 'none'
}
},
methods: {
getData() {
return new Promise(resolve => { //模擬數(shù)據(jù)請(qǐng)求
setTimeout(() => {
const arr = [];
for (let i = 0; i < 20; i++) {
arr.push(count++)
}
resolve(arr)
}, 1000)
})
},
refreshalert(){ //刷新成功提示
this.alertHook = 'block';
setTimeout(()=>{
this.alertHook = 'none'
},1000)
}
},
created(){
const that = this;
this.$nextTick(() => {
this.scroll = new BScroll(this.$refs.wrapper,{ //初始化better-scroll
probeType:1, //1 滾動(dòng)的時(shí)候會(huì)派發(fā)scroll事件，會(huì)截流拇勃。2滾動(dòng)的時(shí)候?qū)崟r(shí)派發(fā)scroll事件四苇，不會(huì)截流。 3除了實(shí)時(shí)派發(fā)scroll事件方咆，在swipe的情況下仍然能實(shí)時(shí)派發(fā)scroll事件
click: true //是否派發(fā)click事件
})
// 滑動(dòng)過(guò)程中事件
this.scroll.on('scroll',(pos)=>{
if(pos.y > 30){
this.pulldownMsg = '釋放立即刷新'
}
});
//滑動(dòng)結(jié)束松開(kāi)事件
this.scroll.on('touchEnd',(pos) =>{ //上拉刷新
if(pos.y > 30){
setTimeout(()=>{
that.getData().then((res)=>{
//刷新數(shù)據(jù)
that.data = res;
//恢復(fù)刷新提示文本值
that.pulldownMsg = '下拉刷新'
//刷新成功后提示
that.refreshalert();
//刷新列表后月腋，重新計(jì)算滾動(dòng)區(qū)域高度
that.scroll.refresh();
})
},2000)
}
else if(pos.y<(this.scroll.maxScrollY - 30)){ //下拉加載
this.pullupMsg = '加載中。瓣赂。榆骚。';
setTimeout(()=>{
that.getData().then((res)=>{
//恢復(fù)文本值
that.pullupMsg = '加載更多';
that.data = this.data.concat(res);
that.scroll.refresh();
})
},2000)
}
})
})
}
}
</script>
//css
.wrapper{
width: 100%;
height: 300px;
background: #ccc;
overflow: hidden;
position: relative;
}
li{
line-height: 50px;
border-bottom: 1px solid #ccc;
text-align: center;
}
/* 下拉、上拉提示信息 */
.top-tip{
position: absolute;
top: -40px;
left: 0;
z-index: 1;
width: 100%;
height:40px;
line-height:40px;
text-align:center;
color: #555;
}
.bottom-tip{
width: 100%;
height: 35px;
line-height: 35px;
text-align: center;
color: #777;
background: #f2f2f2;
position: absolute;
bottom: -35px;
left: 0;
}
/* 全局提示信息 */
.alert-hook{
display: none;
position: fixed;
top: 62px;
left: 0;
z-index: 2;
width: 100%;
height: 35px;
line-height: 35px;
text-align: center;
color: #fff;
font-size: 12px;
background: rgba(7, 17, 27, 0.5);
}
