vuejs学习与总结——Better-Scroll的使用

概述

最近在使用vuejs开发一个项目时,需要对所展示的内容进行滚动,发现原生的谷一激动当我们将项目适配到手机上会出现卡顿的现象。上网查阅了资料,发现 有一个比较好的解决方法,那就是使用——better-scroll

基本使用过程

在我们需要使用时,必须安装此插件
vuejs学习与总结——Better-Scroll的使用_第1张图片
安装成功后,我们就可以进行使用了。
下面举个例子来具体的认识一下better-scroll的具体用法:

  • 引入文件
<script src="./bscroll.js"></script>
  • 应用完成后后,创建一个BScroll的对象,第一个参数:传入我们所需要管理的url,在此我们需要进行管理的是content,需要注意的是:content必须有一个固定的高度。
    vuejs学习与总结——Better-Scroll的使用_第2张图片
const bscroll = new BScroll(document.querySelector('.content'),{
}
  • 进行一些额外的操作
 const bscroll = new BScroll(document.querySelector('.content'),{
      //可以进行一些额外的操作
      //probetype:实时监听
      // :0,1不实时的侦测;
      // 2:实时的侦测
      //3.只要是滚动,都侦测
      probetype:3,
      //当所监听的是按钮时,必须设置为true
      click:true,
      //上拉加载更多
      pullUpLoad:true

    })
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .content{
      height:200px;
      background-color: lightpink;
      overflow: hidden;
    }
  </style>
</head>
<body>
<div class="content">
  <ul>
    <button class="btn">按钮</button>
    <li>列表</li>
    <li>列表</li>
    <li>列表</li>
    <li>列表</li>
    <li>列表</li>
    <li>列表</li>
    <li>列表</li>
    <li>列表</li>
    <li>列表</li>
    <li>列表</li>
    <li>列表</li>
    <li>列表</li>
    <li>列表</li>
    <li>列表</li>
    <li>列表</li>
    <li>列表</li>
    <li>列表</li>
    <li>列表</li>
    <li>列表</li>
    <li>列表</li>
    <li>列表</li>
    <li>列表</li>
    <li>列表</li>
    <li>列表</li>
    <li>列表</li>
    <li>列表</li>
    <li>列表</li>
    <li>列表</li>
    <li>列表</li>
    <li>列表</li>
    <li>列表</li>
    <li>列表</li>
    <li>列表</li>

  </ul>
</div>
<!--一、引入bccroll-->
<script src="./bscroll.js"></script>

  <script>
    //默认情况下,BScroll是不可以实时的监听经停滚动位置

    // 二、应用完成后后,创建一个BScroll的对象,第一个参数:传入我们所需要管理的url,在此我们需要进行管理的是content,需要注意的是:content必须有一个固定的高度
    const bscroll = new BScroll(document.querySelector('.content'),{
      //可以进行一些额外的操作
      //probetype:实时监听
      // :0,1不实时的侦测;
      // 2:实时的侦测
      //3.只要是滚动,都侦测
      probetype:3,
      //当所监听的是按钮时,必须设置为true
      click:true,
      //上拉加载更多
      pullUpLoad:true

    })

    bscroll.on('scroll',(position)=>{
      // console.log(position);
    })
    //原生监听按钮点击
    document.querySelector('.btn').addEventListener('click',function(){
      // console.log('------');
    })
    //当我们需要上拉加载更多时,到时候会回调此函数
    bscroll.on('pullingUp',()=>{
      console.log('上拉加载更多');
      //但是他默认只能监听一次,显然和我们的需求不符,这时我们需要先去监听网络请求
      //数据其你去完成,并且将新的数据展示出来后
      //进行下一次下拉加载更多
      setTimeout(()=>{
        bscroll.finishUp()
      },2000)

    })
</script>
</body>
</html>

你可能感兴趣的:(vuejs学习与总结——Better-Scroll的使用)