00:00
好的,我们继续啊,那上一节课呢,我们实现了这个点击切换视频的效果啊,那这节课呢,我们去把这个动效啊再给他完善一下,那就是说你比如说当我点击这个翻唱,大家看翻唱的这个导航呢,会自动的啊,移动到第一位啊,我点击舞蹈,舞蹈的会移动到第一位,并且呢,这个移动的过程中呢,是有过渡的效果,那么这个如何实现呢?首先啊,我们导航这一块呢,咱们用到的一个组件标签呢,叫score view。对了吧,哎,来,我们把下面的收起来,是他。那现在呢,我们来到官网啊,我们访问一下组件这一块呢,咱们去找一下这个score view这个组件。来在我们的视图容器里面呢,我们看到的是这个啊组件就是我们在我们的页面上用的,那么在这个里面呢,我们往下翻,哎,它这呢有一个标签属性呢,叫score into。哎,上面的描述是值应该为母子元素的ID,且ID不能以数字开头,那么设置哪个方向可滚动呢,它就会在哪个方向滚动到该元素,那这一句话呢是关键。
01:12
哎,这句话是关键,然后呢,上面这是需要我们注意的。首先,Score into。来那。它应该有这个属性才能去滚动,那么这对应的值啊,因为大家看标题属性太多了啊,为了大家看的清楚一点呢,我先把这个给它换行换下来,来哎,我们换成这样OK,那么下面这个scar view,来我们给它加上来,那么它对应的值呢,应该是我们子元素的ID。哎,某个子元素的ID,那为什么要这样做呢?你想啊,我们的子元素是不是循环遍历出来的呀,那假设啊。呃,我们的子元素ID分别为12345。那么这个scar呢,去控制某一个子元素呢,移动到最前边,那我是不是得知道某一个子元素的ID,这样的话就能找到它并且控制它呀,哎,所以呢,应该要跟某一个子元素的ID去绑定。
02:18
对吧,那我怎么跟某一个子元素的ID绑定呢?我们子元素有没有ID有,那现在呢,我们可以给它加一个ID啊,那么这个ID呢,其实就是我们循环便利里面的ID呗,哎,咱们也用到过对不对,那在这呢,我们应该是iem.id啊。把这个ID呢,给每一个子元素加上来了,那么现在那你scar这到底怎么去。拿这个ID,哎,你说咱有没有。对,咱有啊,那么咱们当初在点击的时候呢,是不是记录一个navy ID啊,哎,那这个时候呢,其实这放一个navy ID就行,那这样的话他俩就能够对上。那现在看看有没有什么问题啊,过来。
03:01
来大家看我随便点一个,然后呢,我们来到控制台这。看这人家说了啊,这里面呢,这个有错误啊,我们说了ID属性的格式错误。啊,应该以什么字母开头,而现在我们的ID是不是一个数字呀,所以不行,那针对于这个情况,我们怎么去解决这个问题呢?其实很简单,首先这不能以数字开头,应该以字母对吧,而且呢,上下要保持一致,那这个时候呢,大家看一下我是这样去写的,那我在它的前面呢,去给它随便拼一个字符串。但是要保证啊,你这要拼的同时呢,你下面的子元素也得拼,那这样的话ID我们肯定能对上,那么前面的是不固定的呀,所以啊,最终它还是能够匹配。好的,那现在呢,我们再来看一下效果,来,我来。来,我点一个翻唱啊,走大家看啊,翻唱是不是到第一位了,没有问题,只不过啊,现在的移动呢,很生硬啊,它没有什么,没有过渡效果。
04:04
哎,那如何让它有过渡效果呢?来,我们再看这个scar的官网。过来,那在这个官网里边我们往下看啊,在这有一个叫score with animation啊,就是在设置滚动条时使用动画去过渡。对应的是个布尔值,默认为false,我们想让它有过度的效果呢,只需要去设置一下当前的属性啊,这样设呢,等同于为处啊,之前啊,我们也说过,哎,直接写上就好了。好的,那这个时候我们再来看。来,我点个翻唱走,大家看哎,就好一点舞蹈对吧?啊这样的话呢,就有对应的过渡效果了,OK,那么这一节课呢,啊,我们主要是实现了这个导航标签的。过渡效果啊,那利用的呢,还是score view。来提供的一些什么啊,内置的一些标签属性实现了好的,那这节课呢,我们先讲到这儿。
我来说两句