vue底部加载更多的实例代码


Posted in Javascript onJune 29, 2018

要实现的效果如下:

vue底部加载更多的实例代码

<template>
 <div class="newsList">
  <div v-for="(items, index) in newsList">
   <div class="date">{{showDay(index)}}</div>
   <div class="list" >
    <ul>
     <li class="list-item" v-for="item in items">
      <span class="text">{{item.title}}</span>
      <img :src="attachImageUrl(item.images[0])" class="image"/>
     </li>
    </ul>
   </div>
  </div>
  <div class="infinite-scroll" v-show="loading">
   <svg class="loader-circular" viewBox="25 25 50 50">
    <circle class="loader-path" cx="50" cy="50" r="20" fill="none" stroke="rgb(53, 157, 218)" stroke-width="5"></circle>
   </svg>
   <span class="infinite-scroll-text">{{tips}}</span>
  </div>
 </div>
</template>
<script>
 import axios from 'axios';
 export default {
  data () {
   return {
    newsList: [],
    date: [],
    todayDate: '',
    REQUIRE: true,
    loading: false,
    tips: '努力加载中...'
   }
  },
  created () {
   // 获取今日新闻
   axios.get('http://zhihuapi.herokuapp.com/api/4/news/latest')
    .then( (res) => {
    this.newsList.push(res.data['stories'])
    this.date.push(res.data['date']);
    this.todayDate = res.data['date']
   })
  },
  mounted () {
   // 添加滚动事件,检测滚动到页面底部
   window.addEventListener('scroll', this.scrollBottom)
  },
  methods: {
   scrollBottom() {
    // 滚动到页面底部时,请求前一天的文章内容
    if (((window.screen.height + document.body.scrollTop) > (document.body.clientHeight)) && this.REQUIRE) {
     // 请求的数据未加载完成时,滚动到底部不再请求前一天的数据
     this.REQUIRE = false;
     this.loading = true;
     this.tips = '努力加载中...';
     axios.get('http://zhihuapi.herokuapp.com/api/4/news/before/' + this.todayDate).then((res) => {
      this.newsList.push(res.data['stories']);
     this.date.push(res.data['date']);
     this.todayDate = res.data['date'];
     // 请求的数据加载完成后,再次滚动到底部时,允许请求前一天数据
     this.$nextTick(() => {
      this.REQUIRE = true;
      this.loading = false;
     });
    }).catch(() => {
      this.tips = '连接失败,请稍后重试';
     // 请求失败时,将 REQUIRE 置为 true,滚动到底部时,再次请求
     this.REQUIRE = true;
    });
    }
   },
   showDay (index) {
    if (index === 0) {
     return '今日新闻'
    } else {
     return this.getToday(index)
    }
   },
   getToday (index) {
    let year = this.date[index].slice(0, 4);
    let month = this.date[index].slice(4, 6);
    let day = this.date[index].slice(6);
    let today = new Date(year + '/' + month + '/' + day);
    let week = ['日', '一', '二', '三', '四', '五', '六'];
    return month + '月' + day + '日' + ' 星期' + week[today.getDay()];
   },
   attachImageUrl (srcUrl) {
    if (srcUrl !== undefined) {
     return 'http://read.html5.qq.com/image?src=forum&q=5&r=0&imgflag=7&imageUrl=' + srcUrl.slice(0, 4) + srcUrl.slice(5);
    }
   }
  }
 }
</script>

总结

