00:00
好的,我们继续啊,那做完这个这个区域呢,我们接着往下来看啊。那么下面呢,是这一个区域啊,就要推荐歌曲这一个区域,那在这个里面呢,它分为头部啊跟内容区域啊,所以呢,我们先去搭一下它的结构啊,来来到我们的web storm里面,那接下来呢,我们把这个图标导航的区域收起来啊,我们去做这个推荐歌曲的区域。嗯,好,那在这里呢,呃,推荐歌曲呢,我就叫它recommend吧,哎,Recommend container好的,呃,它的下面呢,应该是有一个头部对吧?呃,还应该有一个内容区啊,那这呢,我们再来一个啊呃,内容区的话呢,或者我们先不写吧,我们先去搭这个头部,呃,头部里面呢,我们看一下有什么内容啊呃,首先呢,上边一个title文本啊,而下边这儿呢,是左右去布局。呃,那这样的话呢,我们在这儿啊,Test我们来一个class,这呢叫做title啊,那这个呢就叫什么推荐歌曲对吧?下面呢,因为有两块内容啊,所以呢我是左右去布局,那这个呢是叫为你啊精心推荐啊,右侧呢还有个test啊叫查看更多。
01:19
嗯,那这个查看更多的话呢,因为它的右侧啊,那我们肯定需要对应的样式呢,去处理一下,所以呢,我这儿来一个class呢叫Mo OK,那这样的话呢,来我们去写一下这个样式啊。往下走,那这个呢是呃推荐啊歌曲它的样式,那么它下边的handle啊,下边的title呢,我们去接去设置一下啊,比如说它的size我们来个32嘛。然后呢,我们去加一下。对吧,同时呢,行高呢,稍微大一点,就上下有点距离啊,我们来个80RPS,然后呢,去看一下咱的效果,哎,就是这个啊,那那个推介格就太重了啊,这呢我们就不加粗了啊,不加粗了,反而它的颜色呢,应该稍微淡一些,呃,我们来个井号啊666吧。
02:11
保存,呃,咱们再来看看效果,就这个呗。OK,没有问题,那现在呢,大家看啊,这儿的文本呢,跟左边顶死了不好看啊,你看我写好这一个,这是不是有点距离啊呃,所以针对于这个情况呢,我们会给这个啊,就外面的包。我这呢来一个PA定来20个像素的内边距,那这样的话呢,就相当于是有一点距离对吧?好,那这是这个啊,同时呢,我们这个查看更多的应该跑到右侧去啊,那这个呢也不难。来呃,那么它下边的啊谁呀啊这个Mo。对吧,呃,右侧就float right呗,然后呢,我们给它来一个边框啊erps啊so井号重一点吧,333。
03:00
保存啊,我们再来看。嗯,这不在这儿吗?那在这儿的话呢,写成跟我这个一样的效果就是圆的,呃,同时呢,里边这个字呢,小一点啊,然后有点那边距。来呃,那首先呢,我们加一个ting吧,比如说上下啊为10RPX呢,左右啊为20对吧,然后呢,Photo散呢,呃小一点,比如说26。对吧,来一个border radio啊,比如说我们来30个像素的那面距。嗯,看一下啊,30个像素的圆角啊,看一下就是这样,那对应的字呢,你也可以再小一点,这都没关系啊,比如说来24倍。好的,那就大概就这样了啊,那这样呢,没有什么交互啊,所以呢,我们也不在这儿呢,浪费太多的时间,那接下来呢,我们往下去看啊看这。哎,这个区域那么对应的呢,大家看这是个滑块区域,那最终呢,你会发现里边的结构呢,一模一样啊,其实我们写一个就够了,那最终呢,应该是循环比例出来的。
04:08
那。呃,除了要有横向的布局呢,它还有滑动的这个交互功能啊,那在这里呢,我们需要用到小程序的一个组件啊,I整完了我就给大家把它关了。组件里面呢,有一个score view哎,可滚动的视图区域就是它呗,呃,然后呢,大家用这个的时候要注意啊,使用竖向滚动的时候呢,需要给scar view一个固定的高度啊,通过微信SS去设置。然后呢,它支持的单位P叉跟RP叉呢都支持。那这个呢,纵向滚动呢,我们最后呢,也会用到啊,现在呢,我们先来横向滚动来,呃,来到我们的结构里面,那也是我们要去写这个内容去。啊,那这呢加一个啊这呢对应的是内容去。嗯,他呃里面我们来一个叫scar。
05:04
哎,滑画的个体,那么每一个滑画个体呢,它应该是一张图片src啊,因为没有动态图的时候呢,我还是先用这个静态的图啊去代替一下。好,是他呗。下面呢,有一个文本啊,那这个呢,可能有的同学认识啊,这张图呢,是谁呢?是贾静雯对吧,所以呢,我这写的啊,我喜欢比如说贾静纹,然后呢,甲静纹啊也喜欢我啊,就是没羞没臊是吧?好,那就是这个,因为我们要看到动态的效果啊,我们现在呢,先去多给他复制几份。结构呢,有点乱啊,不过没有关系,等到我们拿到动态的数据以后呢,我们会把这些删掉,OK,那现在呢,咱们先来看效果。过来。好的,大家看啊,这个结构呢,已经出来了,出来了以后呢,我们去调一下里边的这个样式,首先你看啊,这个图片的宽高呢,是100乘以100没有问题,然后呢,你去看下边的文本,其实它的宽呢也是100,也就是说这个score item。
06:14
对吧,它的总宽呢,就是100啊,那对应的我们应该是把200RP差呀。哎,那这个时候呢,来到我们的这个里边啊,呃,我们去写一下它内容区的样式。哎,这个呢,是推荐内容去。对吧,那这呢应该是那个score item,我们先去给他设一个宽度,应该是220PX。高度呢,先不设啊,它应该呢是由内容撑开的,那么接下来呢,它下边的那个。图片我们设一下啊,它呢应该是多少呢?200RP圈啊高的话呢,也应该是200,同时呢,我们来一个圆角,比如说来十个像素的圆角。
07:00
嗯,那这是这个我们再来看。嗯,这个时候大家看啊,差不多了,差不多了以后呢,现在我们先不管别的,先让它横向去排练。啊,一说到横向排列呢,我们立马又想到啊,我们让这个sc item呢,成为伸缩的个体就OK了,所以啊,这个时候呢,我们应该找到它的包裹器,就scar view啊,这里呢,我们给他一个class类。呃,这个呢,因为是推荐的内容去啊,我们这儿呢,就叫它。啊,什么呀。OK,是它,那那这样的话呢,呃,在它的上面呢。嗯。哎,Lex一下。好,按照常理来说,我们一写display flag,那么它里边的子元素是不是成为伸缩的个体,然后默认呢,是横向排列呀,那这个时候来到我们的这个微信开发工具里面打卡。他并没有上去。对吧,那这是为什么呢?好,那现在呢,是flex失效呢,是因为我们用了个scar view,所以呢,我们应该是来到哎官网上呢,往下去看一看,他身上呢,有很多的属性啊,其实这其中呢,有一个属性呢,叫这叫enable。
08:18
Flex。好,那么这个属性呢,对应的是个布尔值啊,默认为FOX看着启用flexbox布局,那么开启后裔啊,当前的节点声明的display flex呢就会成为这个。也就是说你想要在他的身上呢,用flex布局,那我们需要去设一下这个属性为处来。找到我们对应的这个score view,给他身上添加一下这个属性啊,刚才我也说了啊,这后边的不用写处啊,你只要声明了它对应的值就是处。好的,那这个时候呢,我们再来看。诶,大家看已经横向排列了,横向排列现在有一点不好看啊,就是说它里面挨的太近了,每一个个体,那现在呢,我们找到这个sc item,我们可以去给他设一个什么。
09:10
哎,RIGHT22PX就是往右去推一下啊,有一点外边距是不是好看一点啊,没有问题,那可是现在并不能滑动,并不能滑动。那要不要滑动呢?还是由谁来说了算呢?还是score view,所以啊,我们再看在他的身上呢,大家看看上来就有这两个属性啊,一个叫score X,一个叫score y。哎,允许横向以及共呃纵向股东。那这个时候呢,我们横向的话,那毫无疑问是不是应该是score X呀,给他呢,再添加一个属性啊,我们再来看。来到我们的模拟器里,打开了。很方便,对不对,OK,那这是这个啊,那再调,呃,现在呢,下面的字呢,有点大啊有点大,我们去给它设一下呗。
10:05
呃,Item我就设它啊,因为我们设它下面的文本啊,这。我就说这个它下面的text,呃,Fo呢,我们来个26RPX再看一眼。是不是小了?小了以后啊,没问题,那小是小了啊,这个时候大家看我写好这个。嗯,看我想好这个。那么在它的下边呢,你看啊这儿。这有个三个点,那这是啥意思呢?首先啊,我们下边的文本呢,有可能不止两行啊,有可能不止两行,那么超出两行的话呢,我需要你用这个什么呀,点点点代替。哎,之前呢,我们学过什么呀,叫单行文本溢出隐藏,然后省略号代替,怎么做来着,想一想。啊,我们现在呢,先去做一个什么单行啊,文本溢出隐藏呗。
11:04
对吧,然后呢,我们说省略号代替。呃,省略号代替OK,那这个是怎么做呢。嗯,首先我们是把不让它换行right with no。对吧,那超出的部分呢,我们是不是要隐藏掉,那就overflow hidden。然后。还有啥?哎,那超数的部分你直接隐藏掉,这是断崖式的签字啊,我们是不是要用省略号代替啊?那叫text overflow,叫什么eis呗。哎,这就是单行文本溢出的啊,三件套就是他们三个,那这个时候你看一下啊,我写完了大家看。有没有效果?并没有我们想要的效果,为啥呢?你看这超出的内容,其实再往后并没有隐藏掉啊,因为你后边这很明显,文字呢已经叠加了。那这是为什么?那没有隐藏掉呢?说明谁啊?说明你的overflow hidden失效了。
12:04
它为什么会失效呢?那这个时候我们要琢磨一下啊,Overflow happen,它本应该作用在我们的块元素身上。而现在的text,它是什么叫内敛元素吗?内联元素你用overflow hand肯定会不生效,为什么?很简单嘛,内联元素它是不靠我们的子元素撑开的呀。他没有能力去切割这个元素,对吧,所以啊,我们要在这儿做的话呢,我们还应该再做一个display,哎,那这呢应该是什么呀?Block。是这个呗,那这样的话大家再看啊,这不就单行文本一出我们就做完了。对的吧,OK,那这是我们常用的啊,那接下来呢,我们还要说一下啊,这个多行文本溢出怎么做。哎,那这儿呢,来一个啊多行呃,文本溢出啊,后边呢是一样的啊,多行文本溢出。
13:01
隐藏,然后省略号代替。呃,首先我们能想到的多少,文本一出,你想想看啊,这个还要吗?那肯定不要了,因为它是不换行嘛,我们不管说是两行还是两行以上都得让文本换行,对不对,那这个要不要。啊,这个肯定要啊,Overflow hidden,你超出的部分隐藏,隐藏的内容呢,用省略号代替,所以他俩肯定要用。对了吧,那他俩肯定要用,那除了他俩呢,还应该有什么,你要注意,当你用多行文本溢出的时候,这个时候呢,我们应该是display,我们要用这个web kit box。因为要做多行文本溢出的话,现在是基于web k内核呢,有一些属性啊,就是我们常规的属性是搞定了。哎,那这里呢,就给大家演示一下这个啊好,那现在呢,是要变成web kit的和模型,对吧,那这是这个还有呢,就是我们要基于这个web。
14:03
和模型呢,去设置一下它的对齐模式,那这个呢,相当于是什么是纵向对齐。哎,设置这个对齐模式,那这呢也是固定的写法,那还有一个啊,就是这个we。嗯,那这呢我写一下吧啊kit,然后呢是line啊,然后呢clamp。嗯,对应的是两两行,那前面呢,你千万别忘了啊,我们前面还有个什么排个杠。那这个呢,是用于去设置啊,我们盒子。的行数。啊行数那对应的呢,是几行啊是两行,OK,那写完了以后呢,哎,那这呢,我们应该恢复一下多行啊多行。那要看多行文本一出的话呢,那我们先来看吧,大家看现在其实看不到,因为现在啊,我的文本正好是两行。为了看到这个效果呢,我呢来到第一个text,我给大家都复制一份。
15:01
这样的话,文本是不是肯定超出两行了呀,好的,那我们再看,诶,你会发现这是不是有一个省略号呀。哎,以上呢,就是这个多行。文本溢出的效果啊,那这呢其实也是固定的打法,那这儿呢,我给他加一个注释啊,它呢是用于设置我们多行的什么呀行数。哎,是做这个事情的。OK,那这是这个。那还有什么,我们看一下,其实我们现在这个头部啊,跟下边的内容区你看一下挨的太近了,那这样的话呢,我们可以去给我们对应的这个头部。来,我去加一个东西吧,呃,加一个什么PA bottom,比如说来20个像素的下那边去。嗯,有点距离,是不是好看一点,好,那这是这个啊,那这样的话呢,呃,我们已经将啊这个推荐歌曲的静态部分呢搭建好了,那本节课呢,我们主要是学习一个常用的组件啊,就是score。
16:06
要注意些小细节,当你用flex布局的时候,一定要记住啊,给对应的scar view呢去添加一个enable flex。并且呢,也给大家讲了一个多行文本溢出的效果。好的,那么本节课呢,我们先讲到这里。
我来说两句