[前端工具]vue2框架实现perfect-scrollbar简单使用

基本介绍

完美滚动条 (Perfect Scrollbar) 是一个轻量级的 JavaScript 库，用于创建美观且功能丰富的自定义滚动条，它在现代浏览器中提供了一个优雅的解决方案来替代默认的系统滚动条。这个库支持多种定制选项，包括对触摸设备的支持，非常适合那些寻求增强用户体验的Web开发

安装

npm install perfect-scrollbar --save

使用

在这里我们以表格为例，这里我们使用的vue2框架

比如我们要给表格添加一个滚动条

首先引入滚动条

import PerfectScrollbar from 'perfect-scrollbar'

在data中准备一个ps用来实例化滚动条

  data() {
    return {
      ps: null, // perfectScrollbar
  },

在methods中准备初始化方法，对滚动条进行初始化，在mounted钩子里面调用，注意如果滚动条的渲染比较晚，在created里面拿不到的，要等到nextTick第一次渲染后才能拿到

  <el-table ref="alarmTable">XXX</el-table>

  methods: {
    initPs () {
      this.$nextTick(() => {
        // 给表格设置ref为alarmTable，通过$refs.bodyWrapper取到实例,初始化滚动条
        this.ps = new PerfectScrollbar(this.$refs.alarmTable.bodyWrapper)
      })
    },
  }

  mounted () {
    this.$nextTick(() => {
      this.initPs()
    })
  },

现在以及初始化完成了，那么我们对滚动条做一些基本的使用

监听滚动条，页面滚动，滚动条刷新：

  watch: {
    // 此处data为表格数据
    data () {
      this.$nextTick(() => this.ps.update())
    }
  },

当滚动条滚动到底时触发事件：

// 添加监听器
mounted () {
    this.$refs.alarmTable.bodyWrapper.addEventListener('ps-y-reach-end', this.onYReachEnd)
},

methods: {    
    onYReachEnd () {
      // 触发事件 做点什么
      this.$emit('y-reach-end');
    },
}

销毁实例

  beforeDestroy () {
    if (this.ps) {
      this.ps.destroy()
    }
  }