本文共 1633 字，大约阅读时间需要 5 分钟。

一、需求问题

在vue的项目中，我们可能也经常会遇到这样的需求。当在页面当中，对页面进行下拉刷新，重新请求数据，加载新的内容。针对这个，我们可以使用better-scroll，在此基础上进行封装下拉刷新组件，实现多个页面都可以使用这个组件，下拉刷新，得到复用。

二、需求分析

1. 在components文件夹中，建立Scroller文件夹，里面建立index.vue文件，作为Scroller组件。这个下拉刷新组件在页面的多个位置中都可能会用的到，可以全局注册组件。在项目的main.js文件中写以下的代码配置，进行全局注册

import Scroller from '@/components/Scroller'//  全局注册 Scroller 组件Vue.component('Scroller', Scroller);

2. 在Scroller组件中，引入better-scroll，在props中，写handleToScroll 和 handleToTouchEnd这两个属性，在后面组件传值的时候需要使用。在mounted()钩子函数中，通过 new BScroll创建对象，传入DOM对象和配置参数项。通过scroll.on进行绑定scroll和touchEnd事件，在后面通过pos参数写回调函数，分别调用handleToScroll 和 handleToTouchEnd。

3. 在需要用到的页面中，就可以直接写Scroller组件，在组件内部进行绑定属性，handleToScroll 和 handleToTouchEnd这两个属性，它们也是函数。在methods中，写handleToScroll 和 handleToTouchEnd 这两个函数，参数为pos，通过pos.y进行判断位置，然后执行相应的操作。同时在data中，写pullDownMsg参数为空，这个会进行动态的显示提示消息，赋予不同的值。

三、需求实现

1. main.js

import Vue from 'vue'import App from './App.vue'import router from './router'import store from './store'import axios from 'axios'Vue.prototype.axios = axios;Vue.filter('setWH', (url, arg) => {     return url.replace(/w\.h/, arg);});Vue.config.productionTip = false;import Scroller from '@/components/Scroller'//  全局注册 Scroller 组件Vue.component('Scroller', Scroller);new Vue({     router,  store,  render: h => h(App)}).$mount('#app')

2. Scroll文件夹下的index.vue，封装组件

3. movie下的index.vue， 路由页面使用组件