00:00
大家好,我是学习园地的特约讲师高广峰,上节课呢,咱们只做了这个上拉,然后呢加载更多,但是数据呢,咱们没有加载过来,这节课呢,咱们把这个数据加载过来,那数据加载过来呢,咱们还需要用到这个数据模型。用到这个数据模型,你看这里边有当前类型是哪个页面对不对,然后我们加载的时候呢,就请求向接口发送重新请求这个数据,然后呢,指定下一页就行了,所以呢,我们必须得知道当前类型的当前是哪一页,就在这里边去做就可以了,上面这都是打印,到时候他注释掉就可以在这里边,那我们得先把当前页面。呃,默认那个页面是零的对不对?零的呢?默认请求的是一的页面,提问ST。PG等于这里边gods,从这个数据模型里边我们获取当前页,就学员卡指定的时候。这个当前类型表没有,就比如说是销售,而推荐的还是新品呢,销量啊,推荐新品对不对,获取这个类型里边的商品,那获取他的这回不是获取他的list,而是获取它的什么分页配置加一,那它默认获取的当前页默认的是零零加一,不就是一页吗?对不对,所以这里边呃。
01:07
这里边可以默认是默认是一也可以,你看你现在原来默认的是数据是零零之后我们获取这个一啊没关系。你看当前页,因为我们获取完数据之后传过来,已经把那个当前页。给我们加载过来了,就是复制过来的,对不对。然后呢,我们把这个数据取出来,那我们可以把这个配置排一下。嗯,当前页这块我们con so.l打印当前类型,我们加上这个crut.vv6当前类型拿过这个,然后当前类型的当前页加上。逗号。当前页。加上嗯,这里边pag。拿过来。
02:00
每次都独立生命变量,所以前面咱用cos的应该是没问题的,那你就觉得有问题可以赖对吧,那获取到当前这个呃页数了,那获取当前页数,那我们就需要通过get得到后里边的商品,我们在写接口的时候。通这个是不是传这个类型,那你选验卡变化哪里边我们就传什么类型,然后把页码传进去就可以了,回到我们这个里边,那这块传的当前类型,也就是希望二一类型点规律把当前的类型传进来,然后把加一之后这个页当前的第一页,那就把这个一加过来,对吧,放到这里边来。然后。呃,我们在一,然后获取数据,Res。我取这个数据,把这个页面的数据过来,那页面的数据拿过来,我们是不是得把这页面数据接在我们原来这里边,你不能是这样赋值,你不能是这样,比如说gos。这个数据模型里边cur也是当前类型里边的什么里边的list,对吧,你如果push push直接往里边追加的一个数据,这个数据呢,就是res里边,应该是gods里边这个吧,对吧,你不能说直接把这个数据这么压入,这么压入的话,相于把数据再压入这里边,它相当于这个列表里边又多了一层数据。
03:15
如果你用结构赋值的话,那就是会把这里边的数据展开,然后呢多个值,比如说下一个分页是十个数据对吧,加一页,这个就是比如说当前的是零零十一对不对。那第一页对吧,拿过来,拿过来之后把新的数据展开放在这里边,对吧,是这样的一个关系。然后呢,我们再把当前页这个数据也得改变,Windows里边CRT当前内型点V流里边它有一个变量配置,让它的页数加等于一。四加一。就变成一件了,然后呢。呃,默认这里边儿是第一页。嗯。这样的话,默认是第一页取出来,你看我们一拉上拉加载更多的时候,然后一拿出来加一是第二页,因为原来里边已经有第一页了,把第二页的数据放里边,然后第二页加一变成第三页,当前页就变成第三页,刷新一下。
04:11
呃,这个还是当前一还是一加12第二页,然后这边再去二页加一,下次再上拉的时候第三页,这样没关系,那没问题拿过来。那我们加载完数据重新计算高度是可以的,但是呢,还必须得有一个方法,必须得干嘛呢?就是完成上拉,上拉以后等数据等着请求。完成请求完成还得什么要将什么要将新数据,也就是新加载过来,这个数据怎么展示出来?展示出来,所以还得必须得调用这里边的一个轴,里边有一个方法叫做结束。看对的是这个。有没有?这样的方法加载完。
05:03
把数据展示出来。嗯。没有加这个方法,他没有介绍,这也数据加载完一定要出来。Flash。SH出来就是SH,然后有个啊PU。这块把这数据加上去,就是将数据展示出来,展示出来之后我们再调用这个重新计算,高度重新。计算。高度,然后高度又增加进去了,这样的话,我们再拉下一页的时候,高度又增加了。最好我们加上一个。嗯,希TT内容的高度,HT内容的高度,加上这个。可以重新计算完之后,高度重新计算完之后,当前的类型和钢前面我们放在这下面的上拉加载更多。
06:03
只打印就可以了。来,我们再回到这个里边翻新一下。那当前还是这一页里边没问题,你看当前的高度375对不对,当前类型这个当前页第二页再往上刷,刷到底部第三页。对吧。第四页是可以的,这高度可能没有变化。当前这个高度。没有变化,但是可以的,是不是我错了?内容的客户群体的高度就展示去呃。的宽度错了,应该是什么高度宽度300高度不是这样。恒心,咱们看下边这个地点的一个变化,你看当前的高度一千两千多了,对吧,然后再往上拉第四页。第四页三千六叫什么?第五页有多少数据,能加载多少数据,第七页对吧,就是这个类型,那我们再切换一下这个类型。
07:07
切换一下有没有必要我们再点击切换类型的时候,也重新计算一下高度切换类下,你看这里边第八页高度是这些7838对不对,你看没有问题的对吧。心的这块你看下边会空了对不对,所以呢,我们得在切换页面的时候,也得计算一下高度。切换页面如果不计算高度的话,那么这个页面就第二页面,它就不会怎么样,不会给我们恢复过去,所以我们必须找到那个呃,切换页面的那个位置,然后重新给我们计算一下高度。先把重新计算高速这个拿出来,然后我们找到我们点击的这个选卡就在这个位置对不对?当前的类型是什么对吧,那里边已经把当前类型了,这个就不需要了,然后我们这块综合一下,用到对齐这块也是重新分高度,这样的话我们再来看一下。刷新一下。那当前畅销书这个页面,当前页面高度对吧,2000多3000多三千六对不对,这是没问题的,然后呢,我们再回过来。
08:07
你看班级页面高度已经加载数据了,高度它是不变的,对不对,那比如说点新数。现在。我们再重新计算一下高度,那你看反应慢点,重新高度变成1400多了,就不会出现刚才那种问题对不对,下边是空白的问题。然后我们再点击一下,点击一下精选。你看2000第二页2000多高度也没问题了,那你再回到畅销书。再回到上腰。这块。有一个问题。嗯,啊键重复的那个循环的一个问题啊,里边我们用ID应该是反回来说ID重复,那我们可以。在这个地方。嗯。选项。在这个列表里边建ID,你就直接IM。IM这块是不会重复。
09:02
这个高度。然后我们再回到。用口,然后我们再回到基数。对吧,然后我们再回到。畅销书。嗯,就不会出问题了,对吧。建议有可能,因为这里面数据都是同的数据,ID好多都是同步的,这很正常啊,因为这是演示的数据嘛。那这样的话,我们这个就完事了,但是这个完事了,下来加载更多,咱们就写完了当前页哪个类型,因为它数据是响应式的,只要这变化页面就变化,那现在还有一个问题就是。我们这个没有在这悬浮的不动,是不是也跟我们拉在一起了,对不对。所以我们现在需要处理这个高度,把这块去处理一下,让我们滚动的时候它还在这停,对吧,因为它已经放在这个页面里边了,事件点击什么的也都是耗时的,因为咱们允许那个点击嘛,对吧。那现在如果我们需要处理这一部分。嗯。我们需要想另外一个办法,因为在里面嘛,对不对。
10:02
我们可以复制一份这个。复制一份。比如说在这里边。有两个,只不过其他的,咱们计算一定位置的时候,超过一位置的时候,让它隐藏,不超一个位置,让它放在这就行了,我们把这个单独提出来,复制一份,复制一份把它放在哪呢?放在这个位置。最上面下单,如果你直接放在这块,那他肯定在这块就是什么不动的,你看。就这不动的看到了吧,咱只需要当我们的高度相拉的高度我们超过这个值的时候,它就在这块,如果高度低于这块就能怎么呢?不在这块显示就行了,所以呢,我们需要把这块这个高度这块我们再加一个变量。比如说嗯,V杠瘦。啊,V杠受什么时候让它显示,比如说我们做一个变量,就是a ta啊固定的对吧,让这个标签固定的距离是真的时候,我们就让它显示对吧,那我们先去需要声明这个变量先默认让他什么让这个变量是假值。
11:05
默认它是不显示的。所以在这里边我们先声明一个变量,嗯,使用,因为它是后期,可以需要让它重新赋值,对吧?所以我们使用ne吧,A t z b table,呃,Fixxed等于ref,用的是甲值。咋值它这个变量写没写错。复制一下。然后是这个变量粘贴一下,保证是一个变量啊,然后我们需要将这个变量干嘛返回去,对不对,这样的话我们在页面里边才能使用这个变量,这样的话现在默认就一直是假,对吧?那我们只要是在一定的条件的时候,我们将它变成真就可以了,那什么时候将它变成真,让它在这显示呢?是不是我们得知道我们,嗯。就是滚动的多高的时候,我们将它变成针是不是就行了。那我们看一下,嗯,怎么办呢?我们看看能不能把我们的上边的高度给取出来。
12:03
因为这里我们能出来。你看在滚动的事件,因为滚动的时候可以动态获取这个高度吗?这滚动事件对不对,能获取这个Y的高度,能打印一下,你看啊,只要滚动的时候我们能一直获取这个值。滚动的时候一直获取这个高度,滚动有多高对不对?当滚动的高度和我们上面这个高度是一致的时候,对吧?当然这个全是负值,那我们可以把它前面加个负号。它就不变成正值了嘛,你看正值对不对。正值多少?然滚动到这个时候,那我们就知道上面这个距离对吧,是多高这个距离,那我们也是通过倒墓元素去获取那个上面这距离的高度,那倒元素咱说了,在页面里边尽量别使用稻模,你直接可以把它生明一个类去找到,它找的是这个半径图的高度和。这个的高度对吧,推荐产品的高度,那我们可以把这两个,我们可以把它圈起来对吧,放到一个标签里边,然后一起过去,不然的话你得获取两个高度,然后呢再去直接处理,对吧?所以我们这边起一个div。
13:04
把这两个绑在一个里面,放到这一里面,然后呢,我们用不用倒元素,你用倒营生命的类或者ID,我们也能获取到它的暴露,对吧,我们尽量用这里边介绍一个新的语法,其实也不是新语法,咱们前面也讲过ref对不对,Ref呢。是引用这个元素对吧,这里边我们起个名字叫B,呃,Ref,随便起一个这样的一个名字BF。这样的话,我们如果不是在setup里边,那我们在其他的里边,比如说date里边。就是如果不用组合API在ODS,呃,在这个里边的某个方法里边。那我们用的什么是这点高R?Refs,然后里边的什么啊,B ref,这样都能获取一个对象,然后可以调用这个组,如果它是在组件上,不是在模板上,那能调这个组件里边的任何方法,如果是这个组件,就代表这个组件的元素是这样的,那如果我们在组合API里边怎么使用呢?因为组合API里边它有一个问题什么呢?这个IEF和我们引用的。
14:08
这个if你看是同名。去同名,所以既然同名,但是呢,它也可以有效去处理这样的一个事情,那我们就得先干嘛。先用if把它给当成元素给绑定上啊。这个位置,那我们先声明一个变量,Let b ref,声明一个这个变量和我们上面起的名字是同名的ref,然后null绑定,那同样这个数据想的是名称是详式的,可以同时用的话,那我们一样在这个地方,我们得把它怎么着返回。被返回,这样的话,我们就用if相当于这个名称,就相当于我们的一个倒元素了,因为在模板中也是用IM起的这个名,那和它相当于是一个绑定的关系,所以呢,它就能代表那个造物元素,如果它是组件的话,就能代表那个组件是一样的,那比如说我们在这里边打印一下。
15:00
在呃,任何地方打印都行了,在这里边打印吧,比如说RBRF,呃。点v.rog按一下。你看它代表的是不是这道元素。看到这里边有两个对吧,那既然它代表这个倒米元素if,那我们就可以在滚动高度的时候,我们就可以知道什么这个b re EF它的什么。它既然是稻元素,那我们就可以获取稻元素本身的一个高度,它代表的那个稻元素嘛,它的比如说偏移量的高度在高度。亚。这块rog。你看就可以获取到它的这个高度刷新一下。那我们这里边运动的时候。那一直打印的是372,是固定的这个高度,它的高度是固定的,这样的话,你不管原因怎么变化,它都是372对吧,那372那就是当我们滚动的那个距离,这样的话我们就可以这么写了。
16:04
嗯,让我们的这个值,也就是a table这个变量对吧,真假值它是一个不准形的值对不对?当我们的。这个。距离加负号了,对不对,当这个距离大于什么呢?大于我们这个高度的时候。大于我们这个高度的时候,那我们就干嘛,我们就让它出现。你看它如果大于这个高度,是不是它就是针,是针的话,是不是我们的组件就显示就可以了,所以这是一个应用小技巧,你看你刷新一下。你看。那我们往上移动移动。移动。高度。372和。移动到。是不是这块我们的。
17:00
什么不高啊,所以。你带把那结果这块你看一下带。高点。如果不是这个不是在底层那。应该因为咱们前面刚演示的时候还可以呢,对吧。嗯,假如说我这块先注释一下,嗯。这个变量确保没写错,然后呢,当我们这个距离滚动的高度大于。嗯,100的时候。的,我就。大一的时候活动的时候。这块a ta,它。哦,错了,他这个。点加V啥。
18:03
能看到加这块得加什么VR就可以了。不然是不上的。那我们往上滚动。No no no。啊,可以了,对吧,就停在这了,它就显示了,那我们再往下滚动。就消失了。来,来现场。就解决了这个问题。六题样讲。我们上面默认它不是在最上面。落是不是在最上边,我们再找一下这个原因啊。默认不是在最上边,那我们就mark顶上边有45把这个。去掉价。可以了。然后这块。你看。没问题。上面默认它有一个那个的距离啊。
19:02
好,这样呢,首页的基本的功能我们就完成了,可以刷新对吧,可以选择学员卡加载数据,每一页数据都没问题,对吧?然后手标号上去就然后就显示,然后呢,我们还可以,比如拉到底部,我们想一次性回到底部,是不是我们这还得加一个回到底部啊,那么下节课再做回到底部啊,这节课我们先学到这里。
我来说两句