使用better-scroll实现加载更多

github:https://github.com/ustbhuangyi/better-scroll

1.引入better-scroll

2.html结构

    <div id="wrapper">
      <ul id="wrapperUl">
        <li v-for="item in list">
          <div class="fl"><img :src="item.imgUrl" alt=""></div>
          <div class="fr">
            <div class="title">{{item.title}}</div>
            <div class="p">{{item.dis}}</div>
          </div>
        </li>
        <li id="loadMore">加载更多</li>
      </ul>
    </div>

创建一个最外层容器,并给这个容器warpepr添加一个高。整个滚动会以这个高位识别区。如果是全屏滚动,可以直接把宽高都设置成100%,但是必须得有高,不然无法触发。

3.js部分

import BScroll from 'better-scroll'
export default {
  name: 'hello',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      list :[
        {'imgUrl':'http://mazhaoyang.cn/demos/redpocket/static/img/pic1.jpg','title':'双绞线(Twisted-PairCable)','dis':'双绞线(twisted pair,TP)是一种综合布线工程中最常用的传输介质,是由两根具有绝缘保护层的铜导线组成的。把两根绝缘的铜导线按一定密度互相绞在一起,每一根导线在传输中辐射出来的电波会被另一根线上发出的电波抵消,有效降低信号干扰的程度。'},
        {'imgUrl':'http://mazhaoyang.cn/demos/redpocket/static/img/pic1.jpg','title':'双绞线(Twisted-PairCable)','dis':'双绞线(twisted pair,TP)是一种综合布线工程中最常用的传输介质,是由两根具有绝缘保护层的铜导线组成的。把两根绝缘的铜导线按一定密度互相绞在一起,每一根导线在传输中辐射出来的电波会被另一根线上发出的电波抵消,有效降低信号干扰的程度。'},
        {'imgUrl':'http://mazhaoyang.cn/demos/redpocket/static/img/pic1.jpg','title':'双绞线(Twisted-PairCable)','dis':'双绞线(twisted pair,TP)是一种综合布线工程中最常用的传输介质,是由两根具有绝缘保护层的铜导线组成的。把两根绝缘的铜导线按一定密度互相绞在一起,每一根导线在传输中辐射出来的电波会被另一根线上发出的电波抵消,有效降低信号干扰的程度。'},
        {'imgUrl':'http://mazhaoyang.cn/demos/redpocket/static/img/pic1.jpg','title':'双绞线(Twisted-PairCable)','dis':'双绞线(twisted pair,TP)是一种综合布线工程中最常用的传输介质,是由两根具有绝缘保护层的铜导线组成的。把两根绝缘的铜导线按一定密度互相绞在一起,每一根导线在传输中辐射出来的电波会被另一根线上发出的电波抵消,有效降低信号干扰的程度。'},
        {'imgUrl':'http://mazhaoyang.cn/demos/redpocket/static/img/pic1.jpg','title':'双绞线(Twisted-PairCable)','dis':'双绞线(twisted pair,TP)是一种综合布线工程中最常用的传输介质,是由两根具有绝缘保护层的铜导线组成的。把两根绝缘的铜导线按一定密度互相绞在一起,每一根导线在传输中辐射出来的电波会被另一根线上发出的电波抵消,有效降低信号干扰的程度。'},
      ]
    }
  },
  mounted(){
    let scroll = new BScroll(document.getElementById('wrapper'),{
      probeType: 1,
      startX: 0,
      startY: 0
    });
    let loadMore = document.getElementById('loadMore');
    let wrapper = document.getElementById('wrapper');
    let wrapperUl = document.getElementById('wrapperUl');
    let _this = this;

    scroll.on('touchend',(pos)=>{
        if(loadMore.offsetTop + pos.y <wrapper.offsetHeight){
            let  newArr = [
              {'imgUrl':'http://mazhaoyang.cn/demos/redpocket/static/img/pic1.jpg','title':'双绞线(Twisted-PairCable)','dis':'双绞线(twisted pair,TP)是一种综合布线工程中最常用的传输介质,是由两根具有绝缘保护层的铜导线组成的。把两根绝缘的铜导线按一定密度互相绞在一起,每一根导线在传输中辐射出来的电波会被另一根线上发出的电波抵消,有效降低信号干扰的程度。'},
              {'imgUrl':'http://mazhaoyang.cn/demos/redpocket/static/img/pic1.jpg','title':'双绞线(Twisted-PairCable)','dis':'双绞线(twisted pair,TP)是一种综合布线工程中最常用的传输介质,是由两根具有绝缘保护层的铜导线组成的。把两根绝缘的铜导线按一定密度互相绞在一起,每一根导线在传输中辐射出来的电波会被另一根线上发出的电波抵消,有效降低信号干扰的程度。'},
              {'imgUrl':'http://mazhaoyang.cn/demos/redpocket/static/img/pic1.jpg','title':'双绞线(Twisted-PairCable)','dis':'双绞线(twisted pair,TP)是一种综合布线工程中最常用的传输介质,是由两根具有绝缘保护层的铜导线组成的。把两根绝缘的铜导线按一定密度互相绞在一起,每一根导线在传输中辐射出来的电波会被另一根线上发出的电波抵消,有效降低信号干扰的程度。'},
              {'imgUrl':'http://mazhaoyang.cn/demos/redpocket/static/img/pic1.jpg','title':'双绞线(Twisted-PairCable)','dis':'双绞线(twisted pair,TP)是一种综合布线工程中最常用的传输介质,是由两根具有绝缘保护层的铜导线组成的。把两根绝缘的铜导线按一定密度互相绞在一起,每一根导线在传输中辐射出来的电波会被另一根线上发出的电波抵消,有效降低信号干扰的程度。'},
              {'imgUrl':'http://mazhaoyang.cn/demos/redpocket/static/img/pic1.jpg','title':'双绞线(Twisted-PairCable)','dis':'双绞线(twisted pair,TP)是一种综合布线工程中最常用的传输介质,是由两根具有绝缘保护层的铜导线组成的。把两根绝缘的铜导线按一定密度互相绞在一起,每一根导线在传输中辐射出来的电波会被另一根线上发出的电波抵消,有效降低信号干扰的程度。'},
            ];
          _this.list = _this.list.concat(newArr);
          setTimeout(function () {
            scroll.refresh();
          }, 800);
        }
    })
  }
}

这里,首先引入better-scroll没什么可说的,在m生命周期mounted的时候,我将最外层容器绑定到bBScroll。

let scroll = new BScroll(document.getElementById('wrapper'),{
      probeType: 1,
      startX: 0,
      startY: 0
    });

然后通过 scroll.on('touchend',(pos)=>{}) 监听滚动事件。当pos.y到达一个值的时候,触发加载更新操作。

这里需要注意的是,第一,probeType如果不配置,scroll事件会被截流,无法检测到。第二,scroll.refresh()需要在dom渲染完成之后,执行。也就是放在setTimeoout里面的方法。

随机浏览