美文网首页让前端飞Web前端之路
在Vue中把滚动加载函数抽取为单独的TS/JS文件

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

作者: 来一罐可乐 | 来源:发表于2019-08-13 09:53 被阅读5次

    我相信你们也会遇到在页面使用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函数了,只需传递相应的参数即可,欢迎大佬指点。

    相关文章

      网友评论

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

        本文链接:https://www.haomeiwen.com/subject/csomjctx.html