1.0.4 • Published 6 years ago
vue-bscroll v1.0.4
vue-bscroll
vue-bscroll是基于better-scroll的vue的滚动组件，它通过props和$emit操作better-scroll的方法，将better-scroll组件化，提供下拉刷新、上拉加载等操作
npm安装
npm i vue-bscroll --saveprops
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| 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>