以上所述是小编给大家介绍的vue底部加载更多的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js实现的跟随鼠标移动的时钟效果(中英文日期显示)
Jan 17 Javascript
Jquery判断$(&quot;#id&quot;)获取的对象是否存在的方法
Sep 25 Javascript
js验证整数加保留小数点的简单实例
Dec 02 Javascript
使用原生js实现页面蒙灰(mask)效果示例代码
Jun 20 Javascript
javascript实现类似java中getClass()得到对象类名的方法
Jul 27 Javascript
JavaScript判断页面加载完之后再执行预定函数的技巧
May 17 Javascript
JS动态添加选项案例分析
Oct 17 Javascript
AngularJS实现的生成随机数与猜数字大小功能示例
Dec 25 Javascript
详解VueJS应用中管理用户权限
Feb 02 Javascript
jQuery幻灯片插件owlcarousel参数说明中文文档
Feb 27 jQuery
Vue 实现列表动态添加和删除的两种方法小结
Sep 07 Javascript
javascript实现倒计时提示框
Mar 02 Javascript
使用vue打包时vendor文件过大或者是app.js文件很大的问题
Jun 29 #Javascript
vue项目打包后打开页面空白解决办法
Jun 29 #Javascript
详解Vue webapp项目通过HBulider打包原生APP
Jun 29 #Javascript
Vue下路由History模式打包后页面空白的解决方法
Jun 29 #Javascript
详解Vue微信授权登录前后端分离较为优雅的解决方案
Jun 29 #Javascript
JavaScript实现仿Clock ISO时钟
Jun 29 #Javascript
vue ssr 指南详读
Jun 29 #Javascript
You might like
PHP开发大型项目的一点经验
2006/10/09 PHP
PHP+DBM的同学录程序(1)
2006/10/09 PHP
wordpress之wp-settings.php
2007/08/17 PHP
php的数组与字符串的转换函数整理汇总
2013/07/18 PHP
PHP如何将log信息写入服务器中的log文件
2015/07/29 PHP
阿里云Win2016安装Apache和PHP环境图文教程
2018/03/11 PHP
javascript多种数据类型表格排序代码分析
2010/09/11 Javascript
jQuery响应鼠标事件并隐藏与显示input默认值
2014/08/24 Javascript
javascript实现避免页面按钮重复提交
2015/01/08 Javascript
jQuery制作拼图小游戏
2015/01/12 Javascript
JavaScript实现DIV层拖动及动态增加新层的方法
2015/05/12 Javascript
JS实现iframe自适应高度的方法(兼容IE与FireFox)
2016/06/24 Javascript
Bootstrap实现的经典栅格布局效果实例【附demo源码】
2017/03/30 Javascript
React Native中的RefreshContorl下拉刷新使用
2017/10/09 Javascript
vue-cli中的babel配置文件.babelrc实例详解
2018/02/22 Javascript
react-native 圆弧拖动进度条实现的示例代码
2018/04/12 Javascript
vue动态绑定组件子父组件多表单验证功能的实现代码
2018/05/14 Javascript
python多线程编程方式分析示例详解
2013/12/06 Python
Python使用py2exe打包程序介绍
2014/11/20 Python
在DigitalOcean的服务器上部署flaskblog应用
2015/12/19 Python
python使用两种发邮件的方式smtp和outlook示例
2017/06/02 Python
一篇文章快速了解Python的GIL
2018/01/12 Python
python如何将图片转换为字符图片
2020/08/19 Python
python控制windows剪贴板,向剪贴板中写入图片的实例
2018/05/31 Python
django反向解析和正向解析的方式
2018/06/05 Python
详解flask入门模板引擎
2018/07/18 Python
python中使用ctypes调用so传参设置遇到的问题及解决方法
2019/06/19 Python
Python关于__name__属性的含义和作用详解
2020/02/19 Python
基于python实现复制文件并重命名
2020/09/16 Python
市场营销专业个人自荐信格式
2013/09/21 职场文书
车祸赔偿收入证明
2014/01/09 职场文书
勤俭节约倡议书范文
2015/04/29 职场文书
2015人事行政工作总结范文
2015/05/21 职场文书
pytorch交叉熵损失函数的weight参数的使用
2021/05/24 Python
AudioContext 实现音频可视化(web技术分享)
2022/02/24 Javascript
分享一个vue实现的记事本功能案例
2022/04/11 Vue.js