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


Posted in Javascript onAugust 16, 2019

本文实例为大家分享了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);
  }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS文本框不能输入空格验证方法
Mar 19 Javascript
详解jQuery插件开发中的extend方法
Nov 19 Javascript
JavaScript中使用Object.prototype.toString判断是否为数组
Apr 01 Javascript
AngularJS实现Model缓存的方式
Feb 03 Javascript
Javascript快速实现浏览器系统通知
Aug 26 Javascript
js 概率计算(简单版)
Sep 12 Javascript
vue页面切换过渡transition效果
Oct 08 Javascript
JavaScript面试技巧之数组的一些不low操作
Mar 22 Javascript
Vue组件通信的几种实现方法
Apr 25 Javascript
javascript实现对话框功能警告(alert 消息对话框)确认(confirm 消息对话框)
May 07 Javascript
细述Javascript的加法运算符的具体使用
Oct 18 Javascript
Chrome插件开发系列一:弹窗终结者开发实战
Oct 02 Javascript
vue-mugen-scroll组件实现pc端滚动刷新
Aug 16 #Javascript
JavaScript的查询机制LHS和RHS解析
Aug 16 #Javascript
jquery树形插件zTree高级使用详解
Aug 16 #jQuery
微信小程序云开发如何实现数据库自动备份实现
Aug 16 #Javascript
jQuery zTree树插件的使用教程
Aug 16 #jQuery
Vue 权限控制的两种方法(路由验证)
Aug 16 #Javascript
JS中的算法与数据结构之列表(List)实例详解
Aug 16 #Javascript
You might like
乐信RP2100的电路分析和打磨
2021/03/02 无线电
php中header跳转使用include包含解决参数丢失问题
2015/05/08 PHP
jquery+thinkphp实现跨域抓取数据的方法
2016/10/15 PHP
PHP操作Redis数据库常用方法示例
2018/08/25 PHP
PHP读取目录树的实现方法分析
2019/03/22 PHP
FCK调用方法..
2006/12/21 Javascript
js显示时间 js显示最后修改时间
2013/01/02 Javascript
iframe子页面获取父页面元素的方法
2013/11/05 Javascript
jquery移除、绑定、触发元素事件使用示例详解
2014/04/10 Javascript
javascript实现textarea中tab键的缩排处理方法
2015/06/26 Javascript
使用jquery给指定的table动态添加一行、删除一行
2016/10/13 Javascript
jquery中用jsonp实现搜索框功能
2016/10/18 Javascript
AngularJS 中使用Swiper制作滚动图不能滑动的解决方法
2016/11/15 Javascript
jquery实现转盘抽奖功能
2017/01/06 Javascript
Vue自定义指令详解
2017/07/28 Javascript
不使用JavaScript实现菜单的打开和关闭效果demo
2018/05/01 Javascript
Element Input输入框的使用方法
2020/07/26 Javascript
antd form表单数据回显操作
2020/11/02 Javascript
python获取外网IP并发邮件的实现方法
2017/10/01 Python
解决python通过cx_Oracle模块连接Oracle乱码的问题
2018/10/18 Python
Python二叉树的遍历操作示例【前序遍历,中序遍历,后序遍历,层序遍历】
2018/12/24 Python
python pyinstaller 加载ui路径方法
2019/06/10 Python
python3在同一行内输入n个数并用列表保存的例子
2019/07/20 Python
使用python实现数组、链表、队列、栈的方法
2019/12/20 Python
python matplotlib库的基本使用
2020/09/23 Python
python 爬取免费简历模板网站的示例
2020/09/27 Python
PyChon中关于Jekins的详细安装(推荐)
2020/12/28 Python
微信浏览器取消缓存的方法
2015/03/28 HTML / CSS
Russell Stover巧克力官方网站:美国领先的精美巧克力制造商
2016/11/27 全球购物
Linux文件系统类型
2012/02/15 面试题
介绍一些UNIX常用简单命令
2014/11/11 面试题
怎样写演讲稿
2014/01/04 职场文书
网络技术专业求职信
2014/02/18 职场文书
2014年幼儿园植树节活动方案
2014/03/02 职场文书
小学节能减排倡议书
2014/05/15 职场文书
感谢信
2019/04/11 职场文书