00:00
好来我们一个个来看,现在看第一个是吧,现在看第一个关键是滑动功能,我现在让它什么一个问题,咱滑动都没滑,是这概念吧,那也就说在做这统一之前,其实先要干实现什么套路,实现什么功能列表的滑动,对吧,先要去实现一个东西叫实现列表滑动,而且是两个列表。对吧,这实际上是我们做这个事情的什么前提,这个能懂不啊,就是你先别管什么分当前分类,你是不是先实现两个列表的滑动才行。好,我们先把这个给实现一下啊来。我们刚刚说过,实现它需要用到一个库啊,叫什么库来着。Better school对不对?那我们先是不是找到这个户看一下呀?好,去找一下这个户去哪找了,Get。
01:08
哎,好像他的这个这个布局都变了,你会发现吗?啊对吧,以前都在右边的啊,现在都变了,就他。那现在啊,就是其实我第一次看他的时候才才几百。现在都现在都快六差不多6000了啊,就大家如果能写出库,不是说达到达到6000吧,你达到你达到100,你找个工作那是轻而易举就达到100就行。但是啊,你不能你你你不能,嗯,找找那水军给你去给你去点对吧,你说我找个同学,你个人找那那要是我的,那要是我的话,那我很犹豫了,我把咱们咱们学校的人每个人点一遍。
02:03
是吧,一年下来都好几千是不是好来我们来看一下他这他这里有什么,是不是中文文档啊,那不更好吗。啊,其实他这里面还有一个这个东西。下面一个光网,这就更好用了,怎么这么慢呢?啊,下面就在说啊,Badw是什么?它的重点呢,是去解决什么移动端各种滚动场景的一些需求的一个插件。啊,当然现在他说已经是什么PC了,它其实这个库啊,是以这个是说白了以前有一个另外库叫iceq啊,这个库啊,在这个库的基础上进行了一个包装,进行了一个改造,进行了一个优化以后实现的一个东西,所以大家以后也有也可以有这种思路,诶看着门库还不错是吧,但是呢,还不够完美,那你也可以去优化一下诶。
03:07
后来就别人就发现,诶,发现这个户的时候,发现你的户更好用,那是不是相当于你站在一个巨人的肩膀上啊,更快的实现了你的100的目标是吧,他后面呢,就有一个起步,就告诉你怎么去怎么去使用啊,这个其实他官网文档可以切换语言中文。啊,就写的比较详细一些,诶已经切换了是吧?啊现在呢,就是它下面就有一些说明。你没发现很多很多官网都这么个现有一个有一句话是吧,就是有一些说我的我的东西有什么特点,说白了就推荐一下我的我的一些东西,所有说的更简单,就吹些牛逼啊,我有哪些牛的地方啊,那后面呢,肯定是你要去。使用是吧,你要去什么呀,可以看一下它的里面写的一些视力效果啊,其实他这视力效果呢,就能看出来,它它有一些功能可以点点开去看,通过这个能看出来啊,你看最简单,这应该是一个比较普通的看这种是什么。
04:13
不用看你其实你不用对点进去大概就能看出来,滑动过程中,这个是不是有个索引呢,这种功能现常进行哪个这微信。啊,手机号联系人是不是都有这些字母索引啊,大家可以点进去看啊。当然你要切换到什么。是不是移动端去划,诶他的这个怎么是,是不是太少了,对吧,应该东西太少滑不下去。呃,下面还有一些别的,譬如这个联动的,你可以点进去看一下啊,有单向的大家看到,诶诶我罗特刷一下,你搞了半天不能滑了也不行啊。
05:01
各位,还有单列的有多少,当然可以选啊,可以选你看。可以选选择不同的,它那个右边的可能也不太一样,对吧?啊点好的是不是就确定了啊啊这种类似的都有啊,包括这种有点像冷波。是吧,那不就轮播吗。是吧,跟是不是有点像,还有这种。这也是轮播的类似的效果,是不是这个有一点像那个应用的一个索引,就是引导,就第一次安装某一个应用的时候是经常出现啊,引导页经常成为啊。啊,还有一些其他的啊,这里面就不再一个看了,是不是有点像这个商品列表。这不就跟我们一样了吗?是吧,啊,就用我们图片好,这是这一个。
06:04
那其实相当于这个功能,其实跟是不是也有类似的地方啊,也有类似的地方,好这是这一个,那关键是怎么用呢。文档呗,对不对,文档会告诉你该怎么用。不对啊,这里面还没出来,对啊,应该这样的,他的文档现在是搞得比较正规的。啊,有一些说明介绍啊,嗯,说明介绍里面呢,首先我们还是先先第一个事情先下载一下是吧,先不想那么多,先给他下载一下,说了这么久还没下载,你等我下载慢。哎哟,没没有没有上啊,把它关了再来一个,再复制一下看下C。嗯,N PM in杠杠betterq自己写的了,好来我们继续往下看啊,看看怎么用啊,那后面呢,你看它的引入是引入了一个。
07:16
是不是引入一个他呀。对吧,引入一个这个,那也就是说我们在我们当前这里,我们先这个,我们当前这个组件里面是不是要有滑动啊,所以我就在当前是不是引入。这个能懂吧,啊引入关键引入以后怎么用呢?它什么类型呢,对不对,看一下引入之后怎么用啊,啊引入之后他也没有这地方就没有写了,我们来看一下它的这个这个起步。里面有没有去说,其实他有去说这个事情呢,大家看一下,说白了,他这里面有一个这个。诶,其实我看一下这个是什么,这个里面这个里面啊,这个已经没什么来说下它啊。
08:01
看着你。他的这个布局有点特色。它两个单词,一个叫rap,一个叫content,能看到吧,一个包裹,一个什么内容好,我问你什么时候形成滚动。现在这个样子形成滚动嘛,如果现在这个高度。不会不会形成滚动对吧,这个包裹的高度它是固定的。对吧,而且在可视区域内能不懂,而内容的高度可以这么高是吧?也可以这么高,什么时候这么动?当我的内容的高度超过了这个包裹的高度时,才会形成滚动。这是它一个滚动的基本原理,这个应该能懂对吧,这没问题没问题啊,那没有问题啊,下面就要说来怎么用上它了。这里面先引入,我刚才引入了吧,说明从下一句代码你能看出来它是个什么类型引入的。
09:05
是个函数对不对,而且用的构造函数,那也就是说要形成滚动,是不是要去六一个什么。是不是B对象,而且B对象里面指定的是谁?哎,还可以这么指。上面这个指定那个包裹的那个动物元素和下面指定的什么,这是不是更简单?能听懂吧,这应该更简单一点。说白了它内部会找呗,对不对,那也就是说我们现在是不是要创建一个B对象去关联上那个包裹的div。对不?能不能听到?那最终这个div就能滚里面的这个ul这个能滚动了是吧?记住了滚动的是谁,是div吗。是不是div不是,你因为知道div它是可视区域的一个高度是固定的,对吧,滚动的是ul能不懂。
10:03
好,来啊,我们也来去搞一下,我们已经引入了,那下面我要问大家,我要创建几个必对象,是一个还是两个?我们现在是不是有两个独立的?列表要需要滚动啊。对吧,比如说我们这个是我们左侧的吧,是吧,这上面这个是我的什么右侧的。那比如说对于左侧来说,要想它滚动,我是不是要创建一个第对象去关联的是哪个是UR还是这个div?也就是说白了,刚才不说过吗?在这里面假设啊,我觉得这创建一下啊,我现在开在这创建一下。不创建它吗?刚才是不是说指定一个选择器就可以,那我的选择器是是去关联他吗?不是关联谁这个div,那我写什么去了。
11:11
其他可以。可以吧,OK呗。但是这个得说啊。那时候我在这创业,寂寞。但还是回想一下我们那个。还记得我们那个微博创建,创建的时机非常关键,对,不是不是在我的列表数据显示之后才能创建,它也一样。一个道理,其实内部的道理是一样的,跟你说。那你说我在这创建行不行不行,那也就是说我得在什么啊,列表是不是显示之后创建对吧?来。
12:00
我怎么知道列表显示呢?前面我们怎么做的呀,用用用两个技巧,两个技术,先watch再是什么,对吧,Watch这意思,我换一种方式。看到这里这一条语句是不是去获取数据去的,对不对?好,那你说我在这个场景行不行。小明。也就在这创建数据有了没有?有了吗?也现在我在执行这个15号的时候,我的那个列表数据是不是已经有了是吗。不是。为什么不吃?你得知道啊,这个内部会去发这个请求,异步获取数据啊,异步这些代码是同步的。
13:08
对不对,我们前面说过,异步的代码肯定是在我这个前面的同步代码执行之后才执行,懂不懂,我们是分为初始化代码和回调代码吧。是吧,我们得到数据下面是不是回掉代码执行的。数据真正返回不在回收代码里面得到的吗?所以这么做肯定不行的,懂不懂,那后面我们前面是不是用what来去监视数据改变呢,这就换一种方式啊,看到我我这一个方法会触发谁,就是还有接着他是不是去异步发请求去。对不一不怕用好了看到这里。啊,看到这,我现在呢,你说我。此时在此处数据是不是已经更新了,对不对,大家看着数据更新了啊,数据更新了,我现在想办法要去通知一下谁了,通知一下组建。
14:18
这能懂吧,通知下组件就本来其实他有通知的方式,他握起是不是就能接受通知,但我现在不用卧起,我想自己能够去通知一下组件,说数据改变了是吧,怎么通知他呢?啊通知啊,看看这里啊,我们在去dispa的时候,除了传名字还可以传什么,是不是传数据?好,这一次我要传一个特别的数据。我传一个回调函数数据,我传个函数数据过去。能看到我是传一个数,这也是个数据,函数是不是数据,是不是是函数也是数据啊,我传一个函数过去大家看啊。
15:06
但是这个函数什么时候执行呢?你接受你传函数,那你就在这里面是不是要写一个用一个变量名来存。是吧,F是不是还数是啊,是不是函数是好,你要看着我。也就是说这一个传过的函数什么时候会被执行,告诉我是不是数据更新后执行,懂不懂数据更新执行,你说我把这个代码放在这里,是不是数据说明数据一面了,但现在其实还不够,是不是这个应该知道,前面我们做过类似的事情,对吧?能懂我说的意思吧,其实现在还不够。啊,现在不够,因为列表更新那个界面更新不异步的嘛,对吧,那我怎么办,还记得不,仍然还是要用那个技巧。
16:07
This识别多了,Next还记得吧?啊,其实做法是一样的,在这里面干嘛去?来吧。对了,总。啊,其实是一样啊,就现在主要我是通过一个事情,让大家去能够自己能能不能去设计回调函数这样一种思想啊。但是这里面要写的好一点,应该这么写。应该这么写。因为有可能不会传知道吧,因为这个地方他他如果需要知道接收通知,那他是不是会传一个回调函数的接收通知,那如果他不需要呢。他可能就什么不会传,那你要你要他万一没传呢,也就是说我这里面不利用这个技巧是吧,我不利用这样,我是握来去做是不是也可以。
17:07
是不是念,那你想啊,你刚才那个代码变会什么会帮拖呀。是不是这意思啊,所以啊,最好干嘛,是不是啊这个,因为这个是可传可不传的,对不对,你说老师你你咋不不不不去检查一下他存不存在。他必然传知道吧,啊,这是可传可不传的,所以最好判断一下是吧。大家估计大家写肯定会写if什么再去做,对吧,那这个是不是也可以啊,可以啊,这个前面我反复跟他强调过这个使用啊。好,那现在呢,我们就相当于创啊异步的,大家看看这一个回调函数是在什么时候执行。是不是数据显示之后对吧,或者列表数据显示后对吧,数据更新显示后啊,更新显示后仔细能懂吧?好,那现在我们来看一下我们当前的这一个。
18:18
能不能发可以吧,在右边可以吗?不可以,那怎么办呀?写呀,一样的写法对不对?好,那也就是说我同时还要去创建一个什么,再创建一个对象,只是我这一次指向的是谁。是不是下面这个有的这个不需要了。这以前的预判。If是用来标识这个标签的吧,啊,来好了是吧,看一下呗,看呀。
19:01
可不可以?这不轻轻松松实现了吗?但后面还有还要有些事情要做啊,现在只是实现了一个简单的没问题吧,嗯,没问题啊,这样我们就实现了一个简单的滑动。
我来说两句