vue实现ajax滚动下拉加载，同时具有loading效果(推荐)

代码如下所示：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>vue测试ajax的使用</title>
<meta id="viewport" name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<style>
*{ padding:0; margin:0}
.list ul li{padding:10px 5px 10px 10px;overflow:hidden;zoom:1;position:relative;border-bottom:1px solid #e8e8e8;}
.list ul li .img{margin-right:10px;display:block;width:60px;float:left;}
.list ul li img{width:60px;height:60px;border-radius:8px;}
.list ul li p{-webkit-box-flex:1;color:#777;overflow:hidden;padding-right:70px;}.list ul li p em{margin:7px 0;}
.list ul li p a{display:block;height:16px;line-height:16px;overflow:hidden;font-size:15px;}
.list ul li p span{display:block;line-height:16px;height:16px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font:12px "\5FAE\8F6F\96C5\9ED1";}
.list ul li p u{margin:0 6px;padding:0 6px;border-left:1px solid #d9d9d9;border-right:1px solid #d9d9d9;}
.list ul li .btn {width: 40px;height: 25px;padding-top: 35px;color: #65bb0a;line-height:25px;text-align:center;background: none;position:absolute;right:5px; top:12px}
.list ul li .btn .bg {position: absolute;left: 0;top: 0;display: inline-block;width: 100%;height: 30px;repeat;background-size: 26px auto;}
.get-more,.loading{display:block;padding:15px 0; line-height:16px;text-align:center;font-size:14px;}
.loading{width:75px; margin:0 auto; background:url(imgs/loading.gif) 0 center no-repeat; padding-left:15px; background-size:13px auto}
</style>
</head>
<body>
<div class="list" id="app" v-scroll="getMore">
 <ul>
 <li v-for="item in games">
  <a v-bind:href="item.url" class="img"><img v-bind:src="item.img"></a>
  <p>
  <a v-bind:href="item.url">{{item.title}}</a>
  <em class="lstar4"></em>
  <span>{{item.server}}<u>39.9M</u>v2.1.3</span>
  </p>
  <a v-bind:href="item.url" class="btn"><em class="bg"></em>下载</a>
 </li>
 </ul>
 <div>
 <p class="get-more" v-on:click="getMore()" v-show="switchShow">点击加载更多</p>
 <p class="loading" v-show="!switchShow">加载中...</p>
 </div>
</div>
<script src="js/vue.js"></script>
<script src="http://cdn.bootcss.com/vue-resource/1.0.3/vue-resource.min.js"></script>
<!--<script src="http://211.149.193.19:8090/vue-tutorials/04.OAuth/jquery-zepto/js/zepto.js"></script>-->
<script>
var vm = new Vue({
 el:'#app',
 data: {
 url: 'http://*******.com/dynamic.php?s=/Afs/ajaxHisTestServerData/cate_id/4/sta/',
 nowPage: 0,
 switchShow:false,
 games: []
 },
 methods: {
 moreFn: function (itemIndex) {
  // console.log(this.nowPage)
  this.$http.jsonp(this.url + itemIndex*10).then(function (response) {
  this.games=this.games.concat(response.body);
  this.switchShow=!this.switchShow;
  }, function (response) {
   console.log(response)
  });
 },
 getMore: function () {
  this.switchShow=!this.switchShow;
  this.nowPage++;
  this.moreFn(this.nowPage);
 },
 init: function () {
  this.moreFn(this.nowPage);
 }
 },
 directives: {// 自定义指令
 scroll: {
 bind: function (el, binding){
  window.addEventListener('scroll', function () {
  if(document.body.scrollTop + window.innerHeight >= el.clientHeight) {
  var fnc = binding.value;
  fnc();
  }
  })
 }
 }
 }
})
vm.init();
</script>
</body>
</html>

功能介绍：

1.vue进行ajax请求加载；

2.实现滚动，点击加载数据；

3.通过自定义实现loading 效果；

难点：

1.需要官方的vue-resource组件，进行ajax请求,所以需要了解该API；

2.loading,通过v-show进行判断显示不同的loading 效果；

3.自定义指令，也是最难点，所以需要了解基本的自定义指令API;

以上所述是小编给大家介绍的vue实现ajax滚动下拉加载，同时具有loading效果(推荐)，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • vue滚动轴插件better-scroll使用详解

    跟做慕课网的vue高仿外卖项目中用到了一个很好用的插件BScroll,用来计算左侧menu栏对应右侧foods栏相应显示的食物区,如果不用插件就比较费事了,因此这里分享一下这个插件的简单使用: 一.项目中下载,并引入 在配置文件package.json中引入版本 "dependencies": { "better-scroll": "^0.1.7" } 然后进入项目目录,打开cmd更新配置 npm i (i是install缩写) 最后引入,比如我

  • 基于vue的fullpage.js单页滚动插件

    基于vue的fullpage.js使用方法,供大家参考,具体内容如下 功能概述 可实现移动端的单页滚动效果,支持横向滚动和纵向滚动 兼容性 目前还未进行大规模兼容性测试.有bug请提问至issues 安装 npm install vue-fullpage --save commonjs import VueFullpage from 'vue-fullpage' Vue.use(VueFullpage) 或 var vueFullpage = require('vue-fullpage') Vu

  • 使用vue制作FullPage页面滚动效果

    前言 已经有好久没有更新博客了,大三下了要准备找实习了,才发现自己很多东西都不会,所以赶紧找了个现在流行的MVVM框架学习一下.我学习的是Vue,所以拿Vue写了一个FullPage的模板,可以供自己和其他人使用. 项目的地址是:https://github.com/hzxszsk/vue-fullpage 项目讲解 为了加深理解,我把我制作这个FullPage页面的思路和流程记录下来,也可以给其他和我一样的初学者一个参考. 分解思路 首先,我根据Vue的组件开发思想,把这个FullPage页面

  • vue2.0中goods选购栏滚动算法的实现代码

    不多说,直接代码,以便以后重复利用: <script type="text/ecmascript-6"> import BScroll from 'better-scroll'; const ERR_OK = 0; export default { props: { sell: { type: Object } }, data() { return { goods: [], listHeight: [], scrollY: 0 }; }, computed: { curre

  • Vue.js实战之通过监听滚动事件实现动态锚点

    Vue.js实战之通过监听滚动事件实现动态锚点

    前言 前几天工作中在做项目的时候,需要实现一个动态锚点的效果,具体效果如下: 如果是传统项目,这个效果就非常简单.但是放到 Vue 中,就有两大难题: 1. 在没有 jQuery 的 animate() 方法的情况下,如何实现平滑滚动? 2. 如何监听页面滚动事件? 在浏览了大量文章.进行多次尝试之后,终于解决了这些问题 期间主要涉及到了 setTimeout 的递归用法,和 Vue 生命周期中的 mounted 一.锚点实现 在实现平滑滚动之前,得先确保基本的锚点功能 如果没有其他要求,直接用

  • 详解使用vue-router进行页面切换时滚动条位置与滚动监听事件

    按照正常的产品逻辑,我们在进行页面切换时滚动条应该是在页面顶部的,可是...在使用vue-router进行页面切换时,发现滚动条所处的位置被自动记录了下来,且在另一个组件内定义的滚动监听事件仍会运行,着实吃了一大惊... 说说我的破解方法: 1.在每个需要用vue-router切换的组件的mounted钩子内将页面的位置自动回滚到页面顶部,解决滚动条位置自动记录问题: 2.在每个组件内定义一条变量scrollWatch默认为true,在绑定滚动监听事件时加个if判断,只有在scrollWatch

  • vue监听滚动事件实现滚动监听

    在vue中实现滚动监听和原生js无太大差异,下面是一个简单的demo,可在控制台查看结果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="https://unpkg

  • vue2滚动条加载更多数据实现代码

    解析: 判断滚动条到底部,需要用到DOM的三个属性值,即scrollTop.clientHeight.scrollHeight. scrollTop为滚动条在Y轴上的滚动距离. clientHeight为内容可视区域的高度. scrollHeight为内容可视区域的高度加上溢出(滚动)的距离. 从这个三个属性的介绍就可以看出来,滚动条到底部的条件即为scrollTop + clientHeight == scrollHeight.(兼容不同的浏览器). 代码: 1.vue的实现 html: <d

  • 基于vue的下拉刷新指令和滚动刷新指令

    基于vue的下拉刷新指令和滚动刷新指令

    小编最近在实现移动端列表页面显示的时候一直在思考如何实现列表的自动更新数据,对于大多数Native App或者Web App,在列表的底部增加"加载更多"的按钮也是解决这样的问题一种交互的方式,当然,这样的交互其实还好,不过根据用户的操作习惯来看,似乎滚动刷新更多数据和下拉刷新当前数据的操作方式,更符合用户对列表分页数据的读取习惯,因此,在这里小编想简单的说说,这次在小编系统中所使用的下拉刷新和滚动刷新的实现方式! 其实,这种实现数据加载的原理很简单 在滚动刷新的时候,需要在列表滚动到

  • 解决Vue页面固定滚动位置的处理办法

    最近做项目遇到一个问题,就是Vue滚动不固定,网上找了一些资料,说下 vue 固定滚动位置的处理办法. 问题描述: 通常见于 列表页List -> 详情页Detail 的情况, 从列表的某一项x 进入到详情页, 再返回的时候, 希望列表的位置固定在x, 而不是回到顶部了. vue-router 里面是有一个 scrollBehavior 的, 但是这个玩意只能在 history 模式下面使用, 而我用的 hash 模式. 所以我们要自己实现嘛, 思路简单:List 里面监听滚动, 记录滚动位置

随机推荐