在Vue中把滚动加载函数抽取为单独的TS/JS文件

我相信你们也会遇到在页面使用scroll_fnc加载数据的问题，如果我们在每个使用页面进行编写将会非常麻烦，并且涉及到每个页面可能我们需要加载数据的时候使用的api请求，在距离底部多少px进行执行方法 或多或少都是不一样的，所以我们如果能把他抽为一个单独的文件那就再好不过了！let`s go

作者使用的是vue-cli3+Typescript进行开发

为了模拟数据请求 我们进行安装 mock.js，axios

npm i mockjs @types/mockjs axios

建立单独的baseAxios.ts文件，内容如下

import axios from 'axios';
const host: string = 'http://localhost:3000';
export const articleMoreData = (params?: any): any => {
    return axios.get('/articleMore', {params: params});
};
export default axios;

模拟数据，新建mock.ts

const Random = Mock.Random;

const articleDataMore: () => {} = (): {} => {
    let articles: any[] = [];
    for (let i = 0; i < 10; i++) {
        const newArticleObject: {} = {
            id: Random.natural(0, 2000),
            author_name: Random.name(),
            title: Random.csentence(8, 30),
            type: Random.csentence(3, 6),
            thumbnail_pic_s: Random.image('300x250'),
            articleTime: Random.date() + ' ' + Random.time(),
            agreeNum: Random.natural(0, 30000),
            pingNum: Random.natural(0, 300)
        };
        articles.push(newArticleObject);
    }
    return {
        articles
    };
};
Mock.mock('/articleMore', 'get', articleDataMore);

mock数据需要进行一些配置；

我们到main.ts/main.js文件中，进行引入。
require('./config/mock');

OK，现在我们到了最重要的部分 ，我们需要把scroll_fnc抽为单独的ts文件

新建一个common.ts文件

import {articleMoreData} from './baseAxios';  //引入我们定义的请求方法

// 定义scrollMoreData请求方法
const scrollMoreData: (payload: {}) => void = (payload: {}): void => {
    let _payload: any = payload;
    let isScroll:boolean = false;
    let returnData: any[] = [];
    window.onscroll = () => {
        let windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
        let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        let scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
        if (scrollHeight - windowHeight - scrollTop <= _payload.scrollNum && !isScroll) {
            isScroll = true;
            _payload.api()
                .then((data: any) => {
                    for (let i=0;i<data.data.articles.length;i++) {
                       _payload.target[_payload.targetData].push(data.data.articles[i])
                    }
                    isScroll = false;
                })
                .catch((err: any) => {
                    console.log(err);
                });
        }
    };
};
// 在这里作者只做了，触底高度，请求api的参数传递，target是我们在Vue的this，targetData代表的是我们想要增加数据量的数组

// 不要忘记导出
export default {
    scrollMoreData
};

为了在全局我们都能使用到这个方法，我们把他挂载在Vue.prototype上

// main.ts

import commonts from './config/common';
Vue.prototype.commonts = commonts

最终我们在页面就可以进行使用此方法了

index.vue

// 使用ts的朋友记得定义
commonts: any;

// 定义存储数据的数组
 dataList: Object[] = [];

// 在mounted里面使用我们定义的方法
mounted(): void {
       this.getMoreData()
}


getMoreData() {
      let payload = {
           target:this,
           scrollNum:300,
           api:articleMoreData,
           targetData:'dataList',
      }
      this.commonts.scrollMoreData(payload);
}

ok,到此你就可以在不同的页面中使用scroll_fnc函数了，只需传递相应的参数即可，欢迎大佬指点。