本文实例为大家分享了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. + 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); }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。