00:00
好的,我们继续啊,那再把table整完以后呢,那这节课呢,我们去写个人中心页啊里边的内容,那现在呢,呃,个人中心页呢,呃,它呢是在我们pages啊这个列表的第二项,所以呢,大家看啊,我们每次编译的时候,呃,首先呢,我们加载的是主页啊,我们还是要手动的点击个人中心页才能看到,那这样的话呢,比较不方便啊,所以呢。我们需要把个人中心页的路径,哎提到上面去,那这样的话呢,他每次加载。九七加载的是个人中心页,OK,那这是第一个,那么接下来啊,来到我们的web storm里面,那把这些收起来,把这些呢也都关掉了,好,那个人中心页里面的结构啊跟样式呢,我们就不需要写了,那这里呢啊,我们不浪费时间去做这个事情啊,我们主要是写个人中心页,以及接下来登录页面的交互功能。好,那在web storm里面呢,我给大家准备了一份啊叫reserve,那这个呢,表示的是备用的意思,在这里呢,我们能看到啊,它有两个写好的页面啊,首先呢,我们来到这里啊,去把这里边的这个结构啊,我们复制一份,然后呢,来到咱的个人中心页的结构里面呢,我们把这个呢贴过来,那对应的样式呢,我们也复制一下啊,然后来到我们个人中心页的样式文件里面,把它拎过来,那这样的话呢,我们来到我们的个人中心啊,大家看这个结构就出来了。
01:29
那在这里呢,其实布局啊不难啊,布局不难,没有多少东西啊,为什么不写呢?就是因为大家看我这儿当初设计的时候呢,啊,这些东西呢,都是用的定位啊,如果我们自己一个一个去写呢,比较麻烦啊,调试的比较啰嗦,所以呢,接下来我们重点是去看一下它的交互,那么这里的交互呢,首先啊,我们写一下这大家看啊,下边这个页面我们往下一拖,我一松开啊,它有一个回弹的效果啊,有一个回弹效果,那这里呢,呃,我们想一想我们如何去实现这个功能。
02:03
首先在我们的针机上,最终应该是手指移上去开始滑动,对吧?呃,然后手指滑动多少,那我们对应的这个,呃,板块呢,跟着我们移动多少,并且呢,它只能往下移动啊,不能往上移动,哎,这是我的需求。好的,那这个时候来到我们的个人中心页啊,在这里呢,我先给大家介绍一下这个结构,呃,结构里面呢,一共分为两部分,那上边这个user section啊,这一部分呢,它对应的呢,是我们布局里面啊,我们来到布局。上半部分啊是这个板块,而下面这个白色区域的板块呢,对应的是这个com containter,而我们接下来通过手指的滑动呢,要控制的就是这个区域。啊,就是这个区域那。里边的东西啊,我们可以先不用管啊,因为它很多都是静态的,那接下来呢,我们要控制这个区域,首先啊,我给大家换一个行,因为接下来我们要在这个标签上呢,写的东西比较多,那首先手指滑动这个区域呢,跟随移动,那我们先要去给它绑定什么啊,这个手指晃动的事件,所以呢,这儿我通过bag呢去绑定一下touchr啊,一个是start手指的三件套,对吧,手指移动啊,那这个呢,就是handler啊,Tor啊,Start呗,复制两份啊,那么对应的呢,含有什么touchr。
03:34
Move,那这个呢是torture and啊,手指滑呃,手指点击移动以及抬抬起来的事件,那么后面这呢,对应的也得换一下啊,那这个呢是。哎,Move啊,最后一个啊,我们给它换成end好的,那现在呢,事件我们绑定完了,那么对应的呢,我们应该在GS里面呢,去定一下这个事件啊,那对应的事件呢,我就放到这个下面,Downloadlo的下面啊,这是一个,那接下来呢,我们复制两份啊走,然后把这个事件换一换啊,那对应的第二个就是move呗。
04:14
嗯,那那第三个and,我们也给它换过来好的,那现在呢,对应的事件呢,我们也定义完了啊,为了测试我们的事件没有问题呢,所以呢,我们先去做一个打印啊start来复制。啊复制啊,这个呢,我们来一个move啊,最后这个来一个end,好的,那对应的测试代码我们写完了以后呢,来到我们的项目里边。来,手指点上start触发,然后手指移动move触发,我松开手指按触发,那说明我们这个世界没有问题,那么接下来我们要做的事情是什么?我们要思考一下啊,首先我们当前这个板块呢,是要跟随我们手指的移动而移动,那最起码你是不要知道你手指。
05:08
移动的距离。那如何知道我们手指移动的距离呢?那我们首先要获取到我们手指点击时候的纵向坐标,对吧?然后呢,我们要实时的去拿到我们手指移动的坐标,纵向坐标,那么移动的纵向坐标减去这个起始的坐标,那这个是不是就是我们移动的距离啊?啊,那这样的话呢,来来到我们的代码这啊,我呢在外边先去定义几个变量啊,我先来一个start弯吧,啊等于零,然后呢,我们再来一个啊move,那它呢也等于零,最后呢,我来一个move啊,比如说来个distance吧。啊,那这个呢,相当于是我们移动的距离,那现在啊,我初始化了三个变量啊,这个呢是手指啊起始的嗯坐标,嗯,然后呢,第二个呢,是啊手指啊移动的坐标,哎,第三个呢,是我们手指移动的距离,OK,那三个变量初始化完了以后呢,我们来到我们的世界这一块啊那因为测试的代码我们看完了,我就把它删了,在这里啊如何获取到手指起始的坐标呢?我们需要用到这个event对象在这里来,我们通过这个start one呢接收一下event点,因为是移动端,所以呢应该是T。
06:42
TOUCH4呢,就是我们获取到捕捉到手指的这个呃,元素啊,但是呢,它是一个数组。哎,为什么是个数组呢?大家可以想一下,我们用户在滑动或者叫点击我们屏幕的时候,我们有可能是一个手指,是不是也有可能是多个呀,所以呢,这里我们会以数组的形式呢,去捕捉你手指的动作,那么虽然说你有可能是多个手指啊,但是最终我肯定是以第一个触摸到我们屏幕上的手指啊为标准,所以这个时候呢,通常我们会通过下标取零的方式呢,拿到第一个手指的纵向坐标距离啊宽。
07:31
OK,那这个呢,就是获取我们手指的起始坐标。哎,那起始的坐标有了以后呢,那接下来在移动的时候呢,一样的啊,那对应的呢,我们还要拿一下它的移动坐标啊,那这个呢,就是木弯。OK move湾也有了啊,那起始的也有了,那接下来我们要去计算的这个a distance move distance呢,它就等于这个move y减去我们的哎,Start one。
08:07
那,那这就是手指移动的距离呗。OK,那这个移动的距离我给大家打印一下来,来到我们的模拟器里边,我们看一眼。走。往上走。再往下走,哎,那这个时候呢,大家能看到,当我们往下走的时候是正值,往上移动是负值。这个也能理解,假设啊,手指的起始位置在这儿,那么它距离啊,我们窗口顶部的这个拉弯的距离是这么高,如果往上走,那么是不是这呀,那拿。移动的距离减去起始的距离,如果往上走是是不是拿一个小的值解一个大的值,所以它是负值,而往下走的话呢,它距离我们是口最上边的距离更长了,所以是拿一个大的值截一个小的值,那这个时候是不是就是一个正值呀?啊那现在啊,我们知道了这个以后呢,来把这个打印呢,我们就都删了啊,那移动的距离。
09:14
我们得到了,那么接下来我们是不是要控制一下当前这个comer这个区域它的位移啊,哎,它的位移。好,要控制这个元素的位移呢,我们可以用什么呢?啊,我们可以用C3的新特性啊,你比如说我们可以用它的transform对吧?来稍等啊,我把画笔调出来那诶。稍等啊,那稍微有点儿卡了。把这个点击啊,把我的画笔调出来走,那C3里面呢,我们都知道它有什么有这个。啊,Transform呢,有旋转位移,还有什么缩放啊,这里呢,我们可以用它的位移来搞定,那这样的话呢,大家看啊,因为这个位移的距离呢,是随着我们手指的移动呢,它是一个动态的值,所以呢,我在我的data中呢,去初始化一个啊tra啊这样吧,我叫他一个s cover。
10:17
哎,Transform OK,那么这里边啊,位移那就是translate呗,而且这个纵向的位移那就是translate y那上来移动的距离呢,那就是零呗,因为起始值或者叫初始值了,它没有移动,所以我就写个零。OK,那这是这个,然后啊,这个变量呢,我们应该给到我们对应的这个移动区域,所以呢,在这里呢,我来一个style也是内联样式,在这呢,我们写个transform嘛,它对应的应该就是这个变量的值。OK,那这是这个啊,并且啊,我们为了测试的话呢,我可以先写一个啊,比如说我们来一个3200RPX啊,我先写一个值,假如说上来有位移的话呢,我们看一下它长什么样。
11:04
来来到我们的个人中心啊,那这个时候呢,大家能看到我们下边这个白色区域是不是整体的往下走了啊,刚才呢,是大概在这个位置对吧?啊说明我们写的样式呢,也OK,没有问题,好的,那测完这个没有问题了以后啊,那我们把这个还原一下,那这儿就是零了。来,那接下来呢,我们要去根据手指移动的距离,我们需要去干嘛啊,去动态的更新啊,我们对应的cover transform的啊状态值来,呃,z.set data,那么在这里我们要去更新一下它啊,呃,然后我们要写的内容呢,是这个,哎,Translate one。嗯,对吧,那对应的值它应该是个动态的值,所以这个时候大家看啊,我外面用的是什么呀,ES6的模板字符串,因为我要写这个变量,你就Dollar符大括号呗,那么它对应的应该就是这个值。
12:10
对吧,然后啊,千万别忘了我们把单位带上来啊,这个呢,就是用模板字符串的好处啊,变量的地方用Dollar符大括号一包就OK了,那在这里呢,大家要注意啊,我这用的单位是RPX。啊,运用它呢,意味着我移动的距离会短一些啊,如果说你想让它移动的幅度大,幅度大一些呢,你可以用PX这儿呢,咱们啊轻柔一点啊,我就用RPX来代替好的,那这个时候啊再来到我们的项目。哎,稍等啊,他正在啊,编译完好,编译完了以后来走,那这个时候大家看哎是不是就好了,OK,那现在呢,已经可以根据我手指的移动而移动了啊没有问题,只不过现在呢,它是把。随便动呀,而我们刚才的要求是什么呀,往上不能动,往下呢,打卡移动到一定的距离以后呢,它也不往上走了,而这个临界值,哎,咱们设置为80RPX,所以在更新这个状态之前,我们应该做一些判断,如果我们计算出来的这个移动的距离,它呢是小于哎等于零的,我们还让它移动吗?
13:28
哎,不让它移动,所以呢,这里就return了,OK,那这是这个,那我们再来一个啊,如果我们说这个move distance呢,它呢大于啊等于80,那这个时候呢,我们不让它继续往下走了,所以接下来你手指再移动呢,我让它横等于80就好了。哎,是这样的,好,那现在呢,我们再来看一下。来那这边啊,加载完了以后,我往上走不动了,往下走大家看移动到一定的距离它就不动了,只有在小于它,它是不是才会跟着回来。
14:10
OK,没有问题啊,那这是这个,只不过大家现看啊,现在我往下移,呃,移动我一松开。没有反应。没有反应,那而我们写好这个松开以后,它是不是应该有一个。啊,缓慢的一个回弹的效果,这个回弹最终呢,回弹到位移为零的位置啊,而这个动作呢,发生在我们手指松开之后,所以啊,来到我们这儿啊,我们这个按是不是还没用的呀。啊,那当我们手指松开,其实很简单,我们只需要将这个位移的值改成多少呢?改成零是不是就OK了?哎,那这是这个来我们看一下效果啊,来到咱的模拟器里边啊,让他再加载一次,走松开回去没问题啊,现在回是能够回去了,但是这个回去吧,有点突兀。
15:05
它没有过度的效果啊,想要加过渡呢,也比较简单,也比较简单,那在这里呢,我再去设置一个,呃,属性啊叫convert tradition吧,我们来一个嗯,Cover tradition啊,默认的是个control啊,啥都没有。而这个过渡的效果呢,我们也应该放到这个内联的样式里面啊,我们再来一个啊,那就是tradition对吧,对应的是它呗。那这里飘红啊,是web storm识别不了,咱们写的没有问题啊,所以呢,这个不需要担心,好的,那这个过渡。啊,我们最终什么时候要让它过度呀,那就是手指松开的时候,那这个时候呢,来当手指松开呢,我们要去修改一下,那就是transform,呃,Trans对吧?啊,那transition的前面有了,我们直接要声明我们要过度的属性transform,比如一秒再来一个什么,哎,曲线in,就是平滑过渡呗。
16:06
那那这个时候啊,看一下效果。好的,往下滑松开是不是有个缓慢回弹的效果没有问题,但是啊,大家看我再滑你会发现它就很慢了,而这个我们滑动的时候是不想要这个过渡的,那这样给人的感觉就特别慢,我只想在松开回弹的时候才有过渡,那现在为什么再滑有这个过渡呢?其实很简单,因为当我们第一次滑动完以后,我们就把这个过渡的属性给人家加上了,所以之后再滑动的时候,是吧,就有这个过渡的效果。那如何保证我们每次滑动的时候没有过度,而松开的时候有呢?也很简单啊,在我们手指。点击的时候上来,我们应该先加我们的过渡效果。
17:04
给他干掉。这个能懂吗?哎,手指点击的时候呢,先把过度的效果干掉,然后等到你松开的时候再加过度就好了,好了,那这个时候呢,我们再来看啊,来走松开没问题,走松开啊,那这样的话呢,大家看啊,我滑动的时候它就没有过度,只有松开的时候有。好的,那这节课呢,主要是带着大家哎去练习一下,呃,C3的特性呢,在我们小程序里面如何去使用,那么在我们项目全部写完以后呢,啊,我是这样想的啊,我争取把C3的新的性呢,都给大家设计进去,像什么transform的呀,包括我们的动画and mission。OK,那咱们这节课呢,先讲到这里。
我来说两句