下拉刷新、加载数据功能

子类继承父类的属性值不过父类的属性值并不适合子类的内需,就需要多态。

  感觉一个人玩lol也没看头了,玩会手机,看到这多少个下拉刷新功效就写了这么些demo!

子类只可以重写(override)父类允许修改的性质,也就是父类中有虚构属性(virtual)的习性。

  那个demo写的相比随便,咱不可以同日而语插件使用,基本思维是没问题的,要用就协调包裹吧!

各体系都可以是其余类的子类也得以是任何类的父类。

  直接上代码分析下呢!

bird b = new bird();

布局:

<ul class="show-area" style="min-height:100px;"></ul>
<button class='page-btn-nick' >加载更多</button>

  就2行,只为实现效益,足矣!

  js也不复杂,先定义2个变量,贯穿整个demo,进了不要全局变量,当然,封装的时候也可以看成闭包参数!

var m=0,n=2;//m:button点击次数 n:一次加载几条数据

            plane p = new plane();

请求:

$.ajax('paging.html')

  这里我就写的本页面地址作为测试url。

下面请求成功后的拍卖就是重点了:

                    var obj={developer:[{name:'nick'},{name:'ljy'},{name:'xzl'},{name:'jeson'},{name:'yst'},{name:'zhw'},{name:'wqq'}]}
                    response=obj.developer;//假设请求到的数据是obj
                    m++;
                    var data='',elm='';
                    if(m>(response.length%n==0?response.length/n:parseInt(response.length/n))){
                        data=response.slice(n*(m-1));
                        $('.page-btn-nick').html('没有更多了');
                        $('.page-btn-nick').attr('disabled','disabled');
                    }else{
                        data=response.slice(n*(m-1),n*m);
                    }

            owl o = new owl();

主导思想:

  请求按钮点击两遍,m+1,讲请求的多少拆分,只要需要的多寡data;

data=response.slice(n*(m-1),n*m);

  slice(s,e)函数获取请求到的数码的一有些,s:response的胚胎地点,e结尾地方(取不到e地方的要素),再次回到值是一个含头不含尾的数组。

此地由于起先默认加载n条数据,m已经加了五遍1了,所以要s和e要对应的变动;

            Console.WriteLine(b.flying());

将数据动态加载到页面:

                    var len=data.length;
                    for(var i= 0;i<len;i++){
                        elm+="<li>"+data[i].name+"</li>";
                    }
                    $('.show-area').append(elm);

            Console.WriteLine(p.flying());

这里的append()要比html()更优!

  我看有些developer是勇的html(),这样每加载一遍,页面中的所有li将全体清空,在再一次加载所有的li,感觉每便加载都要加载有点多余的数目,浪费啊……

  看上边的数据就知道,我是讲每一次请求的数量在slice()两回,在加上到页面。这要写我每加载一次,只把这一次加载的数据append到ul的终极,往日的li并不会清空,这要加载的多少就是每一趟想要多加的必要数据,没有重新添加,感觉给力点吧!

  后边我把请求数据的getData()作为button点击事件处理函数,同时放在判断后的下拉事件中,就足以兑现点击按钮动态加载数据和下拉刷新加载数据了!

末尾附上完整代码:

图片 1图片 2

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
    <title>paging nick</title>
    <style>
    </style>
