00:00
好,来啊,我们先把我们昨天讲的东西来给大家复习一下。嗯,昨天呢,我们主要是去写这一个点餐的这个界面啊,这个界面里面呢,包含了几个组件,第一个呢是整体的。Shop啊,在shop里面呢,也包含了另外的一些组件,嗯,一个是这个部分对吧,那这个我们叫它什么。Control对吧,啊,购物车控制,嗯,接着我们还有一个就是这个什么。是负的呀,对吧,啊负的组件,呃,下一个呢,就是我们下面这一部分是吧?卡啊,一共是这么四个组件啊行。没什么问题,来下面呢,我们继续来看一看啊。
01:00
首先来看第一个叫shop故啊,这个里面呢,它主要是显示了那个实物的列表,对吧,当然也包含食物分类的列表,当这里面啊,动态数据展现这种事情应该是比较好做的,就是获取数,查询数据,从后台获取数据,读数据展现,这个前面我们已经反复说很多遍了,就这三步啊,好,现在要说的是一些,呃,滑动的效果啊,首先有一个带回弹的一个基本滑动。就这一个是吧,那这个滑动呢,我们是用的一个库对吧?啊,我们用的库叫什么。Better啊,大家要理解它一个滑动的基本原理,它什么时候形成的滑动。它是不是有一个包裹的div,包裹div里面里面是不是有一个列表的ul。
02:02
对吧,那个包裹的div呢,它的高度是固定的。被指定为可视区域内某一个固定的高度能不能啊,但是我的内容的高度,也就是UR的高度是有可能超过它的高度的,一旦超过它的高度是不是就要形成滚动啊,而且大家要注意啊,大家仔细去看一下,我们加上这个be以后呢?诶,这个ul上面大概。是不是加了一个很长的样式啊,而且你在滑动过程中当能发现吗?它的值在什么,是不是在变了,变要变变的话就滑动了,大家一定要知道我滑动的是谁,是div还是ULUL这div这个帮啊,它是滑不动的,刚刚说过了嘛,它的高度是有限的,对不对,是可视续的某一个部分对吧。这个能懂吧,啊要能懂啊行。
03:00
啊,我们呃,要去让它滑动,其实很简单,就是创建这个实力嘛,创建它实力,但是有一个问题,就是创建它实力是不是要有一个时机的问题,还记得吧,这个时机什么样的时机。在列表什么显示之后,对吧?那如何知道我的列表显示了呢?其实我们有两种办法,不知道大家记不记得,我们最先用的一种办法是watch。加什么?啊,Next tick或者多对吧。这个能懂吗?啊,我们最先用的这个方法啊,后来呢,我们用的这种,我们后来用的是back加到了,而这个扩班什么时候掉,是不是数据更新之后大家知道啊,我们列表是异不显示的,异不显示是一个什么概念,其实就是显示两次,第一次显示的是空数据,这个看到吧?啊,第一次初始显示的时候是显示那个空数据啊,后面才显示的是带真正列表数据的一个数据,对吧。
04:21
啊,真正有了数据后啊,这个后面的是我们控制的,对吧,是我们去设计的。啊,主要是我通过这个大家对啊回调函数对他那自己设计该怎么做,以前咱都一直用别人的对吧,用库已经设计好的回调函数,那我们自己也可以继续设计回调函数这样一个概念。可以。只是大家平常不太用而已,所以我有意思的给大家去啊设计了这样一个点,因为我们完全可以用watch watch本来就有解决对吧。
05:00
好,这是这里。呃,下面啊,我们后面呢,麻烦的地方就在于啊,在右啊有两个效果,一个是右侧滑动。左侧它要有。是不是当前分类的样式变化,这是一个。第二个呢,如果第一个做出来第二个就很简单了,就点击左侧某一个分类项,右侧呢会进行滑动对吧,对应的位置对吧,那主要还是第一个功能比较麻烦啊。其实滑到右侧列表左侧呢,同步更新。要知道这些这里面有很多事件啊,就是首先be school它进用了原生的动M世界啊,使用的是自定义的自己分发的事件啊,绑定监听可以绑定我们绑定的两个监听,一个是什么。SC一个是什么意思?
06:03
这个监视的是滚动过程吧,这个监视什么滚动结束。它还有一个滚动监听的类型,还记得吧,不同类型影响到谁了?影响的是谁,SC也是它所对应的回的函数什么时候会掉对不对啊,而且大家记得默认它会掉吗?不会对吧?啊,具体的那几个词我就不再一个个说了,还要知道列表滑动的它有三种类型,一种是手指触摸滑动。第二种是什么惯性?说白了,惯性滑动手指已经什么离开了。再一个是编码滑动,我手指根本就没有去触摸,对吧,我通过编码是不是也是可以让它滚动的,可以。好,这个呢,是我们上课的时候给大家去写的分析和一个编码的一个流程啊。
07:07
像这种东西啊,稍微复杂的东西,其实分析其实是最关键的啊,你要分析到位以后,最后你就会有一个编码的一个一个流程思想出来啊,我们需要是滑动右侧的时候去变化左侧的这个啊分类项啊,主要是这个有个类名的变化。那首先得确定啊,我们这里面有一个类名叫他是吧,来标识是吧,有个概念叫当前分类,也就是说只有当前分类是不是才有这个类名。啊。那当前分类,那此时我们就要去动态的去计算确定一个什么当前分类这样一个数值。对吧,也就是说如果我告诉他这个值,你是不能确定哪一个ii应该有current对不对。
08:00
知道吧,啊,就是这个下边等于can X那个ii应该有can的这样一个类比,关键是这个值如何来确定的,对不对?任何一个计算属性你都要想清楚,首先想清楚一个事情,我跟哪些数据相关。或者说我根据哪些数据就可以确认这个值,对吧,自己怎么确认是另外一回事,其实它分为两步,先找出相关因素。如果你第一步都做不到,后面的不用想。这个能懂吧,啊先做的第一步是要找出相关的数据,也就是我们现在这个的index,相关的数据有几个,两个,一个是score one,一个是什么top。想好相关因素后,再去想我这个计算的逻辑,因为计算肯定要有逻辑的,只是这个逻辑呢,有时候简单,有时候复杂一点。
09:07
啊,反正自始至终我一直在跟大家强调啊,在做东西的时候,大家一定要有一个思路,这种思路其实是基本上是通用的。你掌握了这种技巧,也就说白了,我经常跟同学说的感觉就是你有没有上路,你要上路了,其实编程这个东西啊,你要上路以后,其实。你无论你去学当前这个语言,还是学别的语言,它都差不多。套路都一样啊,因为编程要解决的问题都是一样的,无论是任何类型的语言,比如说解S啊,比如说你的Java呀,Python啊什么的。其实他要解决的问题都一样。啊,所以思想是基本上类似的。大家如果啊,以后工作了也有可能去接触别的东西,也有可能啊,你不要以为你现在学的GS就以以后就一老是GS。啊,说不定哪天就让你写写JSP,知道JSP是什么吗?啊,Java里面的一种页写页面动态页面的一种东西,这有可能啊,因为前。
10:09
前天就有一个同学说,老师他怎么一上去让我搞接器,说而且让我一天看一天就要就要就要写了。啊。那很正常,如果说你真正的是把语言搞通了,就学明白了,其实你去看,你马上很快就能看懂,他跟我们以前学的什么东西很类似,对吧,其实他就跟我们的这这种模板写法很像很像,就在页面里面套Java代码。啊,页面不本来静态的嘛,对不对,但是呢,我们要写动态页面,是不是要靠一些动态的语法。啊,你要是GS就可以套一些GS代码,你要Java就可套一些Java代码。啊,思想很类似的。啊,甚至有的同学做前端做了一段时间,后来一不小心就转到Java那边去了,是有可能,不是有,不是没可能。
11:07
啊,这也没办法,因为程序员他是怎么说呢,你要不学习,那肯定你你过不了多久你就被淘汰了。啊,总是一个学习的过程啊。好,那确定好他们这两个数据以后呢,下一步我们就需要去设计一个,设计一个计算的,呃,逻辑或者计算的一个思路啊。好,最终呢,我们就会有一个计算,计算这个逻辑我就不再去说了,大家是需要去看。嗯。最终呢,我们分析完了以后,我们说我们最终的编码是不是有这么三啊,对不啊,有这么三步啊,一个是我们要确定这个值对吧,一个是要确定这个值,最后去计算。啊,不就掺活吗,这个东西本身可能你以后不一定会做,但是你要通过这个呢,来去总结一下,你该怎么样去解决一些复杂的问题。
12:10
啊,点击左侧列表下啊,右侧滑动到对应的位置啊,这个呢是通过编码的方式让右侧列表进行滑动啊看六色列表大下啊,你说我想这个是我涉及到哪些东西啊。我要干哪些事?你说第一个我要干什么事?我要实现这个系统,你说我要干哪件事,我也不说具体写什么代码吧,你说。第一个我要干什么?你看我要点击左侧列表下啊滑动啊,右侧滑动到这个位置,首先我要看什么。我要写,首先要写程序。干嘛?干嘛呢,我要我要做一个,我要做一个交互效果,首先第一步干嘛。确认保定事件监听了。
13:03
对吧,绑定事件监听就有几个是给谁绑。绑定什么监听回调函数是谁,对不对?那不就是这几个吗?那确定好这个以后,下面去做什么呢?那也就是说确定好这个以后,你再一点肯定就能反应对不对,肯定就是回到函数去掉了,那下一步干嘛,下一步就要实现你的功能了,你的功能就是右侧滑动到对应的位置。啊,你说要选什么,那也就说在回调函数里面在干什么呢。你说老师要右侧划到对应位置啊,那右侧划到对应的位置,你看啊,这是要要再做一个做一个功能,那那肯定要去执行叫什么语句,或者执行多条语句对不对,那执行语句就是就很多时候你要做一件事情,肯定要是很有可能是干嘛要调用某一个对象的什么方法去做什么事情。
14:00
能听懂我意思不?能不能就是我们要做一个什么功能。做一个什么功能,那简单的可能就是要调用某一个对象的某一个方法,对吧,你说老师是不是也有可能去调用工具函数,那更那就更简单了,对不对。我一再跟大家强调的是,你要做某个事情的时候,你先不要想着用什么方法,你要一定要想着什么谁来做。谁有这个能力,这个很关键。因为你光就知道方法名义没用,因为最终做的还是某一个对象,确定某一个对象以后,才去用某一个对象的方法去做。对吧,那首先我们要确定就是让右侧滑动到对应的位置,因为我手指没有触摸对吗?没有去滑,那所以我要通过编码的方式让那个列表来进行滑动,那列表滑动,那现在说诶我我也不知道,我也没看文档是吧,我就想我应该通过谁让它进行滑动呢。
15:07
谁有这个能力控制滑动啊?刚刚我们说我们是通过谁来去让那个列表能够滑动呢?B过对象吗?对吧?我们是通过创建一个对象来最终实现了基本的滑动吧,而我们现在是希望啊,我通过编码的方式来实现列表的平滑滑动。对吧,那这个时候自然这个滑动的管理是由那个对象来管理的嘛,对吧,所以我们就应该想到,哎,我。应该通过那个对象去画,调用它的什么方法,至于什么方法可以看文档,这个就不用记了。啊,因为老师我开始根本就分析不出来这个东西啊,其实分析这个东西呢。
16:02
就是你有了这个分析,你写出来代码,你看你就能懂哦,这很正常,就应该用这样。你只有不断的这样反复的练,你的这个能力才会提高。你的敏锐,敏锐性就特别强,你看那个东西,马上就会想一些相关的一些东西。啊,就好像说有的学的好的同学理解能力特别强,这个你怎么一看就懂了呢,我怎么看就不懂,没有一点想法,你的想法从哪来的?都是以前不断的分析,不断的去思考,最后产生了一个技能。其实这个技能产生以后就没什么。这是这样一个啊。这里面呢,主要还是滑动相关的功能啊,啊后面呢,我们去做了那个CCTRL啊这个呢,其实并不难啊,主要有一个事情啊,我们那里面是不是有个加有个减呢,尤其在加的时候,因为加后面第一次加和后面的加对不对。
17:01
大家知道我们家是不是要往负的里面添加一个抗的属性,那它等于几啊?第一次才添加,第二次是不是重新赋值?啊,但是有一个问题就是我们更新了状态数据,但对应的界面什么没有变化啊。这个是大家去在面试的时候可以去说的,你在写项目的时候碰到的一个问题啊,这是一个比较典型的问题。就是对于已经有数据绑定的对象来说,如果你给他新增一个属性。这个属性是没有数据绑定效果的,对不对。那怎么办呢?是不是要有解决办法呀,其实呢,View提供的解决办法啊,它这里面有两种,一个是view函数对象,一个set方法,还有一个是组件对象,或者是说VMMU的使命对象,有一个多了福什么下的方法,写法是类似的,那我们用到的是哪个?
18:06
你说老师你怎么不用下面这个。对吧,我是在vvox里面去去做这个事情吧,我在vvox经做,我有这个对象吗?没有,所以说你看,因为有人说老师,那既然有上面这种了,为什么还搞下面那种呢。对吧,那如果我在主线里面去写this,用起来比较方便。啊,你说实话就是很多设计你能看出来,这个设计的这个库的这个人是非常细心的,他是能想到你所需要的所有的情况。就很多事情他别人都会想,当然这个东西呢,不是一蹴而就的,它也是不断的更新迭代,最后才形成了一个比较好的库。啊,说不定开始他根本没有这个东西啊。就是这个大家去说问题的时候,一定要去跟别人先说清楚原因是什么,再说解决办法。
19:07
啊,记住啊,你说出一个问题来最好,如果可以的话,最好先说清楚原因,再去说我怎么解决了,你别就是说我解决了问题,原因不清楚,反正就是解决了,这种感觉是不太好的。好,有人说老师我要万一不知道原因怎么办,那没办法了,那那不是没辙了嘛,对不对,我说最好啊,能最好是能够去把原因说清楚。啊,后面呢,是啊购物车。这购物车呢,首先我们其实有一个购物项列表,对吧,有个购物项列表,也就是我们有一个卡复制这样一个数据啊,这个数据呢,我们其实有两种搞法,一种呢是设计成VX里面的一个状态,另外一种搞法呢,是把它设计成计算属性。
20:00
啊,相对来说啊,设计状态的效率呢要更高,因为计算属性是在相关数据只要发生改变,就会完全的重新计算。嗯,对于大量的数组来说,其实啊,对一个非常大的数组来说,我要操作一个非常大的数组要便利,这个效率比较低。懂王硕的意思吧,啊。我们最终如果用状态管理的方式来做,那就不需要去太去便利了啊。好,接着后面呢,我们还解决了几个是不是相关的几个B还记得吧,啊,这个里面有个功能性的bug,什么叫功能性的bug,就他也不好异常对吧,也不报错。就是那个功能没不能达到你的是不是需求啊,哎,你需求的功能和你现在实现的功能是有差距的啊,就这么回事。啊。你说老师我怎么开始我看不出来有这么bug,我感觉我第一时间就对了,是没关系,你测不出来自然也给你测,对吧。
21:07
就是有个过程,就是大家自己会做一些简单的测试,但是得说很多奇奇怪的操作你肯定不会做。对吧,但是车子人员会做,你放心,你任何想不到的操作,千奇百怪操作他都会,他都会操作。啊,你说老师这些操作会吗?会怎么操吗?会啊,因为你要是项目有很多人用啊,各种各样的人都有,他一不小心,他可能也不是有意的对吧,他无意的就随便点了点。哎,就进入那个怪异的操作模式。啊,最后你的这个bug就出现了,对吧。啊,解决这种功能性的bug,那就一定要把原因搞清楚,你要找不出原因来,你根本解决不了。啊,但是啊,写view的项目你一定要记住一个是。界面的展现是根据数据来展现的,你别小学这句话,就这句话啊,就一依据这句话就能解决大部分的问题。
22:10
就是我们功能性上有问题,不就是那个交互界面上有问题吗?对不,那一定要想清楚,一个是界面的显示,现在这个显示效果跟我的要求有差距,肯定是数据有问题。啊,只要你牢牢记住这个,并且依据这一个去去去想那个原因,就很有可能能想出来。你别看这这句话很简单,但是呢,只要你时刻牢记这句话,并且去想这方面的东西就行,因为我们现在用的框架就是这种方式,我们就操作数据。明白吧,如果数据是正常的,那界面就应该正常。对不对,那反过来说,如果进面不正常了,那肯定数据不正常。对不对,那我们就要去看那个数据。
23:02
一旦界面上的功能有问题,就要看数据,现在数据是不是跟我想的是一样的。应该是什么样,而现在是什么样,对吧?查看数据的两个位置,一个是在VX里面需要查,还一个在组件里面也要查。懂不懂啊?只要大家把握住了这个基本的关键点,其实就好解决。那万一解决不了,那说明这个东西太难了啊,已经超出了能力范围,那也没办法的事。再一个是负的组件,负的组件呢,我们主要涉及到一个复制组件啊,相互调用对方的方法,以前呢,我们一直在去一个什么方向对。以前的方法在哪个组件?父组件,但是呢,谁调子组件,那也就是说以前是子组件调用什么父组件的方法。
24:02
对不对?那我们的做法很简单,就是通过标签属性将函数从副主页传给什么子主页,直间就可以调了,对不对?而现在我们是一种一种情况是什么呢?我们的父组件要调用什么子组件的某一个方法,其实要做到也很简单,对吧,我就是要找到什么子组建对象。资源对象是谁?就是个组建标签对象对吧?那问题就落到我怎么找到这个组建标签对象呢?Ref吗?对吧。啊,这个时候其实就是说一个什么事呢,大家要如果可以尽量把更多的知识能够关联起来,一起来看。这样你的知识在你脑子里面才是一个网状的结构,尽量连接起来啊,而不是相互独立的,对吧?因为相互独立,你就要记更多的东西,那也更容易忘啊,如果是一个网状结构,相互牵引着就不容易忘啊,这是这一个。
25:14
好,这是我们昨天讲到的部分啊。
我来说两句