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>