README.md

vue-bscroll

vue-bscroll是基于better-scroll的vue的滚动组件，它通过props和$emit操作better-scroll的方法，将better-scroll组件化，提供下拉刷新、上拉加载等操作

npm安装

npm i vue-bscroll --save

props

参数	说明	类型	默认值
attr	better-scroll 里的选项	Object	见Obj1
func	通过配置Object来控制是否触发事件(配置选项见Obj1)	Object	见Obj2
downText	配置下拉的文本	Object	{pull:'下拉刷新',loosen:'松开刷新',tip:'刷新完成'}
upText	配置上拉的文本	Object	{pull:'正在加载数据',tip:'已无更多数据'}

Obj1: {
	click: true,
	probeType: 1,
	pullDownRefresh, {
		threshold: 58,
		stop: 50
	},
	pullUpLoad, {
	  threshold: 50
	}
}
Obj2: {
	listenBeforeScrollStart: false,//滚动前时        派发beforeScrollStart事件		返回参数pos
	listenScroll: false,           //滚动时          派发scroll事件				返回参数pos
	listenScrollEnd: false,        //滚动结束时      派发scrollEnd事件     返回参数pos
	listenScrollToEnd: false,      //滚动到底部时     派发scrollToEnd事件	返回参数pos
	listenTouchEnd: false,         //手指/鼠标离开时  派发touchEnd事件			返回参数pos
	listenPullingDown: false,      //下拉刷新时       派发pullingDown事件	在这里执行刷新操作
	listenPullingUp: false         //上拉加载时       派发pullingUp事件		在这里执行数据请求操作
}

methods

名称	说明	参数
refresh	重新计算 better-scroll	无
scrollTo	滚动到指定的位置	x(横轴左边){Number} y(纵轴坐标){Number} time(滚动动画执行的时长){Number} easing(缓动函数){Object}
scrollToElement	滚动到指定的目标元素	el(滚动到的目标元素){DOM | String} time(滚动动画执行的时长){Number} offsetX(相对于目标元素的横轴偏移量，如果设置为 true，则滚到目标元素的中心位置){Number | Boolean} offsetY(相对于目标元素的纵轴偏移量，如果设置为true，则滚到目标元素的中心位置){Number | Boolean} easing (缓动函数){Object}
afterRefresh	在下拉刷新后调用(执行刷新操作后调用，必须)	无
afterUpload	在上拉加载后调用(即请求获取数据后调用，必须)	flag(true表示还有数据,false表示没有更多数据了){Boolean}

events 注意 这些事件触发需要在props的func里配置对应的参数,下拉刷新同时需要设置listenScroll:true

名称	说明	返回参数
beforeScrollStart	滚动前触发	pos(一个包括x,y坐标的Object)
scroll	滚动时	pos(一个包括x,y坐标的Object)
scrollEnd	滚结束时	pos(一个包括x,y坐标的Object)
scrollToEnd	滚到底部时	pos(一个包括x,y坐标的Object)
touchEnd	手指、鼠标离开时	pos(一个包括x,y坐标的Object)
pullingDown	下拉刷新时	无
pullingUp	上拉加载时	无

例子

<template>
	<div class="wrapper">
		<BScroll ref="bscroll" :func="func" @pullingUp="listenPullingUp" @pullingDown="listenPullingDown">
			<li v-for="(item, index) in list" :key="index">{{item}}</li>
		</BScroll>
	</div>
</template>

import BScroll from 'vue-bscroll'
export default {
	data () {
		return {
			list: [],
			func: {
				// 监听滚动
				listenScroll: true,
				// 监听下拉刷新
				listenPullingDown: true,
				// 监听上拉加载
				listenPullingUp: true
			}
		}
	},
	components: {
		BScroll
	},
	methods: {
		listenPullingDown() {
			this.list = []
			this.loadData()
			setTimeout(() => {
				this.$refs.bscroll.afterRefresh()
			}, 1000)
		},
		listenPullingUp() {
			let _this = this
			setTimeout(() => {
				_this.loadData()
				_this.$refs.bscroll.afterUpload(true)
			}, 1000)
		},
		loadData(callback = () => {}) {
			let length = this.list.length
			let newArr = []
			for (let i = length; i < length + 20; i++) {
				newArr.push(`第${i}条数据`)
			}
			this.list = this.list.concat(newArr)
		}
	},
	mounted() {
		this.loadData()
	}
}
</script>

<style lang="scss" scoped>
.wrapper{
	height: 500px;
	width: 100%;
	li{
		height: 48px;
		line-height: 48px;
	}
}
</style>