<!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效果的更多相关文章

  1. Vue自定义指令实现下拉加载：v-loadmore

    和methods平级: directives: { loadmore: {//自定义指令: 下拉加载 bind(el, binding) {    var p = 0;    var t = 0;  ...

  2. vue之vant组件下拉加载更多

    vant地址:https://youzan.github.io/vant/#/zh-CN/intro 基础用法 List 组件通过loading和finished两个变量控制加载状态,当组件滚动到底部 ...

  3. ASP.NET仿新浪微博下拉加载更多数据瀑布流效果

    闲来无事,琢磨着写点东西.貌似页面下拉加载数据,瀑布流的效果很火,各个网站都能见到各式各样的展示效果,原理大同小异.于是乎,决定自己写一写这个效果,希望能给比我还菜的菜鸟们一点参考价值. 在开始之前, ...

  4. 美团、点评、猫眼App下拉加载效果的源码分享

    今天我准备拿大众点评.美团.猫眼电影三款App的实例来分享一下APICloud下拉加载这个模块的效果. 美团App下拉加载效果   以美团中的下拉酷似动画的萌萌着小人儿效果作为参考,来实现的一个加载模 ...

  5. vue使用vant-ui实现上拉加载、下拉刷新和返回顶部

    vue使用vant-ui实现上拉加载.下拉刷新和返回顶部 vue现在在移动端常用的ui库有vant-ui和mint-ui,上拉加载.下拉刷新和返回顶部也是移动端最基础最常见的功能.下面就用vant-u ...

  6. MUI - 上拉刷新/下拉加载

    新闻信息列表必备的功能,支持Table,Ul等列表. 以下是DIV版本,在安卓端或者ios端必须使用双webview模式,传送门:http://dev.dcloud.net.cn/mui/pulldo ...

  7. vue实现pc端上拉加载功能，不兼容移动端

    所用插件:Mock.js 这个只用到它简单的功能,拦截ajax请求. vue和axios,vue基础知识请看文档. axios类似于jquery的ajax方法. 以下是是该功能所有代码,其中mock的 ...

  8. JQuery实现无刷新下拉加载图片

          最近做的一个项目需要做页面无刷新下拉加载图片,调研了一番,大多都采用检测滚动条达到底部,然后利用ajax加载下一页数据对页面数据进行添加,根据这一逻辑,自己写了一个,具体代码如下: JQu ...

  9. iscroll5 上拉，下拉 加载数据

    我这里的思路是上拉时候只是加载第一页的内容,可根据实际情况修改其中的代码.请勿照搬.样式没怎么调,可以加载gif动画.1.没有数据时候,下拉可以加载数据.2.没有数据时候,点击也可以加载数据.3.其余 ...

随机推荐

  1. hdu3836联通的强还原性点

    Equivalent Sets Time Limit: 12000/4000 MS (Java/Others)    Memory Limit: 104857/104857 K (Java/Other ...

  2. linux0.11学习笔记（2）

    makefile文件: makefile 文件是make 实用简介.make 程序是用Makefile最后一次改变的数据文件和代码文件(last-modification time)确定哪些文件需要更 ...

  3. 浙江大学PAT考试1069~1072(2013-11-2)

    11 题目地址:http://pat.zju.edu.cn/contests/pat-a-practise 1069: 由下降序和上升序两个四位数不断相减,然后得到新数据,始终会到达一个数字终止. 递 ...

  4. android studio 在线更新android sdk，遇到无法Fetching https://dl-ssl.google.com/...的解决方式

    近期实在受不了eclipse的"迟钝",准备入手Android studio开发环境,可是貌似不太顺利,安装成功了Android studio,在线更新Android adk的时候 ...

  5. ios正在使用NSDateComponents、NSDate、NSCalendar它的结论是在当前时间是在一段时间在一天。

    一般应用程序设置这一组的存在,比如夜间模式,如果你.从8:00-23:00.在这个当前的时间是如何推断出期间.主要的困难在于如何使用NSDate生成8:00时间和23:00时间.然后用当前时间,也许有 ...

  6. 2.cocos2dx 3.2在语法的差异，lambada使用表达式和function和bind使用功能

    1        打开 - 内置T32  Cocos2dx-3.2一个专案 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdG90b3R1enVvcXVhb ...

  7. NSOJ 飞船汇合(经典)

    一支分散的飞船舰队,需要汇合到主舰,但是这种飞船在太空中飞行的耗油与质量没有关系,只与发动机打开的时间有关系,为了节省油量,指挥官通知,汇合途中,多台飞船可以串成串飞行,这样只需启动一台发动机,由于安 ...

  8. crmplugin项目加入key文件

    通常,办crm的plugin发展,然后dll文件导入系统,都需要加入项目key文件,那么怎么办? 在右上角单击指定项目--属性: 点击属性后,弹出属性编辑框: watermark/2/text/aHR ...

  9. sql server 更新表，每天的数据分固定批次设置批次号sql

    按表中的字段 UpdateTime 按每天进行编号,每天的编号都从1开始编号,并附带表的主键 cid,把数据存入临时表中 WITH temp AS (SELECT cid,updatetime, RO ...

  10. ORA-00911:无效字符错误

    ORA-00911:无效字符错误--造成构建环境的一个小错误 实施某功能脚本语句.编译时,出现了ORA-00911错误,当时有些疑惑,之前生产库使用是没有问题的,经过一番检查后发现原来是一个非常细微的 ...