-
安装
npm install better-scroll --save
-
初始化
<div class="wrapper"> <!-- better-scroll 只处理容器（wrapper）的第一个子元素（content）的滚动，其它的元素都会被忽略。--> <ul class="content"> <li>...</li> <li>...</li> ... </ul> <!-- 这里可以放一些其它的 DOM，但不会影响滚动 --> </div>import BScroll from 'better-scroll' let scroll = new BScroll('.wrapper', { scrollY: true, click: true })可以滚动的前提：
1、content要比wrapper高
2、wrapper宽高值确定并且overflow: hidden -
配置属性
-
probeType
- 类型：Number
- 默认值：0
- 可选值：1、2、3
- 作用：有时候我们需要知道滚动的位置。当 probeType 为 1 的时候，会非实时（屏幕滑动超过一定时间后）派发scroll 事件；当 probeType 为 2 的时候，会在屏幕滑动的过程中实时的派发 scroll 事件；当 probeType 为 3 的时候，不仅在屏幕滑动的过程中，而且在 momentum 滚动动画运行过程中实时派发 scroll 事件。如果没有设置该值，其默认值为 0，即不派发 scroll 事件
-
scrollX
当设置为 true 的时候，可以开启纵向滚动 -
pullDownRefresh
类型：Boolean | Object
默认值：false
作用：这个配置用于做下拉刷新功能，默认为 false。当设置为 true 或者是一个 Object 的时候，可以开启下拉刷新，
可以配置顶部下拉的距离（threshold） 来决定刷新时机以及回弹停留的距离（stop）。当下拉刷新数据加载完毕后，需要执行 finishPullDown 方法。见 Demo 。 了解更多的细节可以去看 example 中的 scroll 组件代码。pullDownRefresh: { threshold: 50, stop: 20 } -
-
事件属性/实例属性
-
x
scroll 横轴坐标（右偏移为+，左偏移为-） -
y
scroll 纵轴坐标。（下偏移为+，上偏移为-） -
maxScrollY
类型：Number
作用：scroll 最大纵向滚动位置。(内容多的那部分高度)
备注：scroll 纵向滚动的位置区间是 0 - maxScrollY，并且 maxScrollY 是负值
上拉加载更多时会用到 ， 当 pos.y<maxScrollY-30加载更多（将内容元素 往上偏移 最大能滚动的距离+30,30是强行往上托动的距离）
-
5.方法
1.refresh()
> 更新数据后 重新计算 better-scroll，当 DOM 结构发生变化的时候务必要调用确保滚动的效果正常
2.scrollToElement(el, time, offsetX, offsetY, easing)
参数：
{DOM | String} el 滚动到的目标元素, 如果是字符串，则内部会尝试调用 querySelector 转换成 DOM 对象。
{Number} time 滚动动画执行的时长（单位 ms）
{Number | Boolean} offsetX 相对于目标元素的横轴偏移量，如果设置为 true，则滚到目标元素的中心位置
{Number | Boolean} offsetY 相对于目标元素的纵轴偏移量，如果设置为 true，则滚到目标元素的中心位置
{Object} easing 缓动函数，一般不建议修改，如果想修改，参考源码中的 ease.js 里的写法
返回值：无
作用：滚动到指定的目标元素。
3.**scrollTo(x, y, time, easing)**
>参数：
{Number} x 横轴坐标（单位 px）
{Number} y 纵轴坐标（单位 px）
{Number} time 滚动动画执行的时长（单位 ms）
{Object} easing 缓动函数，一般不建议修改，如果想修改，参考源码中的 ease.js 里的写法
返回值：无
作用：滚动到指定的位置
4.**on(type, fn, context)**
>参数：
{String} type 事件名
{Function} fn 回调函数
{context} 函数执行的上下文环境，默认是 this
返回值：无
作用：监听当前实例上的自定义事件。如：scroll, scrollEnd, pullingUp, pullingDown等。
import BScroll from 'better-scroll'
let scroll = new BScroll('.wrapper')
function onScroll(pos) {
console.log(`Now position is x: ${pos.x}, y: ${pos.y}`)
}
scroll.on('scroll', onScroll)
**5.finishPullDown(config)**
作用：当下拉刷新数据加载完毕后，需要调用此方法告诉 better-scroll 数据已加载。
**6.openPullDown(config)**
动态开启下拉刷新功能。
6.demo1
<div class="page_wraper" ref="wrap">
<div class="content">
<div class="top_tip tc">{{ pullDownMsg }}</div>
<ul>
<li v-for="i in list">{{ i }}</li>
</ul>
<div class="bottom_tip tc">{{ pullUpMsg }}</div>
</div>
</div>
</template>
<script>
import BScroll from 'better-scroll'
import { setTimeout } from 'timers';
export default {
data() {
return {
startNum: 1,
list: [],
pullDownMsg: "下拉刷新，发现更多",
pullUpMsg: "加载中，请稍后...",
noMsg: "没有更多了",
bsScroll: ""
};
},
components: {},
computed: {},
mounted: function() {
this.getList().then((res) => {
this.list = this.list.concat(res);
});
// 初始化
this.bsScroll = new BScroll(this.$refs.wrap, {
probeType: 1,
click: true
})
// 监听滚动事件
this.bsScroll.on('scroll', (pos) => {
if(pos.y > 0 && pos.y <= 40) {
this.pullDownMsg = '下拉刷新，发现更多';
}else if(pos.y > 40) {
this.pullDownMsg = "释放更新，发现更多"
}
})
// 监听滚动结束
this.bsScroll.on('touchEnd', (pos) => {
if(pos.y > 40) {
// 重新获取数据
this.startNum = this.getRandom(1, 100);
setTimeout(() => {
this.getList().then((res) => {
this.list = res;
this.pullDownMsg = '下拉刷新，发现更多';
})
}, 1000)
}else if(pos.y < this.bsScroll.maxScrollY - 30) {
// 下拉加载
this.getList().then((res) => {
this.list = this.list.concat(res);
this.bsScroll.refresh();
})
}
})
},
methods: {
getList() {
// 模拟数据请求
return new Promise(resolve => {
setTimeout(() => {
let start = this.startNum, arr = [];
for (
this.startNum;
this.startNum <= start + 18;
this.startNum++
) {
arr.push(this.startNum);
resolve(arr);
}
}, 1000);
});
},
getRandom(m, n) {
return Math.floor(Math.random()*(m - n) + n);
}
}
};
</script>
<style lang='scss' scoped>
.page_wraper{
width: 100%;
height: 100%;
overflow: hidden;
background: #eee;
}
.content{
position: relative;
min-height: 100%;
}
.top_tip{
position: absolute;
top: -35px;
left: 0;
width: 100%;
}
.bottom_tip{
position: absolute;
bottom: -35px;
left: 0;
width: 100%;
}
ul li{
height: 30px;
line-height: 30px;
border-bottom: 1px solid #ccc;
padding: 5px 20px;
}
</style>`
7.demo2
this.getList().then((res) => {
this.list = this.list.concat(res);
});
let listNode = this.$refs.wrap
this.bsScroll = new BScroll(listNode, {
probeType: 1,
click: true,
pullDownRefresh: true,
pullUpLoad: true
})
this.bsScroll.on("pullingDown", () => {
console.log("pullingDown")
this.startNum = this.getRandom(1, 100);
this.getList().then((res) => {
this.list = res;
this.pullDownMsg = "下拉刷新，发现更多";
this.bsScroll.finishPullDown()
})
})
this.bsScroll.on("pullingUp", () => {
console.log("pullingUp")
this.getList().then((res) => {
this.list = this.list.concat(res);
this.bsScroll.refresh()
this.bsScroll.finishPullUp()
})
})
网友评论