00:00
接下来呢,我们来完成店家页面的一个小功能,就是点击,比如说点击这个折扣的时候,对吧,那么右边要跳转到折扣的这个位置,点击左侧导航,左侧这个分类导航,我们右边要跳转到对应的位置,我们来看怎么做,在做这个的时候,我们要需要知道一件事,就是我们可以给这个cell这个容器绑定点击事件。那么绑定好点击事件之后呢,我们再点击的时候,可以通过传参的方式得到当前点击元素的下标index。有了index有什么用呢?这就涉及到this view组件存在一个方法叫scroll to方法。错误方法呢,是可以把它滚动到一个指定的位置上。指定位置上,而我们这个右边这个数据呢,刚好我们来看下数据结构啊。来往下走,我们打开数据结构呢,它刚好数据结构,我们可以打开一个页面去访问一下。
01:06
呃,不是,是这个接口。我们在这里访问,这里会格式化,它刚好数据结构是一个分类数据,对应的就是我们渲染的一个列表,我们在渲染右边的这个食品列表的时候,第一个就是这个K近话筒,然后呢再拿到负的去进行编译生成的,所以说右边的呢,每一个对象啊,对应的就是一组数据。它的下边刚好是从零开始,而我们左边这个分类导航这一块,它也是根据这个carry进行编历的,它也是拿到这个name,也就是说左边的这个导航和右边元素对应的这个下标,它们是一一对应的。而这个方法的时候,它就可以。对吧,Two方法它就可以传一个下标,让我们滚动到对应下标的那个cell上去,那么这样他们就对应上了。好了,那么具体怎么操作呢?下面我们来看一下。
02:03
来到往上走,我们首先给左边的view绑定一个点击事件。啊,这里呢,我们还是用这种方式去操作啊,当然我们用那个。呃,图形化界面也行,但图形化界面写函数呢,写代码呢很费劲啊,所以说我们建议在这写。OK啊,我们给它绑定一个点击事件,在点击事件里面呢,我们就sc to相应的附这个列表,然后呢,我们把这个index传过去,除了传index呢,我们还传item,因为photo to方法,它必须接收两个参数,一个是item,一个是index,所以我们两个都传过去,这样我就可以直接用了。来在method里面我们定义这个。好了,定义好了之后呢,我们接下来要做的就是让右边滚动到指定的位置,对吧,那么这时候我们就会调方法了。找到这个。
03:01
负。这个元素,然后呢,第二个它的一个方法sc two。第一个是item,第二个是index,那么这样它就会滚动到相应的这个位置啊,相应的位置我们来看效果。来,我们点击炸鸡小时。诶,它就跳转了,的确跳转了,但是这个跳转的位置不对,跳转的位置有什么不对呢?大家看啊,就是我们如果我现在往上点,比如说我点击这个KGKG放头。他跳的位置就是对的,但是如果往下点点这个儿童套餐。那么它跳转位置就不对,因为它跳转的时候,它有时候会默认就是定位到这个中间区,导致有问题啊,所以说我们在跳转的时候,还需要设置一个一个一个属性,让它在每次跳转的时候不要在中间去,而是在这个头部啊,而是在top。那么这个时候我们可以看一下这个方法,看一下这个。
04:00
嗯,组建的一个。Sc two方法。OK,往下走,下面呢,除了有跳转的这个index啊,其实只要闯index啊,然后呢,还有第二个是这个。需要传这个behavior设置为top,那么这样的话呢,它才会滚动到这个底部啊,这个item这里不需要传,这里整错了,这里只top就好,Behavior top,那么他每次滚动就会到底部了。这个item呢,是其他地方要用啊,我们先放在这。比如点甜品,我可以挑上甜品点儿童套餐。它就会跳转到儿童套餐点在厨房也会跳转,我再点回去点炸鸡小时,诶,它也跳转到相应的位置,只是这个时候他可能没有动画了,就是这个。好呃,所以这个跳转呢,就会以非常轻松的实现,整体做起来就会比较的啊简单。除此之外呢,我们还希望左边这里有个高亮的效果,对吧,不然的话呢,我我都不知道我选中的到底是哪一个。
05:06
所以我们这里呢,给他两个类名。然后待会我们通过if来显示隐藏啊,一个人呢,叫T。正常的吧,我们看这个T应该记作13是不是。因为下面是14啊,那么这个我记住13吧。一个叫13,一个叫太,我们来对比一下。呃,T13的话呢,我们设置了个样式,就是它是一个灰色的,我们可以看一下。往下走啊,它的颜色是个灰色的,那么下面这个test active呢,我们设置的颜色这个需要自己写啊,为一个高亮色,它们最大小是一样的,其实这个时候呢,呃,设置好了之后呢,接下来我们就是要这两个值切换,而不是要一起显示啊,而是他们要切换,要切换的话呢,我们就要知道我们选中的是哪一个,并且每次点击的是要更新这个值。
06:00
所以我们这里第一个carry。的一个选中的下标最大初始化值为零。呃,注意要定义在这个说服外面,别定义错了。好啊,定义了这个carrying death的话呢,往上走。往上走,找到我们对应的这个位置啊,就是V跟E就好了。呃,如果carry。不等于咱们的当前便利元素的下标对吧,那么它就显示上面这个,如果等于mega else。它就显示下面这个。那么这样的话呢,它一上来就因为我们默认下边是零,所以这个KG饭桶是高亮的,其他的是个灰色的,对吧,很明显,但是问题就是当我们点接收啊,这个下边没有变啊,导致其他元素没有发生变化,所以说我们在滚动的时候啊,这里是。对吧,右边食品列表滚动。
07:03
那么我们还要更新。这个。左侧的下边,左左边的下边。This current index等于我们传进来的这个index。好,我们来点一下,我点了这个明显发生了跳转,但是我们发现。哎,他这个高亮没有出现。这是因为呢,在这个Li view组件啊,它做一些优化,如果你没有调那个update更新方法呢,它是不会去更新的。对吧,就是你做什么操作他都不会发生任何变化,所以说我们要要发生变化,我们还得去啊手动的更新Lia键。那么效果才会发生变化。那么手动和新六组间呢,我们同样的要获取到这个这个内容对吧,叫carry。
08:07
获取当中呢,它有个方法叫update update方法呢是需要传两个参数,就是item和index,所以说我上面传了item。它是跟这两个参数必须传达是更新。就是咱们类组件哪个cell需要更新,那你调用传这个相应内容,它就会更新,这个是。这时候我们再点,比如说点这个饮品甜品。我点击诶,你看它是不是就亮了,点击儿套餐,你看儿套餐是不就亮了,但是问题来了,我们只更新这个元素,其他元素没有更新,导致其他元素它的高亮效果还存在,而其他元素高亮效果应该不存在,所以说我们更新的时候,这个是更新的是当前元素。我们还要更新。啊,这个上一个元素。
09:00
都要更新。那么上一个元素是多少呢?这个时候我们要知道啊,传过来的这个下标是最新的下标,而上一个下标就属于这个,这就是上一个下标,所以更新上一个元素呢,它的下标就是这次点data塔,点count in就是这个。这个就是扇子,下边我们可以在这里记录一下。这个就是上次的下标。那么item是哪个item呢?Item我们也要去设置成多正确的啊,Item呢也得是上一个的item,所以上一个item呢,它取值是从this.data点这个shop里面,再点这个catlery,因为我们分类都在这个shop的calery里面,然后呢取下边。那么这样就可以得到这个值。七要更新胜率元素,也更新单体元素,这样我们看到比如说点就是K咖啡,我点那么K咖啡它就会变成高亮,同时KG饭桶它就不会高亮了,然后呢,滚动区也会跳转到这个相应的位置,点闸机小时,哎,一样的效果,这样就可以达到我们小的效果了。
10:14
对吧,点啥它就跳转到哪里去。这就这样的。好,呃,所以这就是我们大概呃完成的一个操作啊,这里面呢,因为涉及到是LI6组件的用法,所以大家一定要仔细看文档,六组件的默认它是不更新,不会更新里面元素的一些效果的啊,那么你要更效果就得调这个update方法,它才会发生变化法,而第update方法你改变了哪个元素,那么就这个元素会发生变化,而其他元素呢,你又得调update,所以说这个THIS6组件在更新过程中啊,会稍微的麻烦一些啊。好,到这里我们就要完成了一些功能,其实每次完成功能的时候呢,我们都建议大家提交一次代码。
11:00
万一将来代码出现的问题,也可以随时的回退啊,这样会更好一些些。我们再提交一次啊,这里我们是完成的是店家。页面的静态组件。确定。OK,那么这样的话呢,我们就把呃,咱们的所有内容都已经提交上去了。
我来说两句