00:00
好的,我们继续啊,那这节课呢,我们来看一下这个效果,大家看现在呢,我们写好这个页面呢,我往上去滑,哎,你会发现上面的头部和导航呢,是不是也跟着往下走了,那现在的滑动呢,其实是整个页面在滚动啊,因为我们的内容呢,超出了这个视口的高度,所以呢,是不是有滚动条了呀,那这个时候呢,大家看一下我写好这个啊。来呃,现在呢,我在滑动这个列表的时候呢,你会发现啊,我的头部跟我的导航呢,哎,是固定不变的。对吧,啊,它不会随着你这个列表的移动而移动,那么这个效果哎如何去实现呢?好。首先啊,我们来到我们的代码里面,注意看我们的最外边用的是。Scar。对对吧,那之前呢啊,我们用过什么啊,横向的滚动,其实呢,现在呢,我们只需要做一个纵向的滚动就OK了,那么对应的滚动呢,是score one,哎,那么现在的滚动呢,为什么不生效呢?哎,来来到我们官网啊,我们找到视图容器里面的score view。
01:10
这个时候大家看一下啊,如果说是纵向滚动的时候,我们需要给view一个固定的高度,哎,需要通过微信SS呢去设置它。对吧,好,那么它支持的单位呢,RPX和PX都支持,那这里呢,我们当然是用RPS给它设了啊,因为需要适配。好的,那现在呢,我们需要给这个score设一个高度啊,那么对应的class类呢,我们已经有了,叫video score。来到我们的样式里面,我们找找我们的video score,好在这对吧,现在呢,我们要给他去设一个高度。那么这个高度到底要设多少呢?哎,你想想看,这个高度到底要设多少?注意啊,现在的video score的高度呢,是这个包裹器的高度,那其实指的就是从这一块到这儿的距离。而里边的内容却多高那呢,是由内容撑开的。
02:03
对吧,你随便你有多少。呃,我们现在呢,要设的是这个包裹器的高度,就这到这儿。好,那么这个高度呢,很明显我们需要计算出来。一定要计算出来,你不能写死,可能有小伙伴一量啊把这个对吧。解,去把这减去一两写死了。那不行,他应该计算,为什么要计算呢?你想想看,我们在不同的界面。在不同的机型,它的呈现效果是不一致的,比如说FO6跟fo叉就不一样,叉是不是长一点呀,所以啊这个应该要计算,那如果说啊在H5的上面呢?嗯,可能我们的第一反应就是操作do对吧,拿到上面的高度,拿到底部的高度,拿到整个是页面的高度一解。啊,那现在在这里呢,我们没有盗门,现在的小程序里面没有盗墓对象,那这个我们如何去做呢。
03:02
哎,那这个时候呢,我们可以用到C3的一个,哎,新特性叫。那么当前这个方法呢,可以用于去动态的计算啊,CSS的高宽高。嗯。嗯。那这个呢,可以啊,动态计算啊,我们CSS的宽高啊,这是它的特性好的,那么这个里面到底怎么写,首先我们需要找到整个视口的高度。对吧,然后呢,我们想的是哎,解掉上面解掉下面就可以了,而下面首先大家要注意啊,那么这呢是一个table bar,那当时这个table呢,并不是我们设置的宽高。我们怎么来的呢?咱们当初呢,是用的它默认这个table的选项出来的,对吧?哎是这里,那这的table bar呢,你没有设置过宽高啊,所以呢,小程序呢,它也考虑到这一点了,当你去计算整个页面的宽高的时候呢,它会自动的帮你把这去解掉。
04:09
那现在的问题是如何拿到视口的高度。第一个问题。对吧,啊,那这儿的高度,这是我们自己写的,我们可以找到它。啊,我们可以找到它,那么这儿的高度到底是多少呢?我们可以看一下,你看啊,我头部的高度。啊,这反馈出来的是41。对吧,41,那转换成RPX呢是多少呢?是82。啊,这头部的高度,导航的高度是30,那也是再加60呗。啊,那现在呢,是142了,对吧,142你别忘了啊,下边这个video杠呢,含有十个像素的上外边距,所以呢,我们应该把这个也加上来,哎,我们需要呢,减掉152R PX的高度,那剩下的就是我们当前。包裹器的高度。好的,那知道了上边这个高度啊,那接下来呢,我们说一下如何找到视口的高度呢?这里啊,我把这个打开,我们可以用这个100V啊,也是我们用这个视口单位去解掉,刚才我们计算的啊,152R撇X就OK了。
05:17
这里呢,我们又提到一个单位呢,是VHR在这呢,也给大家说一下啊,这个市口单位啊,V啊对应的呢,还有一个什么VW啊,这里呢,我就以V为例啊,EV呢,等于1%的啊是口啊高度。那ew vw呢,就是1%的视口宽度呗,啊也给大家列到这儿吧,啊列到这儿。好的,那evw。嗯,等于1%的视口宽度呗。所以这里我是不是写的100VS,其实就是100%的视口高度,然后呢,解掉。我们刚才头部以及导航的高度。
06:02
我们来看一眼啊,来到我们的项目。嗯,好的,那这个时候大家看啊,我去滑动就好了,而且呢,你最好是在外边再移动一下,看看你计算的是否精确,外边呢不能有滚动条,有滚动条说明我们计算的就不太对了。好的,那这是这个。OK,那现在呢,我们这个列表的功能就实现了啊,然后呢,在这里呢,我们用到了一个什么cell,也是C3的一个新特性,把我们动态的计算宽高,那么在这里呢,注意一个小细节啊,这哥们支持你计算,但是呢,在这个计算啊,运算符的左右两边必须要加空格。大家看我不加空格,我们看一眼。你看我一滑动,哎,那上面这个是不是又跟着走了,说明我们的计算失效了,这呢注意一个小细节啊,这个运算符。
07:00
运算符啊,嗯,运算符啊,左右两侧啊,必须要加什么,加这个空格,否则会失效啊,否则计算啊会失效。嗯,OK,好,那这节课呢,哎,我们实现这个列表功能啊,咱们先讲到这里。
我来说两句