全部 android asp.net C/C++ cshap IOS Java javascript nodejs perl php python ruby web容器 其他 前端 数据库 第三方平台 混合式APP 网络 系统 默认分类

vue实现ajax滚动下拉加载,同时具有loading效果

0 80
<!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;

热忱回答0

  • 加入年费大会员(20每年)
  • 热门标签

    猜你喜欢

    1. jquery-treegrid树状表格的使用(.Net平台)
    2. 解密jQuery内核 Sizzle引擎筛选器 - 位置伪类(一)
    3. JavaScript代码规范和性能整理
    4. 前端开发面试题总结之——JAVASCRIPT(一)
    5. 树结构之JavaScript
    6. jquery 全选 全不选 事件绑定
    7. Ajax 完整教程 (转)
    8. Angular2 Service实践——实现简单音乐播放服务
    9. 面向UI编程:ui.js 1.1 使用观察者模式完成组件之间数据流转,彻底分离组件之间的耦合,完成组件的高内聚
    10. RxJS + Redux + React = Amazing!(译一)

    衣食父母

    最近热帖

    1. css——样式表分类,选择器 1
    2. 【小试插件开发】给Visual Studio装上自己定制的功能来提高代码调试效率 5
    3. java程序包不存在 6
    4. 多目标优化实验平台搭建 6
    5. MVC5 DB FIRST 6
    6. 细心!SQL语句进行运算时使用字符串时缺失精度的细节! 6
    7. cassandra高级操作之索引、排序以及分页 6
    8. Struts2之Action与配置文件 6
    9. 效率神器 Workflow 实例分享 6
    10. linux服务器证书安装指引 6

    随机文章

    1. Cartographer系列之二——hokuyo激光雷达跑cartographer
    2. 程序员/开发人员的真实生活(gif多图,神似!)
    3. 对于SQL的一段小总结
    4. [水煮 ASP.NET Web API2 方法论](1-4)从 MVC Controller 链接到 API Controller 以及反向链接
    5. 【NOIP训练】【Tarjan求割边】上学