00:00
好的,我们继续啊,那嗯,上节课呢,我们是解决了这个记录时间播放的问题啊,那这节课呢,我们再看另外一个功能。大家看我写好这个项目啊,我写好这个项目呢,下面这个列表呢,也是可以拉动的,哎,只不过你看我把下一拉动,哎,那上面出现了这个三个点。然后对应到这儿,我做了一个打印啊,那这个效果呢,其实叫下拉刷新。下拉刷新我们在干嘛呢?在发请求拿最新的数据啊,你看来到network我去往下一拉,这发最新的请求了啊,现在的视频没有更新了,是因为我拿到的数据跟之前一样啊,那这个呢,是因为网易云乐的当前这个接口的视频更新的频率啊,呃,没有那么高而已啊,但是啊,这个肯定是发起球拿最新的数据了。啊,可能过一会儿我们下拉刷新,它就能切换这个列表没有问题。好的,那如何实现这个功能呢?来到我们的项目大家看啊,现在我去下拉是拉不了的啊,我们需要专门去给他设置。
01:02
那么现在的下拉刷新呢,是针对于这个score view的列表,所以啊,我们还需要来到官网。找到咱的score view来,过来。嗯,然后我们往下翻啊,往下翻在这里呢,我们要去找一个世界啊。往下走好,那这个世界呢,叫什么叫这个。大家看叫bad refresh refresh啊叫自定义下拉刷新被触发。哎,自定义下拉刷新被触发好的,那这个是下拉刷新的事件啊,我们知道了,我们可以先过来定义一下啊,定一下来。找到咱的score view是这个,那因为接下来我们要写的标签属性比较多呢,我们还是选择呢,给它换一个行换下来啊,然后我们在这写,首先呢,我们可以把这个世界定义好,那这呢啊,我们就叫它一个refreher吧,Had refreher。
02:06
好,那么对应的事件来到GS里边啊,我们去定义一下,那之前写完了这些呢,我们就可以收起来了。来我们继续往下啊,那这个呢是呃自定义嗯下拉刷新的回调啊,并且呢,这个呢是针对这个score view的啊来我们把这个方法呢给它写上,嗯。在这里面呢,我们做一个打印啊,那这呢是I score view,然后呢啊下拉刷新。好的,对应的事件有了,是不是就可以下拉刷新呢?我们来到我我们的项目啊,来到conslo,把这些清一下,我们看一眼,走,大家看并没有反应啊,那说明光影这个世界还不够。好的,那我们继续再看官网啊,往上翻,除了这个事件呢,其实我们需要先去设置一个东西啊,先去设置一个东西来往上。
03:01
这呢有一个属性呢,叫refreher inable,默认值的为for啊,开启自定义下拉刷新,也就是说我们先需要去设一下这个属性,才有资格去下拉刷新。嗯,我们把它丢过来,那那这个时候呢,我们再看。好的,那现在呢,我们再下拉刷新,诶这个时候大家看就有这三个点了。没有问题。嗯,先说啊,这三个点是人家自动包咱显示的,那我们还可以干嘛呢,还可以去设置它,它的一些样式啊,包括这个下拉刷新的一些背景颜色啊,都可以去设置。嗯,那这个呢,现在我们就不做了啊,不做了,这都是小儿科的,好,那知道了这个以后啊,现在的问题来了。我们下拉刷新以后我们要干嘛。所谓的下拉刷新,就是再次发请求。是不是获取最新的视频数据啊啊,再次发请求啊,获取最新的视频列表数据。
04:06
那发请求获取视频列表数据的方法呢?我们之前分装过是这个。那么调用这get video list来,我们传一个视频当前导航的ID,它是不是就可以帮我们去发请求?没有问题吧,好的,那现在啊,那那这个方法有,那我们去调用一下this,点它一调用这里呢,我们要传一下当前data中最新的导航ID是不是就可以。来,我们看一下行不行。啊,首先啊,我们要来到network打卡,我一拉。发请求了,而且诶这个时候正好能看到视频,是不是更新成最新的了。但是啊,我们发现一个比较严重的问题是,这哥们儿。我视频都拿到最新的了,你这是不自动的,应该给我收回去啊。而现在的这个下拉刷新,它没有自动收回去。
05:01
那这怎么办呢?来到官网。啊,我也是找了好久啊,发现在这里边呢,有这么一个属性叫refreshher trigger。Trigger,那么这个属性是用来干嘛的呢?设置当前下拉属性的状态对应的是个布尔值。如果为to,表示下拉刷新以及被触发false呢是未被触发。哎,这个时候大家看我怎么写啊,来到这个标签这我们再给它添加一个属性呢,是这个们,它对应的是个布尔值啊,那这个时候呢,我去整一个变量,那就是A是什么呀,我们来一个这个哎,Trigger。好的,那么对应的变量呢,我们来到GS里边啊,去定义一下走。过来,嗯。我们默认假如说来个啊,那这个呢,是用来去标识我们的下拉刷新。啊,是否被干嘛处罚对吧,那现在啊,来到我们的模拟器里边。
06:02
打开咱们与塔。好的,那这个时候大家看这个布尔值为false,而且呢,小程序的这个,呃,调试器里边啊,Data塔中,你看如果是布尔值的话,前面是不会给一个单选框呀,哎,那这个时候大家看着啊,我点一下这个false走,你看我这手动的把这个变量切换为触的时候,你会发现这个下拉刷线自动开启了。啊,这个不是关键啊,因为这个下拉刷新开启呢,是由用户最终去下拉的,但是怎么关掉它呢,看着我只需要再点一下,它是不自动回去了。也就是说,当用户下拉刷新以后。我们发请求拿到了成功的数据以后,我们是否可以把这个东西呢,给它设为false。哎,那个下拉刷新是不是自动就回弹了呀,哎,没问题,好的,那么整理完这个思路呢,来到我们的代码里面。我们怎么知道获取到了最新的数据呢?那还是在这个分装的方法里边,哎,我们发完请求对吧,拿到数据,我们当初还做了一个关闭提示框,那这个时候呢,我们去干嘛啊,去关闭啊这个下拉刷新。
07:15
就可以了啊,怎么关闭呢?啊,那就说我们需要去raise.set data对吧?啊这个s data呢,其实大家看下边是不是有。那下边有的话呢,啊,我们我给它把这个放到这吧,我们就不写两个赛data塔了啊在这里呢,我们需要诶把把谁呀,把这个变量置为false是是不是就好了。好的啊,那我们就放到这儿了,来,那这个时候啊,对应的这个注释我给大家加到这儿,嗯。那这样的话不就看的清楚一点吗?来,那我们看一眼。来到network啊,首先下拉刷新发请求,你看自动回弹了,现在回弹的很快呢,是因为啊,我们这个数据啊,请求过了再请求啊,相当于缓存很快。嗯,很快啊,比如说我们来个舞蹈里面。
08:03
嗯,来下拉设计,你看是不是也可以啊,这是因为我们刚刚请求完这个接口。没有问题,如果是数据到达的慢,那么下拉刷新等待的时间呢,它就比较长一点。OK,那这是这个啊,那这个下拉刷新啊,我们关于scar view的下拉刷新我们就整完了,那么除了下拉刷新呢,那对应的肯定还有一个什么叫上拉加载呗。对吧,那这个功能呢,也是常见的一个功能。那scar里面哎,如何去开启这个上拉加载呢,我们还需要找一个时间啊,来在这个scar view里面呢,我们往下啊看一下啊。有这么一个世界。Scar to lower啊事件是这个scar to lower滚动到底部或者右边是出发。首先第一个问题哈,拱断的底部我们能理解啊,那就上拉触底呗,哎,那怎么会有个右边呢。
09:04
而且上面这个up大家看啊,拱到到顶部或者左边是触发。为什么会有个左右呢?哎,你别忘了个右呢,它既支持纵向滚动,是不是也支持横向呀?那么横向滚动的时候,那是不就是左右吗?好的没问题,那现在呢,哎,我们去绑定一下这个世界来来到我们的这个视频标签,这哎scar view,这啊的定一下这个事件啊handle。嗯,那这一把呢,我们就是headler什么呀,To lower吧。对吧,那现在我们去定一下这个回调。啊,这些写完了啊,就给它收起来了。呃,下拉刷新我们也做完了,来咱们继续往下,那接下来呢,我们相当于是实现这个自定义啊,这个上拉。触底。嗯,哎,上拉触底的回调对吧?啊,同样还是针对的scar右的,然后呢,我们把这个啊放到这。
10:08
好的,那现在呢,我们做一个打印啊,那这个呢是scar view的上拉触底呗。来,我们看一眼行不行?过来。啊,来到我们打印这一块啊。走沙拉处理没有问题,走。走大家看啊,这好像我往下缓一点,它你看走。走没有问题啊,那现在呢,我们控制这个,你看一直可以上拉触底,只要说你碰到底部它就触发一次没有问题,那么上拉处理的事件有了以后,我们可以干嘛了。啊,我们可以干嘛。对,那上拉触底为的是下边什么加载显示更多的内容呀,所以啊,通常在这儿我们需要做的是。拿更多的数据去显示。
11:00
对吧,那在这里呢,相当于是我们会去做一个分页的效数据分页的效果。嗯,那么这个数据分页呢,又有什么叫后端分页,对吧,还有什么呢,叫前端分页。嗯。那么前后端分页跟前端分页的区别是什么呀?假设啊,有100条数据。我们一次呢,只需要给用户显示十条。那后端分页就是啊。我你发一次请求,我只给你十条,你再发一次,我再给你十条。那么由后端来控制,我到底给你几次,也就说这个处理数据。分割数据呢,是在后端完成的,所以在后端分页,那后端分页的特点是我们我们发请求需要携带。指定的参数,比如说我要携带啊,我要哪一页的数据。比如说我要零到十的呀,对吧,还是11~20的呀等等。
12:03
那还有一个就是大小,你比如你一次假如写是十条,那我就通常再带一个参数里边三人,哎是大小,比如说十,那就我们第一次拿零到九的数据呗。对了,不啊,没有问题啊,这是后端分页,还有一种呢是前端分页,那么前端分页就是说后端会一次性的把这100条数据给到前端,前端拿到了以后呢,只不过一次呢显示十条。当用户上拉处理以后呢,我再截第11条啊,假如说第十条到。到了啊,到第20条。对吧,那当然了,不包括20啊,比如说从十开始,第一次呢是零到九。啊,我说的是下标啊下标。对吧,下边零到九,那是前十条,然后呢,啊,下边十到19对吧?啊,中间的第20条啊,这样继续往后给它解,那这个呢叫前端分音。那给大家说了这么多啊,为什么呢?因为接下来我们在这儿其实没有办法去写。
13:03
网易。云音乐啊,暂时呢,没有这个开放的这个分页的接口啊,所以呢,在这儿呢,我们没有办法去实现这个。哎,没有办法去实现这个,那在这儿呢,我先给大家打印一下,我们正常在这儿要做的是什么。对吧,啊,你去发送请求也好啊,或者是啊。那发送请求吧,啊,或者在前端啊截取啊最新的数据,然后呢啊加载到追加到。嗯,这个视频啊,列表的后方即可,对吧,那现在呢,大家要注意啊,这个网易云音乐。啊,网易啊,云音乐呢,暂时它没有啊,提供这个呃,分页的API,说白了我们每次发请求大家看一下啊,我们当初拿视频列表的时候呢,是不需要啊,不需要什么。
14:00
参数的唯一一个参数呢,是导航ID的参数,而针对于下方的数据呢,不需要任何的参数。所以呢,我们没有办法做啊,但是呢,我们可以去给他做一个假一点呢啊,什么叫假一点的呢,我们可以把就就把当前的视频列表数据呢,再给他追加到后边也可以啊。那么当前。视频的这个数据就以第一个为例,是不是就是这个data,这个数组的数据一共是八个。对吧,那这样的话来我去复制一下。哎,我去复制一下,然后呢,来到我们的项目里面啊,我呢粘到这儿。啊,粘到这儿啊,东西呢很多,来来到上面。看往上翻。相当于我把那个数据拿过来了,注意啊,拿过来那个数据啊,贝塔是里边这个数组是不是才是我们想要的,那现在呢,我这样去做啊,我去做模拟一个数据。啊,模拟数据啊,Let,一个new video list等于这个数组。
15:02
嗯,这是最新的那个视频数据啊,它一共里边呢,一共是八个。对吧,假设它是最新的。啊,那这个时候呢,当我们发请求。啊,假设拿到了最新的数据,我们要干嘛?我们是不是要显示到页面上呀,那么要显示到页面上,那页面上的视频列表是video list呀,所以啊,这个时候呢,我们可以干嘛呢?来呃,Let这个video list呢,等于this点塔点它。对吧,啊,那么接下来呢,我们这个video list呢,我去干嘛,我去呗。负是谁,就是把这个最新的数组里面的数据放到后边就可以了啊,所以这我们可以这样去做。啊,用三点运算符呢,是去拆包,因为我们push的应该是对象,而不应该是一个数组嘛,所以我先用三点运算符去把这个数组拆包,然后呢放到这个视频的数组中,最后呢,我们去set啊data一下,在这里我们把这个video list已更新啊,注意啊,更新的是它。
16:08
对吧,啊,那这一步啊,是将啊最视频最新的数据啊更新到原有啊视频的列表数据中。嗯,好的,那我们看一下效果啊,来过来。来,那现在大家看一下APP data中啊,这个视频的列表数据上来是不是只有八条,那么接下来我们往下滑,你看是不是16条了啊,那其实下边的还有数据,你再处理再划就24。啊没有问题,那这样的话呢,我们就实现了这个啊上拉加载的效果。好的,那以上呢是score view的下拉刷新以及上拉加载。
17:01
啊,要注意啊,我强调一下是score will的。好,那这节课呢,我们我们先讲到这里。
我来说两句