vue实现页面滚动到底部刷新
2019-08-16 15:35
1121 查看
本文实例为大家分享了vue实现页面滚动到底部刷新的具体代码,供大家参考,具体内容如下
h5页面
<script> var app = new Vue({ el: '#app', data: { swiper: null, carousel: [], promotion: [], cates: [], //设置size初始为10 size:10, }, mounted: function () { //定义that用that.size获取size的值 var that=this; getPromotion(); //秒表每秒请求一次 setInterval(function(){ //content是div类名 const el = document.querySelector('.content'); const offsetHeight = el.offsetHeight; el.onscroll = () => { const scrollTop = el.scrollTop; const scrollHeight = el.scrollHeight; if ((offsetHeight + scrollTop) - scrollHeight >= -1) { //每次滚动到底部size+10 that.size+=10; } } $.ajax({ type: "post", url: "/news/search", data: {intro: 'best', page: 1, size: that.size}, dataType: 'json', success: function (data) { $.hideIndicator(); if (data.errCode === 1) { app.promotion = data.data.articleList; // console.log(222); } else { $.toast(data.errMsg); } } }); },10*60); // window.addEventListener('scroll', this.scrollBottom()); }, methods: { goDetail: function (id) { location.href = '/news/newsDetail/' + id; }, }, }); //第一次加载先获取10条 function getPromotion() { $.ajax({ type: "post", url: "/news/search", data: {intro: 'best', page: 1, size: 10}, dataType: 'json', success: function (data) { $.hideIndicator(); if (data.errCode === 1) { app.promotion = data.data.articleList; // console.log(data); } else { $.toast(data.errMsg); } } }); $.showIndicator(); } </script>
后台控制器
public function search() { $parm = array('act' => 'search'); if (!empty($_POST['catId'])) $parm['catId'] = $_POST['catId']; if (!empty($_POST['keyword'])) $parm['keyword'] = $_POST['keyword']; if (!empty($_POST['intro'])) $parm['intro'] = $_POST['intro']; if (!empty($_POST['order'])) $parm['order'] = $_POST['order']; if (!empty($_POST['sort'])) $parm['sort'] = $_POST['sort']; if (!empty($_POST['page'])) $parm['page'] =1; //获取前台传过来的size值如果不为空就设置请求接口时多一个size参数 if (!empty($_POST['size'])) $parm['size'] = $_POST['size']; //调用接口 $data = $this->http('service/article.php', $parm); echo json_encode($data); }
以上就是本文的全部内容,希望对大家的学习有所帮助
您可能感兴趣的文章:
相关文章推荐
- vue 聊天页面实现滚动条实时滚动至最底部
- Android 高仿新浪微博底部导航栏,实现双击首页Tab,页面的ListView滚动、刷新
- Android 高仿新浪微博底部导航栏,实现双击首页Tab,页面的ListView滚动、刷新
- 页面滚动到底部自动加载下一页功能的实现
- javscript实现滚动条滚动到页面底部自动加载增加页面内容
- 详解vue之better-scroll实现轮播图和页面滚动
- JQuery实现页面刷新滚动条自动滚动到特定位置
- 使用jquery实现页面滚动到底部自动加载新的信息
- jQuery+ajax实现滚动到页面底部自动加载图文列表效果(类似图片懒加载)
- thinkphp+ajax 移动端实现滚动到底部加载数据(无刷新动态加载数据技术的应用)
- jquery实现滚动到页面底部时无限加载内容的代码
- 使用jquery实现页面滚动到底部自动加载新的信息
- 滑轮滚动到页面底部ajax加载数据配合jsonp实现探讨
- vue通过路由实现页面刷新的方法
- vue之监听页面滚动实现上拉加载
- vue进入页面时滚动条始终在底部代码实例
- 使用jquery实现页面滚动到底部自动加载新的信息
- 纯css 实现footer 一直在页面底部,不随页面滚动
- Android实现刷新后自动滚动底部最后一项
- vue.js实现刷新当前页面的方法教程