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; } } }
本例子只是模擬方法，實際情況可能有所不同。有其他方法，大家一起討論學習。
浙公網安備 33010602011771號