better-scroll 入门使用笔记

一、安装

1.1 直接引入 bscroll.js 文件

蓝奏云下载:bscroll.js

1.2 npm 安装

cnpm install better-scroll --save

二、使用

2.1 直接 引入bscroll.js 使用

使用 better-scroll 需要有一个根标签,并且这个根标签下只能有一个标签
然后:需要把根元素挂载到Bscroll对象的 第一个参数上,第二个参数是对象,可以省略

以下类名为wrapper的元素就是根标签。

<style>
  .wrapper {
    height: 200px;
    background-color: teal;
    overflow: hidden;
  }
</style>

<body>
  <div class="wrapper" ref="reference">
    <ul>
      <button class='btn'>按钮</button>
      <li>列表数据1</li>
      <li>列表数据2</li>
      <li>列表数据3</li>
      <li>列表数据4</li>
      <li>列表数据5</li>
      <li>列表数据6</li>
      <li>列表数据7</li>
      <li>列表数据8</li>
      <li>列表数据9</li>
      <li>列表数据10</li>
      <li>列表数据11</li>
      <li>列表数据12</li>
      <li>列表数据13</li>
      <li>列表数据14</li>
      <li>列表数据15</li>
      <li>列表数据16</li>
      <li>列表数据17</li>
      <li>列表数据18</li>
      <li>列表数据19</li>
      <li>列表数据20</li>
    </ul>
  </div>

</body>
<script src="./bscroll.js"></script>

  // probeType监听滚动位置  默认不监听
  // 0 不监听 
  // 1 明确不监听 
  // 2 在按下监听 松开不监听
  // 3 只要是滚动(包括惯性行为) 都监听
  const bscroll = new BScroll(document.querySelector('.wrapper'), {
    probeType: 3,
    click:false, //默认click为false 会阻止默认click事件
    //开启下拉加载
    pullUpLoad: true
  })

  bscroll.on('scroll', (postion) => {
    // console.log(postion);
  })
  bscroll.on('pullingUp', () => {
    console.log('加载');
    // 等数据请求完成,并将新的数据展示出来后

    //调用一次这个函数,才能触发下一次。 
    bscroll.finishPullUp()
  })

标准使用格式:

<div id="wrapper">
  <div class="content">
  	...
  	这个位置随意
    <h2>这里边随意</h2>
    <h2>这里边随意</h2>
    这个位置也随意
    ...
  </div>
</div>
<script>
	//需要挂载把根元素挂载到Bscroll对象的一个参数上
	const bscroll = new BScroll(document.querySelector('.wrapper'), {
	  probeType: 3,
	})
</script>

2.2 在Vue项目中使用

注:
ref 如果是绑定在组件中,那么通过this.$refs.refname获取到的是一个组件对象
ref 如果是绑定在普通元素中,那么通过this.$refs.refname获取到的是一个元素对象

<template>
  <div class="wrapper" ref="wrapper">
    <div>
      <ul class="content">
        <li>分类列表1</li>
        <li>分类列表2</li>
        <li>分类列表3</li>
        <li>分类列表4</li>
        <li>分类列表5</li>
        <li>分类列表6</li>
        <li>分类列表7</li>
        <li>分类列表8</li>
        <li>分类列表9</li>
        <li>分类列表10</li>
        <li>分类列表11</li>
        <li>分类列表12</li>
        <li>分类列表13</li>
        <li>分类列表14</li>
        <li>分类列表15</li>
        <li>分类列表16</li>
        <li>分类列表17</li>
        <li>分类列表18</li>
        <li>分类列表19</li>
        <li>分类列表20</li>
      </ul>
    </div>
  </div>
</template>

<script>
import BScroll from "better-scroll";

export default {
  name: "Category",
  data() {
    return {
      scroll: null,
    };
  },
  // 组件创建完后调用
  mounted() {
    this.scroll = new BScroll(this.$refs.wrapper, {
      probeType: 3,
      pullUpLoad: true,
    });

    this.scroll.on("pullingUp", () => {
      console.log("加载");
      //调用一次这个函数,才能触发下一次。
      this.scroll.finishPullUp();
    });
  },
};
</script>

<style scoped>
.wrapper {
  height: 150px;
  background-color: teal;
  overflow: hidden;
}
li{
  height: 100px;
}
</style>

©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页