**下载better-scroll**
`npm i better-scroll --save `
pulldown,监听下拉动作,可以实现下拉刷新;
- pullup,监听上拉动作,可以实现上拉加载;
- scrollbar,自定义滚动条;
- slide,用于实现轮播图效果;
- wheel,是实现类似 IOS picker 的基石,可以实现城市联动选择器;
- zoom,实现缩放效果;
- mouse-wheel,鼠标滚轮操作,可以用来操作列表内容滚动、轮播图的切+ 换等;
- observe-dom,开启对scroll区域dom改变的监听;当dom改变时,触发对应的函数;
- infinity,实现无限滚动,有大量的列表数据需要渲染时使用,它可以实现部分渲染;
- nested-scroll,实现双层嵌套的滚动效果;
- better-scroll,包含以上的所有插件
下拉刷新 上拉加载
使用better-scroll 实现下拉刷新、上拉加载时要注意以下几点:
- wrapper里必须只有一个子元素;
- 子元素的高度要比wrapper要高;
- 使用的时候,要确定DOM元素是否已经生成,必须要等到DOM渲染完成后,再new BScroll();
- 滚动区域的DOM元素结构有变化后,需要执行刷新 refresh() ;
- 上拉或者下拉,结束后,需要执行finishPullUp()或者finishPullDown(),否则将不会执行下次操作;
- better-scroll,默认会阻止浏览器的原生click事件,如果滚动内容区要添加点击事件,需要在实例化属性里设置click:true;
<template>
<div>
<div class="box"></div>
<!-- ........... -->
<div class="wrapper left" ref="wrapper">
<div class="bscroll-container">
<!-- 刷新提示信息 -->
<div class="top-tip">
<span class="refresh-hook">{{ pulldownMsg }}</span>
</div>
<!-- 内容列表..........-->
<ul class="content">
<li v-for="item in data" :key="item" id="aaa">{{ item }}</li>
</ul>
<!-- 底部提示信息........... -->
<div class="bottom-tip">
<span class="loading-hook">{{ pullupMsg }}</span>
</div>
</div>
</div>
<!-- ............ -->
</div>
</template>
<script>
import BScroll from 'better-scroll';
// let count = 1;
export default {
name: 'Z',
data() {
return {
data: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 20],
pulldownMsg: '下拉刷新 ',
pullupMsg: '加载更多 ',
};
},
mounted() {
this.init()
},
methods:{
init(){
const that = this;
// 创建Better-Scroll对象
this.scroll = new BScroll(this.$refs.wrapper, {
probeType: 1, //滚动的时候会派发scroll事件,会节流
click: true, //派发click事件
// 开始滑轮
mouseWheel: true,
// 开启下拉刷新
pullDownRefresh: {
threshold: 50,
stop: -10,
},
// 下拉加载
pullUpLoad: {
threshold: 50,
},
});
//监听下拉刷新
// 当下拉的时候向后端发送请求
this.scroll.on('pullingDown', () => {
console.log('我是下拉刷新');
this.scroll.finishPullDown();
});
// 监听上拉加载
// 当上拉的时候向后端发送请求
this.scroll.on('pullingUp', () => {
console.log('我是上拉加载');
// 当上拉加载数据加载完毕后,需要调用此方法告诉 better-scroll 数据已加载。
// 不然就会执行一次
this.scroll.finishPullUp();
});
// //滑动结束松开事件
this.scroll.on('touchEnd', pos => {
//上拉刷新
// console.log('我是posy', pos);
if (pos.y > 200) {
setTimeout(() => {
this.pulldownMsg = ' ';
this.scroll.refresh(); //重新计算高度
}, 2000);
} else if (pos.y < this.scroll.maxScrollY - 200) {
this.pullupMsg = ' ';
}
});
}
}
};
</script>
<style scoped>
.box {
width: 100%;
height: 40px;
background: #000;
}
.wrapper {
width: 20%;
height: 500px;
background: rgb(245, 247, 249);
overflow: hidden;
position: relative;
}
#aaa {
width: 100%;
height: 50px;
line-height: 50px;
text-align: center;
}
/* 下拉、上拉提示信息 */
.top-tip {
position: absolute;
top: -40px;
left: 0;
z-index: 1;
width: 100%;
height: 40px;
line-height: 40px;
text-align: center;
color: #555;
}
.bottom-tip {
width: 100%;
height: 35px;
line-height: 35px;
text-align: center;
color: #777;
position: absolute;
bottom: -35px;
left: 0;
}
</style>