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 相关文章推荐
jQuery内容过滤选择器用法分析
Feb 10 Javascript
谈一谈javascript闭包
Jan 28 Javascript
Bootstrap弹出框(Popover)被挤压的问题小结
Jul 11 Javascript
JS实现自定义状态栏动画文字效果示例
Oct 12 Javascript
vue小白入门教程
Apr 02 Javascript
React路由管理之React Router总结
May 10 Javascript
vue树形结构获取键值的方法示例
Jun 21 Javascript
ElementUI中el-tree节点的操作的实现
Feb 27 Javascript
vue proxy 的优势与使用场景实现
Jun 15 Javascript
基于原生js实现九宫格算法代码实例
Jul 03 Javascript
微信小程序获取当前时间及星期几的实例代码
Sep 20 Javascript
vue 二维码长按保存和复制内容操作
Sep 22 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
如何将一个表单同时提交到两个地方处理
2006/10/09 PHP
封装一个PDO数据库操作类代码
2009/09/09 PHP
php实现在站点里面添加邮件发送的功能
2020/04/28 PHP
ThinkPHP 模板substr的截取字符串函数详解
2017/01/09 PHP
jQuery Ajax 仿AjaxPro.Utility.RegisterTypeForAjax辅助方法
2011/09/27 Javascript
使用JSLint提高JS代码质量方法分享
2013/12/16 Javascript
angularJS 入门基础
2015/02/09 Javascript
JS+CSS实现大气清新的滑动菜单效果代码
2015/10/22 Javascript
js获取iframe中的window对象的实现方法
2016/05/20 Javascript
深入理解Ajax的get和post请求
2016/06/02 Javascript
js实现获取两个日期之间所有日期的方法
2016/06/17 Javascript
微信小程序 省市区选择器实例详解(附源码下载)
2017/01/05 Javascript
easyui combogrid实现本地模糊搜索过滤多列
2017/05/13 Javascript
史上最全JavaScript常用的简写技巧(推荐)
2017/08/17 Javascript
浅谈Node.js 沙箱环境
2018/05/15 Javascript
JS基于封装函数实现的表格分页完整示例
2018/06/26 Javascript
原生JavaScript实现remove()和recover()功能示例
2018/07/24 Javascript
vue请求服务器数据后绑定不上的解决方法
2019/10/30 Javascript
[01:18:35]DOTA2-DPC中国联赛 正赛 Elephant vs LBZS BO3 第一场 1月29日
2021/03/11 DOTA
python实现sublime3的less编译插件示例
2014/04/27 Python
python简单猜数游戏实例
2015/07/09 Python
Python 3.8新特征之asyncio REPL
2019/05/28 Python
Python笔记之facade模式
2019/11/20 Python
Python semaphore evevt生产者消费者模型原理解析
2020/03/18 Python
keras 如何保存最佳的训练模型
2020/05/25 Python
Python+PyQt5+MySQL实现天气管理系统
2020/06/16 Python
Python远程方法调用实现过程解析
2020/07/28 Python
10个python爬虫入门基础代码实例 + 1个简单的python爬虫完整实例
2020/12/16 Python
澳大利亚在线生活方式商店:Mytopia
2018/07/08 全球购物
澳大利亚领先的男装零售连锁店:Lowes
2020/08/07 全球购物
C++:局部变量能否和全局变量重名
2014/03/03 面试题
小学音乐教学反思
2014/02/05 职场文书
网络编辑职责
2014/03/01 职场文书
高三家长寄语
2014/04/03 职场文书
单位推荐信范文
2015/03/27 职场文书
邹越演讲观后感
2015/06/15 职场文书