vue实现pc端上拉加载功能，不兼容移动端
所用插件：Mock.js 这个只用到它简单的功能，拦截ajax请求。
vue和axios，vue基础知识请看文档。
axios类似于jquery的ajax方法。
以下是是该功能所有代码，其中mock的数据可以不必理会。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/reset.css">
<script src="js/mock.js"></script>
<script src="js/vue.js"></script>
<script src="js/axios.min.js"></script>
<style>
.article-title h3 {
font-size: 28px;
line-height: 40px;
font-weight: 700;
font-family: "Microsoft Yahei", "微软雅黑", "宋体";
}
</style>
</head>
<body>
<div id="app">
<ul>
<li v-for="item in message" class="article-title">
<h3>{{item.title}}</h3>
<div>
<span>{{item.channel}}</span><i v-show="item.timer">{{item.timer}}</i>
</div>
{{item.content}}
</li>
<div v-show="!pullRefreshss" style="font-size: 24px">加载中...</div>
</ul>
<a href="./test.html" style="display: block;height: 30px;width: 100px;background: red"></a>
</div>
<script>
Mock.mock('http://test.com?page=1', {
artDetail: [{
title: '1女子交3万被介绍4位门当户对男士 结果悲剧了',
timer: '03-15',
channel: '搜狐新闻',
content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
}, {
title: '1女子交3万被介绍4位门当户对男士 结果悲剧了',
timer: '',
channel: '搜狐新闻',
content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
}]
});
Mock.mock('http://test.com?page=2', {
artDetail: [{
title: '2女子交3万被介绍4位门当户对男士 结果悲剧了',
timer: '03-15',
channel: '搜狐新闻',
content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
}, {
title: '1女子交3万被介绍4位门当户对男士 结果悲剧了',
timer: '',
channel: '搜狐新闻',
content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
}, {
title: '女子交3万被介绍4位门当户对男士 结果悲剧了',
timer: '03-15',
channel: '搜狐新闻',
content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
}]
});
Mock.mock('http://test.com?page=3', {
artDetail: [{
title: '3女子交3万被介绍4位门当户对男士 结果悲剧了',
timer: '03-15',
channel: '搜狐新闻',
content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
}, {
title: '1女子交3万被介绍4位门当户对男士 结果悲剧了',
timer: '',
channel: '搜狐新闻',
content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
}, {
title: '女子交3万被介绍4位门当户对男士 结果悲剧了',
timer: '03-15',
channel: '搜狐新闻',
content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
}, {
title: '女子交3万被介绍4位门当户对男士 结果悲剧了',
timer: '',
channel: '搜狐新闻',
content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
}]
});
Mock.mock('http://test.com?page=4', {
artDetail: [{
title: '4女子交3万被介绍4位门当户对男士 结果悲剧了',
timer: '03-15',
channel: '搜狐新闻',
content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
}, {
title: '1女子交3万被介绍4位门当户对男士 结果悲剧了',
timer: '',
channel: '搜狐新闻',
content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
}, {
title: '女子交3万被介绍4位门当户对男士 结果悲剧了',
timer: '03-15',
channel: '搜狐新闻',
content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
}, {
title: '女子交3万被介绍4位门当户对男士 结果悲剧了',
timer: '',
channel: '搜狐新闻',
content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
}, {
title: '女子交3万被介绍4位门当户对男士 结果悲剧了',
timer: '',
channel: '搜狐新闻',
content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
}, {
title: '女子交3万被介绍4位门当户对男士 结果悲剧了',
timer: '',
channel: '搜狐新闻',
content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
}, {
title: '女子交3万被介绍4位门当户对男士 结果悲剧了',
timer: '03-15',
channel: '搜狐新闻',
content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
}, {
title: '女子交3万被介绍4位门当户对男士 结果悲剧了',
timer: '03-15',
channel: '搜狐新闻',
content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
}, {
title: '女子交3万被介绍4位门当户对男士 结果悲剧了',
timer: '',
channel: '搜狐新闻',
content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
}, {
title: '女子交3万被介绍4位门当户对男士 结果悲剧了',
timer: '03-15',
channel: '搜狐新闻',
content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
}, {
title: '女子交3万被介绍4位门当户对男士 结果悲剧了',
timer: '',
channel: '搜狐新闻',
content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
}, {
title: '女子交3万被介绍4位门当户对男士 结果悲剧了',
timer: '',
channel: '搜狐新闻',
content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
}, {
title: '女子交3万被介绍4位门当户对男士 结果悲剧了',
timer: '',
channel: '搜狐新闻',
content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
}, {
title: '女子交3万被介绍4位门当户对男士 结果悲剧了',
timer: '',
channel: '搜狐新闻',
content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
}, {
title: '女子交3万被介绍4位门当户对男士 结果悲剧了',
timer: '',
channel: '搜狐新闻',
content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
}, {
title: '女子交3万被介绍4位门当户对男士 结果悲剧了',
timer: '',
channel: '搜狐新闻',
content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
}, {
title: '女子交3万被介绍4位门当户对男士 结果悲剧了',
timer: '',
channel: '搜狐新闻',
content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
}, {
title: '女子交3万被介绍4位门当户对男士 结果悲剧了',
timer: '',
channel: '搜狐新闻',
content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
}, {
title: '女子交3万被介绍4位门当户对男士 结果悲剧了',
timer: '',
channel: '搜狐新闻',
content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
}]
});
Mock.mock('http://test.com?page=5', {
artDetail: [{
title: '5女子交3万被介绍4位门当户对男士 结果悲剧了',
timer: '03-15',
channel: '搜狐新闻',
content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
}, {
title: '1女子交3万被介绍4位门当户对男士 结果悲剧了',
timer: '',
channel: '搜狐新闻',
content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
}, {
title: '女子交3万被介绍4位门当户对男士 结果悲剧了',
timer: '03-15',
channel: '搜狐新闻',
content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
}, {
title: '女子交3万被介绍4位门当户对男士 结果悲剧了',
timer: '',
channel: '搜狐新闻',
content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
}, {
title: '女子交3万被介绍4位门当户对男士 结果悲剧了',
timer: '',
channel: '搜狐新闻',
content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
}, {
title: '女子交3万被介绍4位门当户对男士 结果悲剧了',
timer: '',
channel: '搜狐新闻',
content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
}, {
title: '女子交3万被介绍4位门当户对男士 结果悲剧了',
timer: '03-15',
channel: '搜狐新闻',
content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
}, {
title: '女子交3万被介绍4位门当户对男士 结果悲剧了',
timer: '03-15',
channel: '搜狐新闻',
content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
}, {
title: '女子交3万被介绍4位门当户对男士 结果悲剧了',
timer: '',
channel: '搜狐新闻',
content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
}, {
title: '女子交3万被介绍4位门当户对男士 结果悲剧了',
timer: '03-15',
channel: '搜狐新闻',
content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
}, {
title: '女子交3万被介绍4位门当户对男士 结果悲剧了',
timer: '',
channel: '搜狐新闻',
content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
}, {
title: '女子交3万被介绍4位门当户对男士 结果悲剧了',
timer: '',
channel: '搜狐新闻',
content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
}, {
title: '女子交3万被介绍4位门当户对男士 结果悲剧了',
timer: '',
channel: '搜狐新闻',
content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
}, {
title: '女子交3万被介绍4位门当户对男士 结果悲剧了',
timer: '',
channel: '搜狐新闻',
content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
}, {
title: '女子交3万被介绍4位门当户对男士 结果悲剧了',
timer: '',
channel: '搜狐新闻',
content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
}, {
title: '女子交3万被介绍4位门当户对男士 结果悲剧了',
timer: '',
channel: '搜狐新闻',
content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
}, {
title: '女子交3万被介绍4位门当户对男士 结果悲剧了',
timer: '',
channel: '搜狐新闻',
content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
}, {
title: '女子交3万被介绍4位门当户对男士 结果悲剧了',
timer: '',
channel: '搜狐新闻',
content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
}, {
title: '女子交3万被介绍4位门当户对男士 结果悲剧了',
timer: '',
channel: '搜狐新闻',
content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
}]
});
Mock.mock('http://test.com?page=6', {
artDetail: [{
title: '6女子交3万被介绍4位门当户对男士 结果悲剧了',
timer: '03-15',
channel: '搜狐新闻',
content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
}, {
title: '1女子交3万被介绍4位门当户对男士 结果悲剧了',
timer: '',
channel: '搜狐新闻',
content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
}, {
title: '女子交3万被介绍4位门当户对男士 结果悲剧了',
timer: '03-15',
channel: '搜狐新闻',
content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
}, {
title: '女子交3万被介绍4位门当户对男士 结果悲剧了',
timer: '',
channel: '搜狐新闻',
content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
}, {
title: '女子交3万被介绍4位门当户对男士 结果悲剧了',
timer: '',
channel: '搜狐新闻',
content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
}, {
title: '女子交3万被介绍4位门当户对男士 结果悲剧了',
timer: '',
channel: '搜狐新闻',
content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
}, {
title: '女子交3万被介绍4位门当户对男士 结果悲剧了',
timer: '03-15',
channel: '搜狐新闻',
content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
}, {
title: '女子交3万被介绍4位门当户对男士 结果悲剧了',
timer: '03-15',
channel: '搜狐新闻',
content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
}, {
title: '女子交3万被介绍4位门当户对男士 结果悲剧了',
timer: '',
channel: '搜狐新闻',
content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
}, {
title: '女子交3万被介绍4位门当户对男士 结果悲剧了',
timer: '03-15',
channel: '搜狐新闻',
content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
}, {
title: '女子交3万被介绍4位门当户对男士 结果悲剧了',
timer: '',
channel: '搜狐新闻',
content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
}, {
title: '女子交3万被介绍4位门当户对男士 结果悲剧了',
timer: '',
channel: '搜狐新闻',
content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
}, {
title: '女子交3万被介绍4位门当户对男士 结果悲剧了',
timer: '',
channel: '搜狐新闻',
content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
}, {
title: '女子交3万被介绍4位门当户对男士 结果悲剧了',
timer: '',
channel: '搜狐新闻',
content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
}, {
title: '女子交3万被介绍4位门当户对男士 结果悲剧了',
timer: '',
channel: '搜狐新闻',
content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
}, {
title: '女子交3万被介绍4位门当户对男士 结果悲剧了',
timer: '',
channel: '搜狐新闻',
content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
}, {
title: '女子交3万被介绍4位门当户对男士 结果悲剧了',
timer: '',
channel: '搜狐新闻',
content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
}, {
title: '女子交3万被介绍4位门当户对男士 结果悲剧了',
timer: '',
channel: '搜狐新闻',
content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
}, {
title: '女子交3万被介绍4位门当户对男士 结果悲剧了',
timer: '',
channel: '搜狐新闻',
content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
}]
});
Mock.mock('http://test.com?page=7', {
artDetail: [{
title: '7女子交3万被介绍4位门当户对男士 结果悲剧了',
timer: '03-15',
channel: '搜狐新闻',
content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
}, {
title: '女子交3万被介绍4位门当户对男士 结果悲剧了',
timer: '',
channel: '搜狐新闻',
content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
}, {
title: '女子交3万被介绍4位门当户对男士 结果悲剧了',
timer: '03-15',
channel: '搜狐新闻',
content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
}, {
title: '女子交3万被介绍4位门当户对男士 结果悲剧了',
timer: '',
channel: '搜狐新闻',
content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
}, {
title: '女子交3万被介绍4位门当户对男士 结果悲剧了',
timer: '',
channel: '搜狐新闻',
content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
}, {
title: '女子交3万被介绍4位门当户对男士 结果悲剧了',
timer: '',
channel: '搜狐新闻',
content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
}, {
title: '女子交3万被介绍4位门当户对男士 结果悲剧了',
timer: '03-15',
channel: '搜狐新闻',
content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
}, {
title: '女子交3万被介绍4位门当户对男士 结果悲剧了',
timer: '03-15',
channel: '搜狐新闻',
content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
}, {
title: '女子交3万被介绍4位门当户对男士 结果悲剧了',
timer: '',
channel: '搜狐新闻',
content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
}, {
title: '女子交3万被介绍4位门当户对男士 结果悲剧了',
timer: '03-15',
channel: '搜狐新闻',
content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
}, {
title: '女子交3万被介绍4位门当户对男士 结果悲剧了',
timer: '',
channel: '搜狐新闻',
content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
}, {
title: '女子交3万被介绍4位门当户对男士 结果悲剧了',
timer: '',
channel: '搜狐新闻',
content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
}, {
title: '女子交3万被介绍4位门当户对男士 结果悲剧了',
timer: '',
channel: '搜狐新闻',
content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
}, {
title: '女子交3万被介绍4位门当户对男士 结果悲剧了',
timer: '',
channel: '搜狐新闻',
content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
}, {
title: '女子交3万被介绍4位门当户对男士 结果悲剧了',
timer: '',
channel: '搜狐新闻',
content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
}, {
title: '女子交3万被介绍4位门当户对男士 结果悲剧了',
timer: '',
channel: '搜狐新闻',
content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
}, {
title: '女子交3万被介绍4位门当户对男士 结果悲剧了',
timer: '',
channel: '搜狐新闻',
content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
}, {
title: '女子交3万被介绍4位门当户对男士 结果悲剧了',
timer: '',
channel: '搜狐新闻',
content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
}, {
title: '女子交3万被介绍4位门当户对男士 结果悲剧了',
timer: '',
channel: '搜狐新闻',
content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
}]
});
var Data = {
artDetail: [{
title: 'ceshi悲剧了',
timer: '03-15',
channel: '搜狐新闻',
content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
}, {
title: '女子交3万被介绍4位门当户对男士 结果悲剧了',
timer: '',
channel: '搜狐新闻',
content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
}, {
title: '女子交3万被介绍4位门当户对男士 结果悲剧了',
timer: '03-15',
channel: '搜狐新闻',
content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
}, {
title: '女子交3万被介绍4位门当户对男士 结果悲剧了',
timer: '',
channel: '搜狐新闻',
content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
}, {
title: '女子交3万被介绍4位门当户对男士 结果悲剧了',
timer: '',
channel: '搜狐新闻',
content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
}, {
title: '女子交3万被介绍4位门当户对男士 结果悲剧了',
timer: '',
channel: '搜狐新闻',
content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
}, {
title: '女子交3万被介绍4位门当户对男士 结果悲剧了',
timer: '03-15',
channel: '搜狐新闻',
content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
}, {
title: '女子交3万被介绍4位门当户对男士 结果悲剧了',
timer: '03-15',
channel: '搜狐新闻',
content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
}, {
title: '女子交3万被介绍4位门当户对男士 结果悲剧了',
timer: '',
channel: '搜狐新闻',
content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
}, {
title: '女子交3万被介绍4位门当户对男士 结果悲剧了',
timer: '03-15',
channel: '搜狐新闻',
content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
}, {
title: '女子交3万被介绍4位门当户对男士 结果悲剧了',
timer: '',
channel: '搜狐新闻',
content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
}, {
title: '女子交3万被介绍4位门当户对男士 结果悲剧了',
timer: '',
channel: '搜狐新闻',
content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
}, {
title: '女子交3万被介绍4位门当户对男士 结果悲剧了',
timer: '',
channel: '搜狐新闻',
content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
}, {
title: '女子交3万被介绍4位门当户对男士 结果悲剧了',
timer: '',
channel: '搜狐新闻',
content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
}, {
title: '女子交3万被介绍4位门当户对男士 结果悲剧了',
timer: '',
channel: '搜狐新闻',
content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
}, {
title: '女子交3万被介绍4位门当户对男士 结果悲剧了',
timer: '',
channel: '搜狐新闻',
content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
}, {
title: '女子交3万被介绍4位门当户对男士 结果悲剧了',
timer: '',
channel: '搜狐新闻',
content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
}, {
title: '女子交3万被介绍4位门当户对男士 结果悲剧了',
timer: '',
channel: '搜狐新闻',
content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
}, {
title: '女子交3万被介绍4位门当户对男士 结果悲剧了',
timer: '',
channel: '搜狐新闻',
content: '近年来，婚姻介绍服务行业兴起，但服务、效果如何评估？合同双方分别承担什么责任？'
}]
}
var app = new Vue({
el: '#app',
data: {
message: Data.artDetail,
pullRefreshss: true,
page: 1,
scollY: null,
pageTotal: 7
},
methods: {
//文档的总高度
getScrollTop: function () {
var scrollTop = 0, bodyScrollTop = 0, documentScrollTop = 0;
if (document.body) {
bodyScrollTop = document.body.scrollTop;
}
if (document.documentElement) {
documentScrollTop = document.documentElement.scrollTop;
}
scrollTop = (bodyScrollTop - documentScrollTop > 0) ? bodyScrollTop : documentScrollTop;
return scrollTop;
},
//浏览器视口的高度
getScrollHeight: function () {
var scrollHeight = 0, bodyScrollHeight = 0, documentScrollHeight = 0;
if (document.body) {
bodyScrollHeight = document.body.scrollHeight;
}
if (document.documentElement) {
documentScrollHeight = document.documentElement.scrollHeight;
}
scrollHeight = (bodyScrollHeight - documentScrollHeight > 0) ? bodyScrollHeight : documentScrollHeight;
return scrollHeight;
},
//浏览器视口的高度
getWindowHeight: function () {
var windowHeight = 0;
if (document.compatMode == "CSS1Compat") {
windowHeight = document.documentElement.clientHeight;
} else {
windowHeight = document.body.clientHeight;
}
return windowHeight;
},
// 下拉加载ajax
pullRefresh: function () {
var _this = this;
window.onscroll = function () {
_this.scrollChange()
}
},
scrollChange: function () {
var _this = this,
currentPage = {page: this.page};
this.scollY = this.getScrollTop() + this.getWindowHeight() - this.getScrollHeight();
// 把下拉刷新置为false，防止多次请求
if (this.scollY >= -50) {
if (this.page > this.pageTotal) {
return false;
}
if (!this.pullRefreshss) {
return false;
}
// 模拟ajax请求
setTimeout(function () {
axios.get('http://test.com', {
params: currentPage
}).then(function (res) {
// 请求完成后，把得到的数据拼接到当前dom里面
_this.message = _this.message.concat(res.data.artDetail);
}).catch(function (err) {
console.log(err)
})
}, 2000)
_this.pullRefreshss = false;
// 加页码数
this.page++;
} else {
// 其他时候把下拉刷新置为true
_this.pullRefreshss = true;
}
}
},
created: function () {
this.pullRefresh();
}
})
</script>
</body>
</html>
参数说明
data: {
message: Data.artDetail, //初始数据代码
pullRefreshss: true, // 代表可以进行下拉加载，false代表不能
page: 1, //代表页面的初始页数
scollY: null,// 离底部距离有多少
pageTotal: 7 //总页数
}
js代码说明：前三个函数是求滚动条距离底部的距离，最后一个scrollChange是在滚动途中触发的。通过concat方法拼数据即可，无需考虑dom的变化，适当时候控制pullRefreshss的值
防止多次请求。
methods: {
//文档的总高度
getScrollTop: function () {
var scrollTop = 0, bodyScrollTop = 0, documentScrollTop = 0;
if (document.body) {
bodyScrollTop = document.body.scrollTop;
}
if (document.documentElement) {
documentScrollTop = document.documentElement.scrollTop;
}
scrollTop = (bodyScrollTop - documentScrollTop > 0) ? bodyScrollTop : documentScrollTop;
return scrollTop;
},
//浏览器视口的高度
getScrollHeight: function () {
var scrollHeight = 0, bodyScrollHeight = 0, documentScrollHeight = 0;
if (document.body) {
bodyScrollHeight = document.body.scrollHeight;
}
if (document.documentElement) {
documentScrollHeight = document.documentElement.scrollHeight;
}
scrollHeight = (bodyScrollHeight - documentScrollHeight > 0) ? bodyScrollHeight : documentScrollHeight;
return scrollHeight;
},
//浏览器视口的高度
getWindowHeight: function () {
var windowHeight = 0;
if (document.compatMode == "CSS1Compat") {
windowHeight = document.documentElement.clientHeight;
} else {
windowHeight = document.body.clientHeight;
}
return windowHeight;
},
// 下拉加载ajax
pullRefresh: function () {
var _this = this;
window.onscroll = function () {
_this.scrollChange()
}
},
scrollChange: function () {
var _this = this,
currentPage = {page: this.page};
this.scollY = this.getScrollTop() + this.getWindowHeight() - this.getScrollHeight();
// 把下拉刷新置为false，防止多次请求
if (this.scollY >= -50) {
if (this.page > this.pageTotal) {
return false;
}
if (!this.pullRefreshss) {
return false;
}
// 模拟ajax请求
setTimeout(function () {
axios.get('http://test.com', {
params: currentPage
}).then(function (res) {
// 请求完成后，把得到的数据拼接到当前dom里面
_this.message = _this.message.concat(res.data.artDetail);
}).catch(function (err) {
console.log(err)
})
}, 2000)
_this.pullRefreshss = false;
// 加页码数
this.page++;
} else {
// 其他时候把下拉刷新置为true
_this.pullRefreshss = true;
}
}
}
本例子只是模拟方法，实际情况可能有所不同。有其他方法，大家一起讨论学习。
vue实现pc端上拉加载功能，不兼容移动端的更多相关文章
- vux-scroller实现移动端上拉加载功能
本文将讲述vue-cli+vux-scroller实现移动端的上拉加载功能: 纠错声明:网上查阅资料看到很多人都将vux和vuex弄混,在这里我们先解释一下,vuex是vue框架自带的组件,是数据状态 ...
- vue使用vant-ui实现上拉加载、下拉刷新和返回顶部
vue使用vant-ui实现上拉加载.下拉刷新和返回顶部 vue现在在移动端常用的ui库有vant-ui和mint-ui,上拉加载.下拉刷新和返回顶部也是移动端最基础最常见的功能.下面就用vant-u ...
- RecyclerViewLoadMoreDemo【封装上拉加载功能的RecyclerView，搭配SwipeRefreshLayout实现下拉刷新】
版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 封装含有上拉加载功能的RecyclerView,然后搭配SwipeRefreshLayout实现下拉刷新.上拉加载功能. 在项目中将 ...
- 手把手教你实现Android RecyclerView上拉加载功能
摘要 一直在用到RecyclerView时都会微微一颤,因为一直都没去了解怎么实现上拉加载,受够了每次去Github找开源引入,因为感觉就为了一个上拉加载功能而去引入一大堆你不知道有多少BUG的代码, ...
- 下拉刷新，上拉加载功能--dropload.js的使用
这段时间工作太忙了,没时间更新博客内容,在这段时间,也学习到了不少新的知识.今天先整理一下dropload.js的使用方法吧,这个是在为项目中使用过的插件,很好用,但是真正用到项目中还是会有一些小小的 ...
- 实现移动端上拉加载和下拉刷新的vue插件(mescroll.js)
做一个简单的移动端展示项目,后台分页后前端加载,实现上拉加载下一页,找了下,还是用这个mescroll.js插件好一点 1.npm安装 npm install --save mescroll.js / ...
- vue移动端上拉加载更多
LoadMore.vue <template> <div class="load-more-wrapper" @touchstart="touchSta ...
- 移动端上拉加载下拉刷新插件-mescroll.js插件
官网地址是:http://www.mescroll.com // 初始化mescroll function initMeScroll() { //创建MeScroll对象,内部已默认开启下拉刷新,自动 ...
- vue-scroller实现vue单页面的上拉加载和下拉刷新问题
在vue中如何简单的实现页面的上拉加载和下拉刷新,在这里我推荐使用vue-scrolle插件. vue-scrolle的基本使用方法: 1.下载 npm i vue-scroller -D 2.导包 ...
随机推荐
- Redis5.0+哨兵模式+Keepalived实现高可用
Redis主备配置 原理: 从服务器向主服务器发出SYNC指令,当主服务器接到此命令后,就会调用BGSAVE指令来创建一个子进程专门进行数据持久化工作,也就是将主服务器的数据写入RDB文件中.在数据持 ...
- 用户端访问centos7上面的tomcat，访问页面出现的非常的慢？
原因:因为客户端访问centos7上面的tomcat会先 建立session连接,这个连接会用到random的随机数,在linux系统中有一个熵池的概念(熵池是一个内核参数), 他要 用熵池里面的随机 ...
- 【Core】当前 .NET SDK 不支持将 .NET Core 2.2 设置为目标。请将 .NET Core 2.1 或更低版本设置
问题起因: 新的电脑,打开core2.2的项目时,因为没有安装2.2 sdk,项目编译失败 所以在选择目标框架下拉框选择安装其他目标框架 会跳转到官网下载sdk:https://dotnet.micr ...
- tensorbordX使用
安装: pip install tensorflow-1.7.0 pip install tensorbord pip install tensorbordX 启动 tensorboard --log ...
- C# interface 的隐式与显示实现及适应范围源码演示
把代码过程中经常用到的一些代码段做个记录,如下的资料是关于C# interface 的隐式与显示实现及适应范围演示的代码. interface IAnimal { void Dog(); } clas ...
- storybook构建vue组件
最近在研究业务型组件的使用,因为在单独开发组件的时候需要调试,所以为每一个组件都编写一个webpack开发环境,然后上传上去为了其他人可以直接使用又把webpack上传上去,这样会有两个问题: 1:每 ...
- 浅谈前端nuxt（ssr）
SSR: 服务端渲染(Server Side Render),即:网页是通过服务端渲染生成后输出给客户端. 一.那为什么要使用SSR呢? 我用一句话理解的就是降低SPA(Single Page App ...
- 用python代码模拟登录网站
方法一:直接使用已知的cookie访问 特点: 简单,但需要先在浏览器登录 具体步骤: 1.用浏览器登录,获取浏览器里的cookie字符串 先使用浏览器登录.再打开开发者工具,转到network选项卡 ...
- Java集合框架相关知识整理
1.常见的集合有哪些? Collection接口和Map接口是所有集合框架的父接口 Collection接口的子接口包括:Set接口和List接口 Map接口的实现类主要有:HashMap ...
- Yarn架构详解
Yarn架构介绍Yarn/MRv2最基本的想法是将原JobTracker主要的资源管理和job调度/监视功能分开作为两个单独的守护进程.有一个全局的ResourceManager(RM)和每个Appl ...