vue实现页面滚动到底部刷新

本文实例为大家分享了vue实现页面滚动到底部刷新的具体代码，供大家参考，具体内容如下

本文实例为大家分享了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页面滚动到底部刷新 vue页面滚动刷新 vue页面底部刷新