vue better-scroll插件完成上拉加载更多，html5移动web开发指南

return{

dropDown:false,

up:false,

list:[1,2,3,4,5,6,6,7,8,9,10,11,12,13,14,15,1,2,3,4,5,6,6,7,8,9,10,11,12,13,14,15]

}

},

mounted(){

this.scrollFn()

},

methods:{

scrollFn(){

this.$nextTick(() => {

if (!this.scroll) {

this.scroll = new BScroll(this.$refs.bscroll, {

click: true,

scrollY: true,

probeType: 3

});

}else{

this.scroll.refresh();

}

this.scroll.on(‘scroll’, (pos) => {

console.log(pos.y,this.dropDown)

//如果下拉超过50px 就显示下拉刷新的文字

if(pos.y>50){

this.dropDown = true

}else{

this.dropDown = false

}

})

//touchEnd（手指离开以后触发） 通过这个方法来监听下拉刷新

this.scroll.on(‘touchEnd’, (pos) => {

// 下拉动作

if(pos.y > 50){

console.log(“下拉刷新成功”)

this.dropDown = false

}

//上拉加载 总高度>下拉的高度+10 触发加载更多

if(this.scroll.maxScrollY>pos.y+20){

console.log(“加载更多”)

this.up=true;

setTimeout(()=>{

//使用refresh 方法 来更新scroll 解决无法滚动的问题

this.list.push(‘一’,‘二’,‘三’,‘四’,‘五’,‘六’,‘七’,‘八’,‘九’,‘十’)

this.scroll.refresh();

this.up=false;

},1000)

}

console.log(this.scroll.maxScrollY+“总距离----下拉的距离”+pos.y)

})

console.log(this.scroll.maxScrollY)

});

}

}

}