网站做著作权,修改wordpress后台登陆地址,sem竞价托管代运营,长春互联网公司哪里多我的目的是为了实现列表的下拉刷新、上拉加载#xff0c;所以选择了better-scroll这个库。 用好这个库#xff0c;需要理解下面说明 必须包含两个大的div#xff0c;外层和内层div 外层div设置可视的大小(宽或者高)-有限制宽或高 内层div#xff0c;包裹整个可以滚动的部分…我的目的是为了实现列表的下拉刷新、上拉加载所以选择了better-scroll这个库。 用好这个库需要理解下面说明 必须包含两个大的div外层和内层div 外层div设置可视的大小(宽或者高)-有限制宽或高 内层div包裹整个可以滚动的部分 内层div高度一定大于外层div的宽或高才能滚动 1、先开始写一个简单demo最基本的代码架构
template
div refwrapper classwrapperul classcontentli.../lili.../li/ul
/divcss
/*对外层div进行了高度上的限制*/
.wrapper {display: fixed;left: 0;top: 0;bottom: 0;width: 100%;height:300px;overflow:hidden;
}
.content {width:100%;height:800px;background:blue;
}script
import BScroll from better-scroll
this.scroll new BScroll(new BScroll(this.$refs.wrapper))2、进行改造升级加上上拉刷新、下拉加载的代码。 mounted () {this.scroll new BScroll(this.$refs.wrapper, {// 上拉加载pullUpLoad: {// 当上拉距离超过30px时触发 pullingUp 事件threshold: -30},// 下拉刷新pullDownRefresh: {// 下拉距离超过30px触发pullingDown事件threshold: 30,// 回弹停留在距离顶部20px的位置stop: 20}})this.scroll.on(pullingUp, () {console.log(处理上拉加载操作)setTimeout(() {// 事情做完需要调用此方法告诉 better-scroll 数据已加载否则上拉事件只会执行一次this.scroll.finishPullUp()}, 2000)})this.scroll.on(pullingDown, () {console.log(处理下拉刷新操作)setTimeout(() {console.log(asfsaf)// 事情做完需要调用此方法告诉 better-scroll 数据已加载否则下拉事件只会执行一次this.scroll.finishPullDown()}, 2000)})}原理已经讲清楚了上面的代码是一个功能示例码友结合自己项目扩展就行啦。
