基于Vuescroll.js封装上拉加载、下拉刷新组件实际应用开发

什么是 vuescroll

摘自官网描述: vuescroll 是一款基于 Vue.js 自定义滚动条的插件,它有两种模式: native: 适用于 PC 端,支持基本的自定义滚动条。 slide: 适用于移动端, 支持下拉-加载,上拉刷新,轮播等。 但是,这并不意味着 slide模式只能用于移动端,只是因为移动端与 slide 模式更加契合而已。废话不多说,直接上代码

安装

npm install vuescroll --save

全局注册

// **main.js**
import Vue from 'vue';
import vuescroll from 'vuescroll';

// 你可以在这里设置全局配置
Vue.use(vuescroll, {
  ops: {}, // 在这里设置全局默认配置
  name: 'myScroll' // 在这里自定义组件名字,默认是vueScroll
});
/*
 * 或者
 */
Vue.use(vuescroll); // install the vuescroll first
Vue.prototype.$vuescrollConfig = {
  bar: {
    background: '#000'
  }
};

局部注册



本地封装vue-scroll.vue组件







在test.vue 中使用






完成效果-测试-以及在实际项目钟使用

图片描述

你可能感兴趣的:(javascript,vue.js,下拉刷新,上拉加载,上拉刷新-下拉刷新)