00:01
下面我们来完成数据列表的一个展示练习。整个展示呢,我们展示一个电影列表。我们用到的组件呢,就是那个great view。因为read view组件呢,它能够多列布局,前面说过啊,我们如果要展示一个可以滚动的区域,那么我们有三个组件可以选择,分别是square view list view,还有这个great view。其中呢,Square view呢,它是相对来讲啊,是最原始的,性能上呢,也是比较相对于其他两个组件来讲会稍微差一些些,所以我们会考虑用this view和great view,如果一行呢,只有一个元素这样多个列表组成的一个这样的骨头区域的话,我们可能会用this view,好这一行呢有多个,有两个有三个,诶这时候我们可能会用great view,所以咱们这呢,我们会采用great view来大家实现这个电影列表的一个这样的一个展示。好,展示电影列表的话呢,咱们这里需要有数据对吧,有图片数据,有咱们那些电影的数据,诶咱们也给大家提前的准备好了。
01:05
在我们的桌面呢,有一个data,这个就是咱们的数据,待会我们一起来看啊,有一个images,这里面就是咱们的图片,当然了我们用的所有图片数据,还有loading图这些东西。好了,那么这些数据呢,我们最终写完项目都会放到我们的这个代码中来,所以大家呢,将来可以在这个基础代码中找到我们的这个图片和这个数据,然后进而直接使用。好,下面不多说啊,我们直接来开始写这个代码。打开我们的代码卫生工具,在DEMO下面呢,我们新建一个新的文件啊,叫DEMO9。确定。OK,那么在这里面我们来改啊,将这个谬呢改成c area,然后呢,Class配置高度为百分百,诶这个咱们就可以不变啊,当然可以变也不变好了,整个页面呢,其实非常简单啊,它就是一个Google view组件,也没有太多内容,就是Google view,然后里面呢,通过cell组件来决定我们要渲染的内容。
02:09
我们要渲染的内容呢,是很简单的,就是上面一张图片,下面一个一段文字啊,就是这样的内容,所以呢,我们这里要有1IMAGE组件。好,因为组件在这底要渲染图片,那么这个图片地址该怎么写呢?这个时候我们就要关心一下咱们的数据长什么样子啊,我们来看一下,这时候呢,我们需要将我们的data je啊移动到我们的这个DEMO文件夹中,同时将image下面的所有图片。卡出来全选啊,所有图片移动到咱们的image目,一定要注意啊,图片呢,只有在imagem下面我们才能够使用,在别的目录下面呢,我们用不了,这里一定要注意。那么数据的话呢,就不需要放image下面呢,我们就跟咱们的文件的放一块就好了,整个数据的结构非常简单,整体是个数组,里面放的是对象,对象的ID,第一个是ID,第二个是title,就是咱们的电影名称,第三个第二第三个属性呢,就是它的一个图片的一个地址。
03:11
但是注意这个地址啊,它只有这个图片的名字啊,没有它的完整地址,所以我们在用这个地址的时候需要做处理。好,下面我们一起来看怎么做啊,然后呢,这个image图片的地址就出来了,它呢要用上item.cover。但是cover的话呢,只有部分地址啊,注意cover只有部分地址。所以我们前面还要拼一个固定写法,点点看,点点看image image目录下面的某个图片。好,所有图片要要要去找的话呢,都得至少回对两层啊才能找到,找到这个目录,那么才能找到目录下面的对应图片,所以这里一定要注意啊,不要目录写错了。好,接下来呢,我们来写这个文本啊,一个text组件啊,文本内容的话呢,我们故意在前面大家用一下这个index,因为之前都没用过。
04:04
我们前面就说过,不管是还是this view啊,它们里面的CE组件中呢,代表数据的是item,代表下标的是index啊,是这个,然后呢,在这里我们展示item的标题。这样呢,我们的数据展示就出来了,是不是样式怎么调我们不管,我们接下来再来整。我们规律呢,希望一行显示两个,这时候需要调一个属性。叫column count为二,这样的一行就显示两个元素,如果要一行30元素就写三,一行四个元素就写四,啊,咱们一行两个元素就写二。然后同样呢,我不要主动那个土豆条啊,我们收。八为force不要光头强,然后接下来最后呢,就是我们要考虑给运用的塞项数据啊塞数据,那么为了找到这个元素呢,我们给它取一个ID属性。那么我们就要例子就好了。
05:01
好,呃,怎么做呢?我们来到API ready1上来就会触发的一个生命周期函数中,我们先找到这个咱们的这个动物元素get ID。找多米元素之后呢,通过多这个动物元素一个漏的方法啊,就加载咱们的数据了。好,数据怎么写呢?数据不需要你写啊,我们从本地把我们刚刚放过来的数据引入进来就好了,当前目录下面的data塔角,这就是咱们的数据,那么我们把数据这里漏进去,那么我们的这个read view,它就有数据,那么就能展示了。好到这里呢,我们就完成了最基本的功能啊红它呢在这里展示,然后呢,展示的内容呢,是上面是图片,下面是文本。对吧,然后呢,C组件呢,不写布局的话呢,它是Fla布局,默认是垂直方向,所以刚好满足我们条件,但是这里一定要注意啊,不管是啊view great view还是this view,他们都需要给这个view呢指定一个高度。
06:03
这样呢,才会产生这个滚动区域啊,我们要给他指定的高度,这个我们不能忘了,不指定高度的话呢,这个就没法做了啊,没法做了。ID是例意思,ID是例。OK,呃,我们来高度呢,也是百分百,一定要指着高度啊,不然的话那就没法做了。好了,一切准备就绪,接下来我们可以在真机上模拟看效果。把这个呢,直接调试是看不到效果的,一定要真机看啊,我们来看chal这里,我们首先将我们的这个启动页啊改成这个DEMO9,确保它启动的是咱们这个页面。然后呢,我们再去,呃,全店编一下对吧。一定要全量编译啊,因为咱们这里弄的图片啊,全量变译,这时候我们看咱们的这个工具啊,诶是不是咱们的这个内容是不是就出来了。对吧,好出来之后呢,这里有些小问题,就是咱们希望呢,这个呃,容器啊,还是有左右还是有些间距,其次呢,上面要有一个电影标题的一个一个这样的标题。
07:11
那我们接下来我们再把样式方面呢,再稍作调整,首先呢,整体这个容器呢,我们加个Penny啊,上下左右都来个十了。识别诶这时候呢,我们来看效果啊,我们只要增两边一下。它就会这样留白是天S啊,OK,然后呢,我们再加一个头部,头部的话呢,专门有个组件叫Li head是头部,This foot是底部啊,我们的头部就this he,然后呢,内容就是咱们的电影列表列列表。好,我们来看效果。对吧,电列表就在这啊,接下来呢,我们给电源列表一个样式啊,一个内明,我们把样式呢,字体大小呢,可以调大一些,加粗一些,对吧,然后呢,让它居中,不要靠着左边啊,居中的话test为S。
08:03
然后呢,我们再加它风size调成,比如说25PS风位我们调成700啊加粗一下好了,这时候呢,我们看效果。是不是在这了对吧,那么最后呢,我们会加一个Mar bottom来的识别啊,让它呢跟下面的稍微有些间距拉开一些些,看起来呢就会稍微的更美观一点。好了,诶这样呢,我们就把这个样式基本就调好了,那么可能呢,你还想再调一些更多的样式,这个呢就可以自行去调整,那么咱们这就不做过多调整了。好,到这里呢,我们就能看到咱们所有图片了,是不是所有的电影数据在这里我们就能一一看到。全部能看到,好,那么那么整体有50个咱们的电影数据啊,它最终显示49的话,因为49是下标啊,所以49的下标对应的就是50条数据没有问题。
09:00
好,这样做呢是没问题的,我们第一初步功能已经完成了数据列表展示,但是接下来呢,我们需求要升级。因为开发的时候呢,我们往往不会一上来请求所有数据,而是先请求一部分数据,然后随着用户的往下往上拉取,对吧,上拉的时候再去加载更多。诶,为什么要这样做呢?这样做的原因就是一上来如果加载数据太多的话,那么问题就是速度会比较慢,渲染速度也会慢,那么用户看到效果的速度就慢一些,而一下这的数据少一点的话呢,用户只需要关心,只需要渲染这一部分数据,那么总比渲染所有数据这样速度更快。所以呢,我们希望每次呢,只加载十条数据。这样分批次的加载。所有我希望做这。所以接下来我们要给大家介绍如何完成上拉加载。上拉加载呢,得用上一个主件叫refresh,在文域里面的,专门可以用啊refresh来做这个上拉加载,它呢一共可以做这个refsh组件啊,它就是用来做刷新的,也是做那个扇拉加载。
10:09
或者下拉刷新。对吧,那么到底是上拉下的还是下拉刷新呢?它有个type属性。如果你type的值为,它就是下拉刷新,如果你type的值为F特,它就是上拉加载。而我们要上来跳伞。所以它为。来扶他。就这样。上拉加载。好了,定义好了之后呢,我们可以给这个fresh组件呢,加一些样式,比如说它高度多少啊,以及它内部要渲染的内容。它内部呢,要渲染一个图片,这个图片呢,就是那个loading图,代表我在加载中的一个loading图,我们再把所有图片弄起来的时候呢,就会image下面就会多一张图片叫loading.gf这个就是我们要用的这个loading图啊。
11:07
好,然后呢,我们给咱们的这个refresh。Refresh啊,我们给它一个高度,就50片吧。好了,那么我们接下来应该就能看到一点点效果啊,当然这个效果其实不太明显,因为我们还没完成他的功呢。这时候呢,我们看到是不是loading图在那转了,对吧,那么这个loading有点大,咱们要调小一点啊,给它class refresh image。它宽高的话呢,我们就为30吧,宽高30啊。然后让它居中,居中啊,我们的居中的话呢,就是要呃,Just connect为center啊,那么这样呢,它就会在水平方向居中。我们直接发到最下面去看效果啊。
12:00
呃,它这里呢,没有居中啊,这个元素它没有居中,我们来看一下是不是给错了啊。呃,我们给的是refresh,它是居中的,但是refresh是不是宽度,我们没有设置啊。然后呢,都为center,咱们都设置为center啊,我们看下。如果不行的话呢,我们需要加一个容器,让容器对吧,高宽撑起来,诶那么行了啊,OK,咱们的这个居中就居中了,好了,接下来呢,我们要想办法上拉加载更多数据,所以我们这里要对数据做处理,我们希望一上来呢,只加载十条数据,然后呢,啊,每次加载再加载十条,每次加载载十条。那怎么做呢?这时候呢,我们可以用一个数组的方法叫slice slice呢是截取啊,相当于是复制,复制从哪呢?复制零到十,这样呢,它就会复制零到九条数据,下边零到九啊,因为它是包含左不包含右,所以我虽然写的是零到十,实际上它复制的是零到下边九这个元素,就是第第一到第十条这个数据。
13:07
这样的话呢,我们就能保证啊,一上来它只有十条数据。哎,你看到九信息穿越对吧,那么剩下的数据呢,我们接下来要通过上拉加载的方式去加载更多啊,怎么做一起来看啊。上拉加载的话呢,它都会有三种状态。分别是摸摸初始化的状态,还有就是抓拖拽的时候的状态。最后一个是咱们的这个refreshing。是刷新的时候状态。对吧,一开始你可以看到是normal状态,当用户拉取的时候,对吧,这时候就是抓紧状态,那么松开手就是水刷新状态。
14:00
或者是拉取到一定距离,它也会触发refresh状态。那么我们需要指定这个fresh g这三种状态,并且在这三种状态的时候,我们给他提示一些不一样的文字。好,我们写上,那么怎么做呢?我们需要定义一个refresh。State状态啊,那么初始化的自然是normal。是字符串啊,状态是字符串,然后呢,我们把这个状态呢,绑定给咱们的这个refresh组件。那么现在呢?我们这里设置什么状态,Refresh初始化状态就是什么,同时它还有一个state change事件。当状态refresh状态发生变化,那么就会触发这个事件,那么在事件中我们就要更新refresh状态的值。我们看一下这个世界到底会不会触发,并且触发的时候能不能得到数据。来我们通过API点的。
15:02
打印一个什么呢?打印1.detail。一点跳上面就有我们想要的东西,下面我们来看观察效果啊,那么这个效果的话呢,需要我们拉取来,现在这样还没出发,必须要继续往上拉,诶这时候就出发了,是不是它就会出发,你看它状态的re,拉到太高了,它就会refresh,或者拉到超过啊多少多久它就会refreshing,然还有抓三种状态。所以呢,这个1.tt。呃,一点要点,State就是我们的状态数据,我们更新就完事了啊this.data.refresh state就等于一点t.state啊,那么这样我们状态就完成了变化。那么状态完成变化呢,下面我们就给他一些啊,一些文字提示啊,我们在这里呢,可以加一个这样T的组件啊,给它加一些文字提示。对吧,这个文字提示呢,根据三种状态的值来去完成,那么所以我们这里要判断它状态为啊,这个normal的时候我怎么办,为dragon的时候我怎么办,为refreshing的时候我怎么办。
16:12
那么如果在这里写判断条件,写这些语句的话,太费劲了。所以我们第一个方法叫get refresh。Test用来获取刷新的这个文字的一个函数。那么在这里面呢,我们读取到这个refresh对吧,它的一个状态的值,然后呢,判断它的值,如果你是什么什么,你怎么怎么样,对吧,我们这样做,这样做就简单啊。如果你正常情况,我们就发生。访问什么呢?拉取上拉,加载更多数据。好s if呢,我们判断它如果等等于这个drag。
17:01
如果等于抓的话呢,我们也给他一些提示。对吧,代表呃叫做呃。就是第一个呢,我们就叫加载更多数据啊,那么第二个就是上拉加载更多数据。就继续升了,意思是那么else呢,那么就代表数据啊,它在刷新中的加载中呢,我们就在加载中。加载数据中就好了。好了,有这个方法之后,我们在这里调这个方法,但是方法一定要加个字意思啊,调的方法,调这方法之后呢,我们就能看到咱们的这个文字的一些变化了,一起来看。往上走加载数据中对吧,当然我这个操作可能太快了,所以它一下子就来到加载数据中了,我们可以慢一点的话呢,可能会哎好一点。我看能不能体验到啊。刚拉去一点点。
18:01
啊,它这个可能太快了,一下子就能看到它的一个状态的值,所以这时候呢,我们可能没办法去直接的去呃找到啊好,我们可以打印API点,但是它的确触发了多次啊。我们呢,直接打印咱们的这个的值,我们来感受一下啊。Normal移上来normal对吧,然后往上拉的时候呢,我们能看到它的值是空啊值分的话呢,可能是我下面这里负值负错了,我们再看一下,那刚刚我们这里赋值赋错了吗?我们看一下。打一。来,张子欣。拉去。啊,我们来看一下它这里,因为上面这里,它这里更新了咱们的这个数据啊,一更新数据的话呢,它就。
19:04
触发这个,当然它这里就是提示这个alert啊。那么应该是没有问题的,我们来看一下这里哪里错了,这个API这里不调用了啊,我们在下面调用就好了,我们再试一下。分两个心等待一下啊。我们全量一次,它这里呢,刚刚应该是陷入死循环了。好,我们重新进去一下。兄弟。OK,我们往上拉。呃,这里呢,是这里写错了,是detail写成target target呢,它这个值太大了。
20:00
1TARGET能代表这个触发事件的目标元素嘛,那么这个目标元素对象太大了,如果你要note提示它就出现了这个内存溢出的一个情况啊,所以我们改成1DETAIL,这里写错了。好了,我们预习的话呢,我们再去拿开,开的话呢,大家能看到啊,它其实每一次都出发了,只是因为速度太快了,所以立马就变成了加载数据中这几个字样。但是没有问题,好啊,这里呢,我们就不需要再重新打印了啊,我们刚测试了它的确都触发了没问题好了啊,那么到这里呢,我们就能看到这块内容,我们改的下面的一个状态。那么到底改了状态之后,接下来该怎么办呢?对吧?接下来就是我们要判断啊,当状态达到了这个refresh状态的时候,我要加载更多数据,那么我就要在这里继续加个判断了。那么判断之前呢,我们先把状态的值先取出来啊。来更新状态数据,这是必要的,但是更新之前呢,我们要判断一下啊,如果它的refreshing。
21:04
这个状态,那么说明要刷新数据了,那么我们就要想办法加载更多数据,那么加载更多数据呢,我们在这里会专门定一个加载数据的方法啊,就自己不自己做了,在这里去加载。而且为了模拟加载数据呢,我们第一个setout,因为将来能发起肯定是发请求加载数据的啊,所以我们第一个延时定时器来去模拟加载更多数据。好加载更多数据怎么做?来,那么其实做法很简单,来把这个操作再做一遍,我们就是获取到这个动物元素,然后将word改成insert insert呢就会插入更多数据,那么你要插入多少条?那么就是十到第20条。对吧,这样呢,就可以达到我们这个加载更多数据的效果了。诶,我们来看效果。
22:02
往上走加载更多数据,诶这时候大家看是不是就多了一些数据了,但是加载完之后呢,这个东西应该不要再转了,对吧?所以我们在加载完成数据之后呢,下面我们要继续点data.set它要重新置为这个normal,要重置这个状态,不然的话呢,它一直在那转转转不太好看。我们再试一下。好,加载更多数据。加载完成,诶,你会发现咱们的这个上拉下载那个图标就暗下去了,我们再加载。哎,他又会啊,但是这样的我们写死的,它一直都是十到20条。那怎么办呢?这时候我们在加载的时候,可以专门定一个啊数据的一个长度。比如咱们的一个列表的。好,初中号是零,当我加载一次之后,我就把它值。对吧,加等于十是不是在它基础上加十嘛。
23:03
好,然后呢,下面我们每做一次操作的时候,我驾驶。然后呢,你要读取的数据。你要读取的数据也是这样的啊,就是这是这个数据,然后这个数据呢,是加十的啊,就这样去计算就好了。大家看啊,你看第一次呢是零到十条,然后呢,加完之后就是十,那么第二次呢,就是十到20条,它又加等于十,所以它就等于20,那么下次就是20~30条,它就加十又变成30,以此类推。这样呢,就会完成所有数据的加载了。我们先看啊,现在呢是零到九条就是十条啊往下拉。好这时候呢,就会继续加载对吧,数据再往上拉。诶,又会下载下面的一些数据。是不是?好一次呢,它会一直加载,直到把所有数据都加载完,达到效果。
24:03
好了,这个就是咱们整个练习咱们的一个数据列表,一起我们右上呢规格命组件。来用来展示啊,多列啊这样的滚动的数据。那么通过看来指定几列?设置一个ID属性,可以通过ID属性找到动物元素,通过load方法加载更多数据。加载数据,那么想要加载更多数据的话呢,要通过ert来插入更多数据,它就会在之前的数据基础上来渲染接下来的数据。然后呢,我们加载了一个refresh组件,用来做上拉跟加载的。那么他做法呢?就要绑定状态,绑定世界,状态决定他当前所处的状态,世界决定他的状态的变化是怎样的,我们要在世界里面更新状态,同时当状态变为resh的时候,我们要发请求加载更多数据。但我这里是有定时器来模拟请求的啊,模拟异步请求。
25:04
而且请求成功之后呢,要把这个状态改为某某,这样它才会收回去,不会一直在那转转。好了啊,以上呢,就是我们整个小练习了。
我来说两句