标签：... 滚动 Scroll Better BScroll ta bscroll 加载

简介

1. Better-Scroll是一款专注于滚动的插件
2. 当在浏览器端，由于ta的加持，还算顺畅
3. 但在移动端，没有了浏览器，就会出现卡顿的现象
4. 此插件就是解决这个问题，让滚动流畅，带来极致享受

使用（vue）

安装：

npm install better-scroll --save

引入：

import BScroll from 'better-scroll'

使用：

<div class="wrapper"><!--class名字可以随便起，用ta来包括滚动内容-->
  ...
</div>

<script>
  mounted() {
    const bscroll = new BScroll(document.querySelector('.wrapper'), {
      /**
       * 默认情况下 BScroll 是不能监听滚动位置的
       * 我们需要使用ta的一个属性 probeType
       * 值为0或1不监测
       * 值为2，开启监测，但监测不到手指离开的惯性滚动
       * 值为3，监测任何滚动
       */
      probeType: 3,

      /**
       * BScroll包括的button标签默认是不能点击的
       * 如果有需要，我们可以手动将 click 属性设为true
       */
      click: true,

      /**
       * 当你滚动到底部需要加载新的数据时，可以使用此属性
       */
      pullUpLoad: true
    }) //传入标签、class或id定位到dom元素

    // 监听加载请求
    bscroll.on('pullingUp', () => {
      console.log('加载代码...')
      /**
       * 加载完成后必须通知ta结束这次加载
       * 才会执行下一次加载
       */
      bscroll.finishPullUp()
    })

    // 监听滚动
    bscroll.on('scroll', {
      // ...
    })
  }
</script>

标签：...,滚动,Scroll,Better,BScroll,ta,bscroll,加载
来源： https://blog.csdn.net/weixin_44338156/article/details/121641814

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。