vue实现pc端上拉加载功能,不兼容移动端
所用插件:Mock.js 这个只用到它简单的功能,拦截ajax请求。
vue和axios,vue基础知识请看文档。
axios类似于jquery的ajax方法。
以下是是该功能所有代码,其中mock的数据可以不必理会。
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!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; } } }
本例子只是模拟方法,实际情况可能有所不同。有其他方法,大家一起讨论学习。