00:00
大家看屏幕啊好,我们刚刚这个布局,看我们做到哪了。好,F12进来,嗯,退出全屏好刷一下,最起码这个结构是不是已经出来了。是不是那结构出来之后的话,那想我们样式里面是不是还有部分东西不是很动态啊,那把它改改哪部分东西不是很动态。是不是宽度跟这个什么LY的宽度两个宽度啊是吧,OK,那怎么办。一样吧,你这边不也是创造一个节点吗?是不是,那我干嘛,我在下面干嘛。我下面再去画,画一个什么,或者说在上面吧,一样的吧,在这边去画一个什么still note,等于都后的点亏的什么。撕掉是吧,OK,最终这个东西啊,填到哪边去点head点是不是去把这个用这个嘛塞进去啊,是不是有时候大家要注意一下我这个编码的一个规范啊,能理解吗?啊稍微有稍微有点规范啊好这个三应该怎么做?
01:21
这个应该怎么处理啊?怎么出来的,是什么?HT等于什么?CTRLC他们俩干嘛?贴过来是吧,贴过来的时候的话,可能需要注意一下。我们不需要那么多吧,是吧,只需要外有20%,这个百分之。500是不是好,那上面这两个干嘛。干掉。500%不要吧,好,因为我这个东西要做的比较动态,OK,那个20%不要是吧,这个是不是跟我们数组的什么。
02:06
认识有关的好,这个应该多少?怎么写20%瑞点认是多少?是不是一除以什么润一点认识?乘100是不是乘以100是是好,后面这个呢,这个不是五吧,RA认识。是吧,怎么拼怎么简单,其实也不用很好。这不用乘以百,因为后面有两个零吗?这边不能写两个零吧,这一这是什么?0.2不能写两个零吧?OK,应该没问题。是不是好看一下。刷一下。
03:00
是不是来看一下外在这。没问题。然后呢?有没有问题,是不是高宽看有没有问题,都没有问题吧。A标签。Imagine是不是OK?那没问题,好,那咱们把最基本的滑屏逻辑给他了吧。写出来,大家写最基本滑屏逻辑的话,其实还有还有一点事情需要做,我们这个。这是不是我们那个ul,大家想我们这个ul的话要不要。定位起来。要不要?他要不要定位起来,你待会去拖他的吧。是不是咱们先做这个定位版本的嘛,是吧,那怎么办,他的为什么。那不舒服是吧,是不是一旦你定位定起来了,就就有问题了。想想一旦他定位定起来的话,他想这个高度是不是就会有问题。
04:03
高度是不就问题来看一下,这个高度是就没了。你看高度就变成零了,因为你里面这个U要干嘛。定位定起来了,所以说这个高度是不是得我们手动的来计算一下。是不是怎么计算。Cos里面嘛,If判断里面嘛,这边是不是去,这边是不是去判完了,判完了之后怎么办,我们说谁啊谁的高度有问题啊。是UR码还是怎个?整个包块有问题吧,是吧,是不是他有问题啊。是吧,那怎么办?他点什么点应该等于什么。等于谁任何一张图片的高度是就可以了。是吧,那找任何一张图片的高度上来找这边我有没有去拿到。啊。
05:00
有没有拿到没有,而且大家想想这边会不会踩个坑啊,会,因为我们初始的时候都结构这里面是什么。没有的是没有动结果的是不是,那怎么办?应该在哪去拿?在哪去拿这个你们是不在这边去拿,是不是你不能放到上面去拿,懂吗?等于什么query select嘛,去找到任何一张image是不是都可以啊。OK。Contra。找到一张image就可以能么解,把它的高度等于这个image点点不不不对吗?O hat加PX来看一下这是不是这个高度不会处理。你看这高度没上来,有没有没有上来看看,首先看一没高度。
06:01
肯定是有高度的,没有上来打个断点打到什么。打到这边是不是这个值有问题啊。是的,断点打到这边第一比要集结,你要来刷一下是不是过来了,你看我断点打到这边的时候的话,页面上有个什么东西渲染。没有吧,GS,你说的不是很快,你在这边去获取的时候,他有没有去渲染。没有渲染的话,他拿这个开的吧。零,因为你页面上压根就没有什么面,哪懂不懂那怎么办?我说你稍微等一等啊,是不是。这么讲,我说你稍微等一等,等一等再来拿。200毫秒之后或者什么差不多给100应该就可以了,100毫秒之后你再来拿,肯定有了是吧,我们来看这个定时器执行的时候页面画完。
07:02
说一下定时器执行的时候有没有换换。图片是不是已经画完了,这个是再去哪看这个字位段。两个三八是不是就没问题了,能解吗?老师这个里面干嘛加一个延值正气能能不解延迟直线吗?他这跟我们的渲染的原理是有关系的。懂不懂,因为你不加验收机的话,在这个时候的话,是不是同步代码。是不是同步的执行过去的话,干嘛执行到第19行的时候,干嘛就压根没有下文呢。可是内存当中有没有这个结构了?内存当中有没有这个结果了,有,可这个高度有没有渲染上去啊,没有,动物里面都没有这些CSS的信息呢。能理解吗?啊,是不是这边延迟的去拿一下,OK,那这边是不是现在于它定位定起来了,一旦定位定起来怎么办?是不是就可以滑了,好,那我们把最基本的这个什么滑屏给他做。
08:02
OKCLCCL。零三咱把这个基本花屏做。好,怎么去做,好,待会让谁去划。做爱。Ul去吧,是不是它?是吧,OK,可你那这个世界在上。世界在长。你想啊,我不是有个包裹区吗?我事界给这包裹是不就行了,我在包裹上面划来划去,这种划啊。花里面这个有啊。行不行,事件是不是给包裹区啊,OK,最最终去干嘛处理的是谁U是不是,那包裹区是谁和是吧,给他去把世界吗。
09:02
OK,我们说从这边开始,其实在这在这边一直在做什么布局,相关的布局跟其是不是有关系啊,这边开始做什么话题。是吧?OK,来看这个画面。首先什么爱even?Listener肯定是他是什么。它是大,它积木跟他之间摁,里面的逻辑感是不你想要一个东西。划起来的话,是不是就跟我们摸摸嘛,摸大摸斯木摸不是一样的吗?是吧,OK,这点好好滑,怎么做想想。还还记不记得咱们有没有做过类似的东西?有那个进度条上面那个小滑块。拽它能控制它的。是不是啊,OK,那我们说花瓶逻辑是什么样的?拿到什么花生金,你该怎么想?
10:07
想想这个很重要,第一步干嘛拿到元素一开始的位置。是不是,然后呢,第二步什么。拿到手指一开始点击的位置是不是,然后呢?计算出什么手指移动就是什么拿,拿到什么,拿到手指目时的实时距离。实时距离是不是干嘛?第四步,干嘛干嘛将手指移动的距离干嘛交给谁交给。
11:03
元素。这里面甲,OK,那我们就去做抽象呗,是不是画什么?哇,一个。到X等于零,画一个111ELEMENT X等于零,这个是元素的位置,这个是什么?手指应该始是位置。对不对,我们说这个什么手指一开始的啊。哎,这边应该不是手指一开始的位置,手指的位置吧,点的时候才是手指一开始的位置吧,是吧,OK,这什么元素的位置是吧,那在他数怎么办。问他是吧?切梯这边要拿谁?TOC touch chh么?e.change着呢,Ch e to,它是吧?那当中列表里面的第一个嘛。
12:15
懂不懂?我们说拖的时候,你可以两个手托三三个手头都可以,可是我认你拿走一个,随便拿一个,以后我就只认这一个。能理解吗?那怎么办?去拿什么等什么等于什么,可能他X嘛,是不是,然后呢,X呢,等于什么元素是谁啊。又要弄的。什么?因为我们是横向上面的是吧,好,那一开始的位置是不是已经确定好了是吧?啊,其实我们说这个就是手指懂吗?一开始的位置,只不过一开始位置要在这个里面才能确定,懂吗?OK。
13:12
C,这是元素一开始的位置,好在末的时候怎么办?的时候怎么办?一样一个嘛,是不是拿到什么手指的实时位置嘛,是不是X等于等于什么,它其实1.x,这不是手指的实时位置,是不是拿到一个差值嘛,DX等于什么。X减什么到X,这是不是那个X值啊?拿这个X值怎么办?付给谁啊?付给U吗?是吧,OK。Ul什么点?点left等于什么?
14:06
Ul实时的位置应该等于你一开始的位置加上数字移动的距离。是吧,一开始位置在哪?按点X加上手指移动的距离,点X加PX这里是不是在那这时候他应该就可以动了。什么鬼,没事。不是来刷一下九点是不可以拖了,是不是最是不是最喜码就可以拖了,OK,可是我们说拖的时候大家看你看我在这上面拖的时候是不是也可以了。因为我时间是加给的嘛,右边的嘛,可是你永远都不会出现这种情况的。为什么我不可能干嘛让你有机会干嘛拖到空白区域的?懂不懂,因为我们这是无缝的嘛。
15:00
能不能理解?好,那想想现在怎么办?现在是只可以拖是不,我们看。我们首先做这样,我们说干嘛,你轻轻,只要拖过一点点,我就让你去第二张。这个行不行,我你轻轻拖一下就去掉到这个逻辑应该在哪。这个逻辑应该在哪摁里面,手指抬起来的时候是不是OK,怎么做?想想这个怎么做?你是得看向左滑还是向右滑。是不是,而且每次是不是都是走的一整平呢?那咱们是不是得抽象一个索引出来。代表图片的下标吧。这个no的抽象很重要,是不是干嘛我们说干嘛在这边我们一个no等于零啊,Index最好啊,就叫index OK,这叫什么图片的下标。
16:06
OK,你好,这应该等于什么?想想默认值是不是等于零?是吧,那我们在它摁的时候,是不是判断一下你是向左滑的还是向右滑,是不是就可以了。是不是向左滑那干嘛。加加嘛,哦,不是index加加吗?向右滑index减减吗。是吧,怎么办?怎么判断向左花还是向?怎么判断向左还是向花?之前咱们判断向转化向法则是啊,之前咱们在3D轮廓度是判断向左点还是向右点呢。是不是那个比较复杂,需要去搞一个OD代,是不是现在咱们问你这个DX能不能代表小号。
17:06
大于小于零吗?大于零代表向右吗?小于零代表向左吗?因为你这个DDX是不是在我这个作用里面去用啊,那他是不是得冒出来。是不是他是不是得冒出来,可以去C好吧,冒到外面来,一开始等于零嘛,是吧,走进来。是不是就可以了。我们知道if DX大于零代表。像一闹。OK,加。向右滑真讲减吗?向右滑向向右滑是减讲,因为你要去前面拿到了嘛,是不是else呢。
18:06
应该干嘛T干嘛小一点是应该嘛加讲。是不是这边为什么要测掉这个,测下这个X数了,因为你发现每动一平的话,它是不是走完啊,每动一下的话,是不是走了完整一平啊,所以这边在处理它的偏量是个比较好处理它的掉点什么。等于什么index?乘以什么乘以什么一个视口的宽度。是否是不是就出来了,那怎么办,这个时候其实这个是口的话,你可以去拿LY的宽度。Ul的宽度不行,U的宽度2000多呢,你得拿L的宽度,或者说拿一个视是吧,这边怎么乘以什么document.document点。
19:07
是不是,而且想想向右滑。跟向左滑的时候,看向右滑是不是变负一样,负一时候是不是这样,这样的时候话,整个应该偏移是正还是负的。负一的时候,这个值是在什么?一会这么讲啊。是正的吧,那我这边要这边要不要加个付款。这个向左是不是向左滑,我们说什么大看。我说一下,如果向左滑是不去这一张,问你手现在这个整个U偏移量。是正还是负?如果向左滑动。是负的吧,向转化是负,可是我问你这个闹这个这个值。是取正的还是负的?
20:01
正的应该是正的,可是你的偏量负的是不是一个反比的关系,那我这边要不要加个符,是不得加号,这你来刷一下,轻轻点一下过来,轻轻点一下过来,轻轻点一下过来,轻轻点一下过来。就过来了。这个能不能讲OK,好,那这时我们说基本滑皮,我们是将index作为什么。抽象了谁啊?抽象了图片的缩影。是不是我们说in index是干嘛抽象了图片的,所以啊。是吧,那你想想我问你,如果这个index啊,它不是抽象图片索引的。如果这个index抽象的是你ul的位置。我问你这个控制能不能更加的细腻?如果是索引的话,我问你永远是01234,是不是这样的,如果我说这个index。
21:08
它抽象的不是图片的左眼,而是ul的位置,有没有是0.1 0.2 0.3。有没有可能?那这个控制是不是更加细腻了,能不理解啊?OK,那我们来看一下。CTRLC基本画面CL04。我们说什么,你这个index不要抽象图片索引了,抽象谁呢?抽象ul的位置。好,来看一下这应该怎么写。你说你在这边的时候的话,我是不是有一个一代,这个一代大家现在你如果这么写的话,是不是得判断方向,OK,那我来我说。你不是有个index吗?我说你这个index等于ul点比上什么。
22:10
一个口的距离,我问你这个index现在拿到的是不是你110实时位置。是不是,而且你这个还有必要干嘛。冒到外面去吗?没有表要卖的干嘛?直接在你自己的是吧,你要知道这个成你带什么抽象里。Ul的实时位置这么讲,而且一旦这样呢,我问你啊,这个index正负能不能代表你这个ul滑动的方向。能不能index的正负能不能代表你现在这个ul的滑动方向。可以可以。是不是如果你这个优点O在是个正值,说明你肯定是这样。
23:07
说明肯定是刚刚下。右滑。是不是啊,如果是一个负值,说明你刚向左。问,你现在这个应该是正负,跟这个偏移量是不是一个正比的关系?跟刚刚不一样,刚刚是个反比的关系吧,以后每次计算时候咱们是不是都得反的来特别麻烦吧,现在这个应跟这个配量正负是不个正比的关系,而且还需要在这里面去判断方向吗?不用了,那这个东西是不是可以干嘛不用冒出来直接在么,在你的作用里面,我们说最好全局变量里面稍微少一点。不然会出问题的,因为我很多方皮都可以来操作,你你看我给它包在里面是不是稍微好一点。
24:00
能不能理解啊,OK,那想想,那现在这个index代表的是你ul的方向的话,大家想想。那行,那我这个它是摁的时候的话,他想那现那我们现在是个什么样状态。九你。刷一下,我轻轻走一点,他肯定在这边停下来嘛,他U2人多方的82嘛,看怎么了啊,不是U2叫U2什么。Node。是不是CTRLC。CTRL1CTRL,好问你,那现在我抬手的时候。是不是你刚刚拖到哪,他就在哪停啊?怎么感觉怪怪的?啊,咱们这边是不是给了个符号,现在还需要给符号吗?这个index已经可以代表你的实时位置了吧。是吧,走你们那这个index线是不是代表了你这个腰位置。是不是,只不过这个应该代表是生分子的时候是一个是可为单位吗?
25:04
是不是啊,那走你那现在是不是你滑到哪,手指抬起来的时候还是一样的。那么讲,可是这个时候有没有一个值能代表你的实规则可以啊。就是这个什么。上。能不能理解,OK,那这样的话,大家想想做这个功能好不好做,我说你没有滑满一半的时候不准跳,滑满一半的时候。彩票。怎么做?也就这个index不可能是一个小数。是不是,那想想现在我这个量是肯定是个小数。干嘛?Index等于什么?点是吧。想想卖什么?Index them。
26:02
四舍五入不就行了?来看一下这年。刷下轻轻来不过去,划过一半过来是不是,给他加过去是不就行了。是不是?是不是这就可以了,这是为什么我们现在能写的这么简单,就是因为咱们对这个index抽象的话更加吸引了,现在这个index可以代表的ul的实时位置了,之前咱们是代表图片的下标啊,而且还是反着来的,跟跟跟咱们的方向。是不是现在这个index就代表了120实施规则懂不懂,那如果要实现刚刚那个在这里做。想要实现刚刚那个功能,能不能装一下就动了。也能做。
27:00
咋做,我问你这个时候,这个时候这个应该值应该会多少。正的还是负的?肯定是负的,你的拼量是负的,我们来看一下吧,每次我都康点落给他这个是吧,来看一下教你。你看是不是负的过来负的,当你慢慢正好拉到什么满率应该是负一。是不是这样的,有没有解这样呢?正的正的正的拉过去是个。正一能不能理解啊,OK,那大想想,那我刚那个需求应该怎么做?问,你如果这么了?这个值是不是要去一。向上去的嘛,是不是如果这么了,这个值要去负一啊。像下去的吗?
28:01
想想嘛,坐标系长什么样,坐标系是不是这样的这个点,这个点是不是零啊,是不是这个点是负一,这个点是一嘛。是吧,如果你这个值在这边。向上去转就是往这边跑,向下去转就是往这边。这边也是一样吗?向上去这向上去走。能理解吗?好,那这个是也好做什么,我说if什么。如果大于零说明什么去哪?Index是往左滑还是往往右滑?我右还,我一还这个。这个值应该为多少?Index这个值应该去。去正一嘛,向上去的嘛,是吧,因为咱们现在是在在第一嘛,所以我们看到只是一嘛,有可能这么划的话,是不就二了。
29:00
懂吗?好,那应该什么。应该么卖点向上去怎么说安排,而且要什么天花板的意思,向上去的嘛,是吧可LC吧是吧,L呢。如果你。吧,如果那小于零,说明王大华现在这个跟这个的方向是一样的。小于零是什么?向左滑的是吧,那个嘛,向左滑,向左滑是不是从负一,从什么负零点几到负一啊,向上是向下,向下记住不地板的意思。是吧,这正是再看我刷一下,轻轻一拉过去是吧,轻轻一拉过去诶。嗯。是不是有问题啊。大然,这个应该去这张图没问题,是不是这边。
30:08
松手啊松手,是不是去空白这张图了,你看是吧,是不是没有鸟过来。这就问题了,现在是,但是这个时候我们来看抬起来是不是不不。过来,抬起来,这个是负零点几吧?大家想想。也就是说,我在。啊。想想如果我过来,这没问题吧,这个时候,这个时候我问你如果在。
31:02
抬起来,这时候这个应该有多少,就在这个时候,这个应该如果这样画,这个值应该有多少?这个准备。我们来看吧,这个值是不是我拿的Ul.left那它实时的平移量的吧,好,咱们这个逻辑先不动,我们来看下这个值,好再刷刷下。走过来过来,我是这样的,看大看,先不要看这好看,我慢慢划,划过来,这个是我抬手,这个应该。我们说这个就像是U的位置吧,他现在买,他现在买不买负一。不买负应该是负零点几。你看是不是负零点角应应该去哪。去负一吧。
32:05
啊去离那应该是向上去的嘛,是不是。不应该都是小上,那么如果是在这边,这个是不是相当于要接近负一了,你看是不是接近负一了,如果这么一划,应该去负一到负二吧,负一到负应该什么?向下去的吧,是吧,也说向干嘛,向左滑之后,诶是不是还是得分向左滑向右滑。咱们这边这个你看应该大于零跟应该小于零,能中向左滑跟向右滑吗?不能报,如果做大区别的话,这个DX还得干嘛,还得报出来是不是看年。是不是还得冒出来我个什么?DX等于零吗?
33:02
是不是整体CTRLC干嘛,我们说这个大于零代表。是吗?这个大。向右滑吗?第X不是向向右滑吗?那X比你比你这个大吗?这边不是向右滑吗?向右滑的时候的话,我是应该怎么办。向右向右去上一应该怎办?向右滑怎么办?那看什么你向右滑,这个是不是正党应该去啊一吗?向上取的吗?是吧,那这边大一点的时候应该向上去的,是不是是不是没有问题啊OK,那第干嘛。小于零的时候干嘛向下去的嘛,这你过来。
34:04
过来过来过来过来没问题吧,刚刚是不是这个向向向就是向左滑向右滑,不能拿这个index来做判断的。这个能不能讲OK教你可是这么写的话,整个index抽象是肯定是更加细腻的,是不是我们说这么写的话,是不是一开始比你写这个index抽象的图片的图片的索引是不是要来的更加细腻,因为你这抽抽象图片索引的话,只能加加剪腻。我这边是干嘛可以有。小苏打,特别是在做这个1/2跳转的时候,优势极大。这样写就可以了。内分甲,你看我刷一下走,你1/2跳出来又是几大这里跳出不跳不跳。跳转不跳不跳能理解啊好,那记住我们说一般做的时候的话,这个U的位置啊,这个1EX最好去抽下什么U的位置啊,那这个时候如果做1/2跳转,它需要冒出来吗?不需要,这里这个能不能理解,OK,那当然你也可以用它来做什么,我们刚才什么动一点点就可以跳出来,这。
35:17
对吧,OK,好。
我来说两句