</head>
<body>
    <ul class="show-area" style="min-height:100px;"></ul>
    <button class='page-btn-nick' >加载更多</button>
    <script src='http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js'></script>
    <script>
        ;(function(){
            getData();
            var m=0,n=2;//m:button点击次数 n:一次加载几条数据
            $('.page-btn-nick').click(getData);
            function getData(){
                $.ajax('paging.html').then(function(response){//测试url写本页面
                    var obj={developer:[{name:'nick'},{name:'ljy'},{name:'xzl'},{name:'jeson'},{name:'yst'},{name:'zhw'},{name:'wqq'}]}
                    response=obj.developer;//假设请求到的数据是obj
                    m++;
                    var data='',elm='';
                    if(m>(response.length%n==0?response.length/n:parseInt(response.length/n))){
                        data=response.slice(n*(m-1));
                        $('.page-btn-nick').html('没有更多了');
                        $('.page-btn-nick').attr('disabled','disabled');
                    }else{
                        data=response.slice(n*(m-1),n*m);
                    }
                    var len=data.length;
                    for(var i= 0;i<len;i++){
                        elm+="<li>"+data[i].name+"</li>";
                    }
                    $('.show-area').append(elm);
                },function(err){
                    console.log(err);
                });
            }

            $(".show-area").on("touchstart", function(e) {
                e.preventDefault();
                startX = e.originalEvent.changedTouches[0].pageX,
                        startY = e.originalEvent.changedTouches[0].pageY;
            });
            $(".show-area").on("touchmove", function(e) {
                e.preventDefault();
                moveEndX = e.originalEvent.changedTouches[0].pageX,
                        moveEndY = e.originalEvent.changedTouches[0].pageY,
                        X = moveEndX - startX,
                        Y = moveEndY - startY;

                if ( Math.abs(X) > Math.abs(Y) && X > 0 ) {
                    alert("left 2 right");
                }
                else if ( Math.abs(X) > Math.abs(Y) && X < 0 ) {
                    alert("right 2 left");
                }
                else if ( Math.abs(Y) > Math.abs(X) && Y > 0) {
                    alert("top 2 bottom");
                    getData();
                }
                else if ( Math.abs(Y) > Math.abs(X) && Y < 0 ) {
                    alert("bottom 2 top");
                }
                else{
                    alert("just touch");
                }
            });
        }());
    </script>
</body>
</html>

View
Code

  可以直接复制完整代码,webstorm打开看看看,测试下吧!

挪动端下拉事变就一笔带过了,可以参照我写的有关于移动化滑动事件的博文!

            Console.WriteLine(b.eat());

区区技术有限,若有不妥,望不吝赐教!

            Console.WriteLine(o.eat());

            Console.ReadKey();

public  class fly

    {

        public virtual string flying() { return “i can fly”; }

}

public  class bird:fly

    {

        public override string flying()

        {

            return “拍下翅膀就能飞”;

        }

        public virtual string eat() { return “要吃东西”; }

    }

public  class plane:fly

    {

        public override string flying()

        {

            return “有发动机才能飞”;

        }

    }

public  class owl:bird

    {

        public override string eat()

        {

            return “要吃肉”;

        }

    }

Plane跟bird是fly
的子类,分别重写了fly里的flying(),owl是bride的子类,重写了eat()。Bird里的eat
是父类里从未的。

平时的类中具备的点子都成为虚方法,没有人用最基础的主意,全体都亟需重写,那么就不需要那么吃力把常备类中的方法主体都写完,而是,直接定义成抽象类,并且都写成肤浅方法。

 

只讲明方法的名号和再次回到类型,具体方法主体是什么样,继承过去之后自己去实现。

 

抽象方法肯定是在抽象类中

有抽象方法的类,一定是抽象类抽象类中不肯定只有空虚方法

抽象类,抽象类就是为了被延续而出现的。当子类中的属性都急需重写时,父类能够写成抽象类。抽象类的关键字是abstract。抽象类不需要显然的和函数体。

public abstract class ren

    {

        public abstract string shuijiao();

        public abstract string  chifan();

        public virtual string xingwei()

        {

            return “有表现动作”;

        }

    }

 

 

接口:interface

尽管让类更加系数

都是抽象方法,无法有少数其实东西,全部内容都亟待在子类中开展落实

接口的显要字是interface

public interface yule

    {

        string youxi();

 

        string dianying ();

       

    }

不需要class,也是虚方法,重回类型在此以前的拜访修饰符也不用写。所有的在子函数中宣示。

public  class nanren:ren ,yule     {

        public override string chifan()

        {

            return “大口吃饭”;

        }

        public override string shuijiao()

        {

            return “在床上睡”;

        }

        public string youxi()

        {

            return “lol”;

        }

        public  string dianying()

        {

            return “爵迹”;

        }

 

 

using System;

using System.Collections.Generic;

using System.Linq;

using System.Text;

using System.Threading.Tasks;

 

namespace 抽象类_接口

{

    class Program

    {

        static void Main(string[] args)

        {

            nanren n = new nanren();

          

            Console.WriteLine(n.youxi());

            Console.ReadLine ();

 

 

        }

    }

}

 

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

*
*
Website