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 相关文章推荐
javascript multibox 全选
Mar 22 Javascript
在IE6下发生Internet Explorer cannot open the Internet site错误
Jun 21 Javascript
页面只有一个text的时候,回车自动submit的解决方法
Aug 12 Javascript
jQuery的deferred对象使用详解
Aug 20 Javascript
JavaScript中提前声明变量或函数例子
Nov 12 Javascript
jQuery自定义组件(导入组件)
Nov 08 Javascript
jquery+css实现侧边导航栏效果
Jun 12 jQuery
你有必要知道的10个JavaScript难点
Jul 25 Javascript
bootstrap table实现点击翻页功能 可记录上下页选中的行
Sep 28 Javascript
IE11下使用canvas.toDataURL报SecurityError错误的解决方法
Nov 19 Javascript
详解webpack-dev-server使用方法
Sep 14 Javascript
详解小程序用户登录状态检查与更新实例
May 15 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
ThinkPHP打开验证码页面显示乱码的解决方法
2014/12/18 PHP
laravel5.0在linux下解决.htaccess无效和去除index.php的问题
2019/10/16 PHP
PHP实现微信公众号验证Token的示例代码
2019/12/16 PHP
php 使用ActiveMQ发送消息,与处理消息操作示例
2020/02/23 PHP
javascript css float属性的特殊写法
2008/11/13 Javascript
ExtJs GridPanel简单的增删改实现代码
2010/08/26 Javascript
JS解析json数据并将json字符串转化为数组的实现方法
2012/12/25 Javascript
node.js中使用socket.io的方法
2014/12/15 Javascript
关于JavaScript作用域你想知道的一切
2016/02/04 Javascript
浅谈JavaScript for循环 闭包
2016/06/22 Javascript
JS获取checkbox的个数简单实例
2016/08/19 Javascript
jQuery EasyUI之验证框validatebox实例详解
2017/04/10 jQuery
解决浏览器会自动填充密码的问题
2017/04/28 Javascript
浅谈jquery fullpage 插件增加头部和版权的方法
2018/03/20 jQuery
简单谈谈Python中的元祖(Tuple)和字典(Dict)
2017/04/21 Python
TensorFlow实现Logistic回归
2018/09/07 Python
浅谈Pandas:Series和DataFrame间的算术元素
2018/12/22 Python
python挖矿算力测试程序详解
2019/07/03 Python
简单了解Django ContentType内置组件
2019/07/23 Python
python中利用matplotlib读取灰度图的例子
2019/12/07 Python
Python+OpenCV+图片旋转并用原底色填充新四角的例子
2019/12/12 Python
Python3实现个位数字和十位数字对调, 其乘积不变
2020/05/03 Python
python 实现图片批量压缩的示例
2020/12/18 Python
Farfetch阿联酋:奢侈品牌时尚购物平台
2019/07/26 全球购物
工商管理专业应届生求职信
2013/11/04 职场文书
生物技术研究生自荐信
2013/11/12 职场文书
电子商务专业个人的自我评价
2013/12/19 职场文书
合作协议书范本
2014/04/17 职场文书
先进个人材料怎么写
2014/12/30 职场文书
亲戚关系证明
2015/06/24 职场文书
医院见习总结
2015/06/24 职场文书
2016年党风廉政建设承诺书
2016/03/25 职场文书
如何在Mac上通过docker配置PHP开发环境
2021/05/29 PHP
MySQL图形化管理工具Navicat安装步骤
2021/12/04 MySQL
MySQL数据库简介与基本操作
2022/05/30 MySQL
CentOS7设置ssh服务以及端口修改方式
2022/12/24 Servers