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