better-scroll

丶丁大树丶

已于 2022-06-11 15:27:51 修改

阅读量101

点赞数

分类专栏：移动端滚动文章标签： vue.js 前端 javascript

于 2022-06-08 22:44:34 首次发布

本文链接：https://blog.csdn.net/m0_61383658/article/details/125193308

版权

移动端同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

滚动

1 篇文章 0 订阅

订阅专栏

BetterScroll是一个用于移动端和PC的滚动插件，它基于iscroll并进行了优化和扩展，支持vue等框架。本文介绍了如何安装和使用BetterScroll，包括通过CDN引入和npm安装，以及在Vue中配置滚动、上拉加载和下拉刷新等功能。

摘要由CSDN通过智能技术生成

BetterScroll 是一款重点解决移动端（已支持 PC）各种滚动场景需求的插件。它的核心是借鉴的 iscroll 的实现，它的 API 设计基本兼容 iscroll，在 iscroll 的基础上又扩展了一些 feature 以及做了一些性能优化。 --来自官方介绍

一直在使用iscroll，但是因为其不在更新，无意间看到的这个插件，持续更新中，而且很好用，并且支持vue。

安装

npm install better-scroll -save   # 安装完整所有插件

npm install @better-scroll/core   # 安装核心滚动

CDN

<script src="https://unpkg.com/better-scroll@latest/dist/better-scroll.js"></script>

// minify
<script src="https://unpkg.com/better-scroll@latest/dist/better-scroll.min.js"></script>

let wrapper = document.getElementById("wrapper")
let bs = BetterScroll.createBScroll(wrapper, {})

使用

<div class="wrapper">
  <ul class="content">
    <li>...</li>
    <li>...</li>
    ...
  </ul>
  <!-- 这里可以放一些其它的 DOM，但不会影响滚动 -->
</div>

<template>
  <div class="wrapper" ref="wrapper">
    <ul class="content">
      <li>我是1</li>
      <li>我是2</li>
      <li>我是3</li>
      <li>我是4</li>
      <li>我是5</li>
      <li>我是6</li>
      <li>我是7</li>
      ...
    </ul>
  </div>
</template>

<script>
import  bs from 'better-scroll'

export default {
  name:"scroll",
  data() {
    return {
      dht :null
    }
  },
  mounted() {
   this.dht = new bs(this.$refs.wrapper,{
      probeType: 3,
      pullUpLoad:true, //开启上拉
      pullDownRefresh: true,//开启下拉
      click:true,
    })
    // 滚动
    this.dht.on('scroll',(position)=>{
      // console.log(position);
    }),
    // 上拉
     this.dht.on('pullingUp',()=>{
      console.log('上拉加载');
      setTimeout(()=>{
        this.dht.finishPullUp()
      },1000)
    }),
    // 下拉
     this.dht.on('pullingDown',()=>{
      console.log('下拉加载');

      setTimeout(()=>{
        this.dht.finishPullDown()
      },1000)
    })
  }
</script>

<style scoped>

</style>