00:01
好的,那上一节课呢,我们是把这个啊,咱们的音乐列表页,包括音乐的详情页呢,我们做完了啊,并且呢,我们跟主页上的每日推荐呢,是不是已经关联上了啊,那这节课呢,我们来看啊搜索页面啊,那这个搜索页面呢,如何去访问呢?啊,就是在视频页啊,这边有个搜索框吗?我们点击进来啊,看到的就是搜索页面。嗯,就是搜索页面,那么搜索页面呢,最后啊,我们是可以通过用户输入的内容,嗯,你们输个A,哎,那下边这呢,就有对应的和A相关的一些这个,呃,列表数据。那同时呢,这会显示搜索内容A啊,那至于说里边再点击跳转这个功能呢,我没有做啊没有做。那在这我们也可以点击叉号呢,把搜索框的内容清掉,那这个时候呢,这就有搜索的历史记录啊,你比如说我可以干嘛,我可以再搜一个,比如说这个。随便一个吧,SS。好的,那这个时候呢,你看跟SS相关的也没有问题啊,然后呢,我把这个再叉掉,这就多了一个记录,同时呢,我们点击这个,哎,删除历史记录的按钮,走,哎,确认清空历史记录了吗?我一点击确定,大家看就没有了,哎,这个页面呢,就是我们接下来要做的页面啊,而下面展示的这些数据啊,包括刚才搜索的数据呢,都是通过网易云的真实接口去实现的。
01:27
然后呢,我们点击这个取消呢,是可以回退到我们的搜索页面。好的啊,那在介绍完这个页面的功能以后呢,啊,那接下来呢,我们先去搭一下这个页面的静态结构来来到我们的项目里边啊呃,那这个时候呢,我们可以去我们的pages下边呢,我新建一个啊文件夹呢啊就叫他一个。然后啊,在这个里面。啦。找到我们的search文件夹,新建一个配件,那这呢也叫search,那为了方便调试的话呢,我们去把search路径调到上面去,对吧,让它先加载这个search好的,那现在呢啊,来到了我们的search界面啊,那首先啊,我们可以把这个标题呢去给它改一改过来啊,我们把这个标题呢复制一份啊,然后啊来到我们search页面的啊接S配置文件对象里面,在这里面呢,我们可以把这个改一改,比如说这儿呢,是啊发现音乐。
02:29
来发现音乐啊,或者呢,这刚才我们就叫就叫搜索音乐吧,啊没有问题,那这样的话呢,标题改完了以后呢,我们去写我们的结构以及顶的样式啊好的,那首先呢,在这里呢,我们先来一个包裹器啊,40的container。嗯。啊,没问题,那么在它的下面呢,我们先去写这个啊头部,嗯,搜索区,来我们来一个啊header,嗯,Header结构有了以后,我们看一下我们的头部有啥呀啊这呢是一个搜索区域,这呢是一个取消的区域,其实水平是两部分,那么在这个搜索区域里面呢,又有一个小图标啊,对应的还有一个input输入框。
03:13
好的,那么大的结构两部分啊,而且呢是水平布局啊,这样的话呢,我在这个里面呢,我再来一个viewvo啊,叫什么search input啊search input,那么在它的里面呢,有一个input啊,同时呢,我们来一个hold啊,叫我们先写一个静态的啊,叫搜索这个歌曲吧,搜索歌曲。没有问题啊,那这是这个,那么在它的右侧呢,有一个什么哎,Button,我们就来一个text啊,那这个呢是取消呗,同时呢,我们给它一个class类啊,就叫一个cancel啊cancel好的,那左右的布局有了以后呢,我们先看一下效果啊。嗯,那这个时候来大家看一下这啊,我把这个报错呢,给你放大一下,在这里人家说了xxx,呃。
04:04
Expect应该是input,期望一个什么?结束的标切换一个什么结束的标识或在哪,在input里面,那为什么会有这个报错呢?啊,我们回头看一眼。我们这写了个input啊,注意这个input怎么出来呢,我是写了个input按tab键自动生成的,那其实这样在H5的项目呢,它没有任何的问题。没有任何的问题啊,你注意我按tap键生成的input呢,它是没有这个字节数的标签的,而现在啊,在小程序里面,这是一个组件呀,任何的组件都必须要有结束的标签啊,所以呢,我们在这里呢,应该给大家加一个结束的标签,我们再来看一眼。好的,那没有问题。那这样的话呢,啊,两部分内容出来了啊,我们去写一下对应的样式呗,嗯,过来那首先呢,打开我们的样式文件。
05:04
对吧,然后呢,将它呢移动到右侧啊,我们对比着写。来,那这个时候啊,我们先用这个header,首先它要水平布局,那上来呢,我们应该是display啊flex。对的吧,啊,Les一下而。呃,下边这两部分内容大家看我写好这个啊,我是这样去做的。右侧的内容是固定宽度,而左侧呢,你页面宽,我这会自动的跟着大一些。页面小呢,我这儿会自动的跟着小一些呗。那这个呢,有点像什么,右侧固定,左侧只适应。啊,那这样的话呢,我们可以怎么做呢?啊,Flex里面啊,我们之前是不是用过这个FX为一啊,就是允许它可拉伸可压缩对吧?所以呢,在这里呢,我们也可以这样去做啊,我们可以先给右侧的P,嗯,来一个固定的高呃,宽度啊,比如说来个100RPX。
06:04
而左侧这个搜索框,哎,我们的search是input呢,首先我可以给它来一个flex为一啊,那这样的话呢,剩下的宽度是不是它就全部归他所有,并且呢,会导致我们这个头部宽度是不是为100%呀?啊同时呢,我给头部一个高度吧,我们来一个60RPX,然后呢,来一个啊Li hat为60 OK,没有问题。好,那这为f flag唯一以后呢,为了让大家看的清楚一点呢,啊,我呢给它加一个啊背景颜色吧,我们来一个background,然后呢来一个rgba啊来一个rgba。好的,那么对应的里边呢,啊,应该对应的都是什么237啊237还有个237透明度的话呢,我们来一个点三啊点三好的,那这个时候呢,我们再来看一下效果。嗯,大家看啊。搜索的区域这么大对吧,自动的拉长了,嗯,然后取消呢,在右侧没有问题啊,那再写一写啊,那这个这两侧的东西呢,都挨着上边,还有左右两侧的边框不太好看,那这个时候呢,我选择啊给我们的头部区域呢,去加一个pading啊,我们来个pad,哎,同时哎,搜索框这一块,哎,搜索区域这块呢,我们给它来个圆角吧,Border radiOS啊,我们来30个像素的圆角。
07:31
啊,没有问题,那我们再看一下效果啊,差不多了,来这个时候大家看。是不是在这儿呢?啊,那这个时候呢,它跟这个取消这啊,你看啊取消是不是紧挨着左边呀,那这是为什么呢?我们可以让取消这的text来一个center啊居中。你看是不是就往这边挪了一点,好看一点,没有问题,然后呢,我们去写一下左侧里边的样式,这个时候大家看。
08:00
在它的里面呢,有一个字体图标啊,这儿呢是一个input输入框,那所以啊,除了input呢,我们还应该啊再来一个text啊,那这里呢,我们需要用到一个什么icon啊fo啊,对应的字体呢,叫什么呀?啊就叫icon啊,一个search,嗯,我这里用的是SEARCH1这个。那么对应的这个icon foot呢?啊,可能时间久了小伙伴忘了啊,我们下目之前的页面用到过啊,在哪呢?在我static下面的icon foot,我这儿是不是有个字体图标库呀?哎,没有问题啊,好的,那么现在。I扣也有了,嗯,我们再看一下效果。这不进来了,进来了以后注意啊,它会把这个input呢挤到下边去,而这个I呢,我们要控制一下啊呃,它的位置,并且呢,不能把input挤到下边,所以呢,这个时候呢,我去我要去设一下它的样式,注意啊,要设它的样式的话呢,你最好在这儿就不要用ione去设了,为什么呢?因为下边刚才我们看到啊,下边这是不是有删除的icon呀。
09:10
哎,有两个啊,所以呢我呢再给它起一个class类名,这里面呢,我们就叫它一个search Apple版,哎,通过它来设置啊过来哎search icon,那么这个search icon的话呢,首先啊,我们需要给它开一个我们来个absolute,让它呢去相对于我们的这个搜索的包裹器啊去定位一下,那这儿呢,来一个p relative呗。啊,定位了以后啊,那这样的话呢,我们也诶给它来一个左偏移量吧,啊比如说来个15R PX啊,不要挨着左边太近。嗯,大家看搜索框是不是在这了,来搜索的图标在这儿了,而且呢,Input框上去了,上去以后注意啊,因为你的搜索图标。
10:01
开启了定位,是不是脱离了文档流啊,所以下边内容自动上去了。啊,可是这样,这肯定不行啊,我们得把搜索框往右侧去挪,哎,往右侧去挪,所以啊,我们去找到这个search input下边的input搜索框,我们给它呢设一个left啊,预留50个像素的左外边距呗。啊,同时我们让它的高度跟我们。呃,这个头部的高度一致吧,我们这儿呢,也来一个60啊,也来一个60,来我们看一眼。嗯,大家看就过来了啊,没有问题,你看我再输入的内容是不是就在这儿了,好的,那这是这个啊,那么接下来我再说一下啊。里面这是please hold的文字啊。我们之前。在H5的项目里面,要设置holder的样式其实是比较费劲的。啊,只有mapb k内核呢,提供了一些高级的样式可以使用啊,啊也有很多浏览器不支持,而现在呢,小程序里面它支持啊,那怎么去做呢,它呢是提供了一个呃,这个please holder的一个class。
11:15
你呢,可以去给它起一个class类名,在这儿呢,我就叫please holder,那么通过这个类名呢,就可以专门去设置please holder样式来,我们可以看一下,嗯,是它,比如说呢,我们可以给它来一个什么呀,Color对吧?哎,比如说我们用一下这个颜色,我们看一下效果。大家看就可以了,来那说明我们在这呢,可以很轻松的啊,去设置一下它的啊这个样式啊,包括呢,我们可以设一下它的字体大小啊,比如说我们这来个嗯,28啊,这都没有问题啊,设一下它的字体大小啊是这样的。好了,那头部啊,搜索区域呢,我们静态搭建我们就做完了啊没有问题,那这节课呢,我们先讲到这里。
我来说两句