本文目的是为了实现列表的下拉刷新、上拉加载,所以选择了better-scroll这个库。

用好这个库,需要理解下面说明

必须包含两个大的div,外层和内层div
外层div设置可视的大小(宽或者高)-有限制宽或高
内层div,包裹整个可以滚动的部分
内层div高度一定大于外层div的宽或高,才能滚动

1、先开始写一个简单demo,最基本的代码架构

template

<div ref=\"wrapper\" class=\"wrapper\">
 <ul class=\"content\">
 <li>...</li>
 <li>...</li>
 </ul>
</div>

css

/*对外层div进行了高度上的限制*/
.wrapper {
 display: fixed;
 left: 0;
 top: 0;
 bottom: 0;
 width: 100%;
 height:300px;
 overflow:hidden;
}
.content {
 width:100%;
 height:800px;
 background:blue;
}


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)
 })
 }

原理已经讲清楚了,上面的代码是一个功能示例,码友结合自己项目扩展就行啦。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

收藏 打印