scroll.vue组件
<template>
<div ref="wrapper" class="scroll-wrap">
<div>
<div v-if="pulldown" class="pulldown"
:style="`margin-top:${dragTip.translate}px`">
<div class="clear" v-if="dragTip.showLoding">
<div class="fl"><img width="30" src="~common/js/loading9.svg"></div>
<div class="fl lh30 ml10">{{dragTip.text}}</div>
</div>
</div>
<slot></slot>
<div v-if="pullup" class="pullup">
<div class="clear"v-if="!isDone">
<div class="fl"><img width="30" src="~common/js/loading10.svg"></div>
<div class="fl lh30 ml10">加载中.....</div>
</div>
<div class="list-donetip" v-if="!isLoading && isDone">
<slot name="doneTip">没有数据了</slot>
</div>
</div>
</div>
</div>
</template>
<script>
import BScroll from 'better-scroll'
export default {
props:{
probeType:{
type:Number,
default:1
},
/**
* 点击列表是否派发click事件
*/
click:{
type:Boolean,
default:false
},
/**
* 是否开启横向滚动
*/
scrollX:{
type:Boolean,
default:false
},
/**
* 是否派发滚动事件
*/
listenScroll:{
type:Boolean,
default:false
},
/**
* 列表数据
*/
data:{
type:[Object,Array,String],
default:null
},
/**
* 是否派发滚动到底部的事件，用于上拉加载
*/
pullup:{
type:Boolean,
default:false
},
/**
* 是否派发顶部下拉的事件，用于下拉刷新
*/
pulldown:{
type:Boolean,
default:false
},
/**
* 是否派发列表滚动开始的事件
*/
deforeScroll:{
type:Boolean,
default:false
},
/**
* 当数据更新后,刷新scroll延时
*/
refreshDelay:{
type:Number,
default:20
}
},
data(){
return{
dragTip:{
text:"下拉刷新",
translate:-50,
showLoding:false
},
isLoading: false,
isDone: false,
}
},
mounted(){
setTimeout(() => {
this._initScroll()
},20)
},
methods:{
_initScroll(){
if(!this.$refs.wrapper){
return
}
// better-scroll的初始化
this.scroll = new BScroll(this.$refs.wrapper,{
probeType:this.probeType,
click:this.click,
scrollX:this.scrollX
})
// 是否派发滚动事件
if(this.listenScroll){
let me = this
this.scroll.on('scroll',(pos) => {
if(this.listenScroll){
me.$emit('scroll',pos)
}
})
}
// 是否派发滚动到底部事件，用于上拉加载
if(this.pullup){
this.scroll.on('scrollEnd',() => {
if(this.scroll.y <= (this.scroll.maxScrollY + 50)){
//所有数据加载完毕后
this.$on('infinitescroll.loadedDone', () => {
this.isLoading = false;
this.isDone = true;
});
//单次请求数据加载完毕后
this.$on('infinitescroll.finishLoad', (ret) => {
this.isLoading = false;
});
//重新初始化
this.$on('infinitescroll.reInit', () => {
this.isLoading = false;
this.isDone = false;
});
this.$emit('scrollToEnd')
}
})
}
// 是否派发顶部下拉事件，用于下拉刷新
if(this.pulldown){
this.scroll.on('scroll',(pos) => {
//显示下拉刷新loding
this.dragTip.showLoding = true
//隐藏底部加载loding
this.isLoading = false
if(pos.y > 50){
this.dragTip.text = "释放刷新"
}
})
this.scroll.on('touchEnd',(pos) => {
if(pos.y > 50){
this.dragTip.translate = 0
this.dragTip.text = "刷新中..."
//重新初始化
this.$on('pullrefresh.finishLoad', this.resetParams);
this.$emit('pulldown',pos)
}
})
}
// 是否派发列表滚动开始的事件
if(this.beforeScroll){
this.scroll.on('beforeScrollStart',() => {
this.$emit('beforeScroll')
})
}
},
resetParams(){
setTimeout(() => {
this.isLoading = false;
this.isDone = false;
this.dragTip = {
text:"下拉刷新",
translate:-50,
showLoding:false
}
},600)
},
disable(){
this.scroll && this.scroll.disable()
},
enable(){
this.scroll && this.scroll.enable()
},
refresh(){
this.scroll && this.scroll.refresh()
},
scrollTo(){
this.scroll && this.scroll.scrollTo.apply(this.scroll, arguments)
},
scrollToElement() {
this.scroll && this.scroll.scrollToElement.apply(this.scroll, arguments)
}
},
watch:{
data(){
setTimeout(() => {
this.refresh()
new BScroll(this.$refs.wrapper,{
probeType:this.probeType,
click:this.click,
scrollX:this.scrollX
})
},this.refreshDelay)
}
}
}
</script>
<style scoped lang="stylus" type="stylesheet/stylus">
.scroll-wrap
height:100%
overflow:hidden
/* 下拉刷新 */
.pulldown,.pullup
width:100%
height:50px
position:relative
div.clear
padding:10px 0px
font-size:.28rem
position:absolute
left:50%
top:5px
transform:translate(-50%,0)
.list-donetip
text-align:center
line-height:50px
font-size:.28rem
</style>
home.vue 调用better-scroll组件
<template>
<div class="ScrollBox">
<scroll
ref="pullrefresh"
:pullup="isShow"
:pulldown="isShow"
@pulldown="loadDemo"
@scrollToEnd="loadup">
<div v-for="item in list" class="lh40 pb30">
<div class="clear">
<div class="fl">{{item.title}}</div>
<div class="fl">{{item.create_time}}</div>
</div>
<div>{{item.link}}</div>
</div>
</scroll>
</div>
</template>
<script>
import Scroll from 'base/scroll/scroll'
import Slider from 'base/slider/slider'
import {notice} from 'common/js/getData'
export default {
components:{Scroll,Slider},
data () {
return {
isShow: true,
list:[],
page:1
}
},
mounted(){
this._getDataInfo(1)
},
methods:{
loadDemo(){
this.list = []
//下拉刷新重新初始化
this.$refs.pullrefresh.$emit('pullrefresh.finishLoad');
this._getDataInfo(1)
},
loadup(){
if(!this.page) return
this.page ++
//上拉加载重新初始化
this.$refs.pullrefresh.$emit('infinitescroll.reInit');
this._getDataInfo(this.page)
},
_getDataInfo(page){
notice(page).then((res) => {
if(res.list.length >= 10){
this.list = [...this.list, ...res.list]
//单次请求数据加载完毕后
this.$refs.pullrefresh.$emit('infinitescroll.finishLoad');
}else{
//把page设置成false 数据已经加载完毕了 不用在加载了
this.page = false
//所有数据加载完毕后
this.$refs.pullrefresh.$emit('infinitescroll.loadedDone');
}
})
}
}
}
</script>
<style scoped lang="stylus" type="stylesheet/stylus">
@import "~common/stylus/variable"
.ScrollBox
width:100%
position:fixed
top:0px
bottom:0px
</style>
样式有些粗糙 主要是做scroll组件里面的刷新和加载
