030-直播间模块-bottom组件原创

好了，列位进口奇观咱们书接上一回，上一回啊，咱们已经把我们直播间这个拈呀，哎这种表面上的工作的话呢，做了一点哈，我们也说了哈，咱们先把表面工作给做好，你像这个我们头部这块其实还有很多功能啊没有做，我点击这一个养组啊，点击他的头像或者文字啊，都能弹出来养祖的一个个人的一个介绍，对吧？哎，在这的话，大家也看到我们之前那个布局了，一点进来之后，从底部弹出来一个哎半屏在这里会写示他的一个头像，还有一些个人信息，对吧？多少人给他点过赞呀，啊有个关注呀，这块这个关注是一样的功能啊，咱们也没有做哈，还有点击这个什么两人在看这一块啊，一点起来之后也会弹起来，对吧？有几个人在那看呢，诶对应的还有送礼的这个榜单对吧，谁是榜一大哥，谁是榜二大哥，哎都能看得见啊，然后这一块的话能领取这个U。

鬼券啊，所以这些东西啊，咱们都能够去做啊，但是科们在这儿呀，先不着急，因为你想我我有几个点赞的，有几个送礼的，那不得靠我们底部这块，先把咱们底部这块能做出来点赞和送礼功能再说呗，再去统计它就可以了啊，所以咱们在这儿也给他排一个优先级啊，然后在这个聊天区的话呢，咱们已经成功的哎，实现了，我们只要有消息就会push到这个里面来啊，然后在这用了一个sc view啊，功能上的话呢，做了很多的优化啊，大家把这一块都给掌握好了，好了，那咱们闲言少叙，咱们接下来把所有的目光聚焦在我的底部啊，我们这个直播间的包这一个组件，那位可以看一下我文档中呢，这里客人给你截了一个图啊，在这里我们一会儿啊，先把这个布局啊给他做好了，第一个的话是点完之后会弹出来我们要带货直播的商品啊，123上链接这块也会有新的更新，对吧？啊。

这个区域的话呢，是咱们聊天的区域，我在这里输入一个什么AA，一点击回车啊，或者点击我键盘，咱们如果在手机上运行的话呢，会弹出来你的键盘啊，键盘那个回车键就能发送消息，这里的话肯定就是送礼物，点开之后的话会弹出来哎，送鲜花还是送火箭，其实这块可以配置很多的，对吧？啊，然后这个小星星这一块的话是点赞，点完赞之后的话呢，我们主播就收到了一个点赞喜欢啊，这一块的话就是返回啊，退出这个页面，因为现在咱们是全屏了啊，全屏之后咱们这个返回放在右下角，当然有人说我就放在左上角啊，那都没有问题的是吧，都可以去做的。好了，另外咱们来看一下，像这样一个布局的话呢，我们怎么去做坑在这儿的话呢，用的是弹性盒的布局啊，然后对应的我还是要给他单独的封装在一个组件里面，来，来到我的小程序的这个代码中啊，咱们在这里来看一下啊，我们在这个。

啊六五.gwxm2中，哎，在这课上写一个叫什么呀，Room杠包term这一个组件，好了，把这个组件写好，这个组件大家说可你也没创建，那么这就来了嘛，在components文件夹下，咱们新建一个文件夹，叫做room bottom特文件夹，在里面的话呢，我新建一个component组件，叫room宝特这一个组件啊，然后在我们的对应的啊答Jason文件中哈，在这样的话，咱们写一个什么room I就就数啊在它后面去写，这样的话呢，啊，我这个单词别写错就行哈，然后再斜杠什么room bottom room bottom来另外起活了一保存之后，咱们来看一下我们再对应的这个重新再编译一下，是不是因为我这块已经写好了哈，这已经写好了，再编译一下啊，重新编译一遍，咱们进来之后，咱们再次来看。

看一下啊，点击这个养组，咱们来看一下是不是已经出现了呀，诶我这里的话好像出了点问题，来重新的保存，我这样没保存上啊，撤回啊撤回重新保存，重新编译一下，嗯，咱们的这个room包什么组件啊，重新点击进来之后呀，我这个组件怎么写的有问题吗？来我来看一下，怎么这啥也没看呀，现在room包组件现在是啥里面没有干的东西呀，啊，我这样把这个咱们给它清一下，清一下这个缓存，咱们重新呢，再编译一下，因为有时候他可能会有点问题，对吧，重新编译一下。嗯，编完了之后呀，咱们再来体验一下这个效果啊。好了啊，我们点击下一页来看到这里之后，对吧，这次就没有问题了，所以有时候这莫名其妙的毛病啊，在这儿的话，客人也给大家简单的说一下，嗯，为什么有时候咱们每次保存之后啊，有时候这个数据它就不对劲了呢？是因为它在这里开了这个热重载功能了，你要每次关了之后啊，它每次一保存，它就会从咱们的你app.jc中配置的这个数组的啊第一个元素当成咱们的首页，你看你要关了，你只要稍微改点代码，它就会从这里来进行编译啊，我每次都会从这里来进行编译，这样的话就不会出现那种数据获取不到的问题了，对吧，这叫热更新啊，热更新就是你关了之后就会直接走热更新，而热重载的话就是不用将整个进行更新，它只需要重载当前页面就可以了，而这种东西特别适合于布局再去开发的时候去用的，对吧，我们哎这块还是有点小问题啊，就是那个图片老是获取不回来啊，在这里点击这个杨左这一块啊，特别适合种布局你。

可能改一点点布局的话呢，诶，它这块只需要一个热重载啊就可以了，它不需要将你整个这一块的话呢，再去加载一遍这个数据啊，这就很方便了，对吧？但是热冲载开启之后可能会有点小问题啊，他也刚才给你提示了，嗯，再就是如果这些招都不好用的情况下的话，列微啊，就是在这儿清除一下啊客们在这呃，也经常的去清一下，因为这个编译缓存的话可能会出现一些问题，好吧，好在这咱们说完了啊，那咱们就继续来看一下我们的room bottom这个组件，首先我得把room bottom这个组件的话呢，我是不是得给它定到咱们的这个底部呀，我们在这来用我们的fix的一个定位方法来在这里哈，我对应的在WSS中，然后写好我们的点room bottom，然后position的话呢，我给它一个fix的布局包的话，就来个零吧，然后对应的话呢，Life的也是一个零吧，然后宽度的话呢，是一个100VW，就是我们整个的宽。

我高度给他一个100RPX就可以了，好一保存之后在这个地方显示的啊，所以我们现在整个room包特曼就是在这个位置来进行显示，那剩下的话呢，具体里面该放什么，咱们还得回到我们room包这个组件自身来对吧？啊，你也不要在这里去用什么插槽了啊，咱们引用这个组件，就把这个组件里面现在满满当当的就行，来从上面开始，咱们来看一下这块的布局呢，咱们一共有什么呀，来对应的，我先设置好咱们这个最外层的这个container class等于啊，我们先写好啊，包好里面这块我认为咱们应该分为这么几大块吧，呃，应该是至少分为这是12345块，我们应该设置五个这一个子的这个view，然后在view里面的话呢，放上，呃，设置好咱们的这个item，等将来的话我好用啊，在这里五份，另外你看一下，所以我的想法非常简单，就是我们在这个底部这块放五个这个it啊，对应的话呢。

这个第一个二，这个第三个第四个第五个，我认为他们的话宽度就固定的，而中间这一个的话呢，把剩余的空间的话呢，咱们给它填满就可以了，所以在这里的话，客们挺推荐呀，咱们去使用我们的弹性盒啊，这一个布局的嘛，所以我在这里就可以哎设置一下来，来到我的小程序中，对于我这个点bottom这个组件，Bottom这个组件我们设置它的什么呀，第4PLAY flex你看看啊，在这对应的话，咱们把这个高度的话呢，给它设置成跟外面的高度的话呢，是一样的啊pen，咱们加点pan把零啊，然后的话呢，我们的上下为零左右的话，咱们让它空这个10RPX，那接下来咱们再对于这个点I，咱们只需要对吧，对应的给它设置好我们的Y的词的话呢，是一个120PRPX就可以了，来两位咱们。

来看一下，咱们现在一保存就后看是不是能把它给划分了，划分出来了，来在这里对应的我们room bottom term room bottom里面的话呢，对应的里面有这个包是不是it这每一项啊，在这的话呢，我这个高度的话里面没有去设置哈，我在这里也给它加上这个高度啊，跟它的这个高度的话呢，都是一样的，或者是我这样，我把里面这个图片给它放好了，放好了之后的话，我们有弹性盒，我可以控制它在我们的呃纵轴方向上的话呢，是呃居中的就可以了，所以我在这里就可以在这个room包面先放点东西吧，放上我们这些图片给它撑好了对不对，要不然这样的话我还得再弄设置这个背景色，再去给大家去区分的话，行了，那不然整的咱们直接弄图片吧，在这里就是image s RC斜杠，Images斜杠，我们的固字，哎固字点拼G1保存之后，是不是来了这张图片呀，啊，我们这个固字拼，看我一会再这个重新的还得编一下image这一块，然后。

接下来这一个里面咱们就放一个什么input的标签就行了，好不好，这个里面的话，咱们放这个哈，我记得是image，当然这些图片的话，我们都在images文件夹下都有了哈，只不过是记住那个图片的一个名字了，gift.png啊，PNG这个是那个，呃，发送礼物的啊，然后接下来的话，这个的话呢，是咱们的什么呀。

Images点赞的是不是image，然后对应的我们的src等于斜杠image，斜杠这一个like.png啊，然后对应的image，然后在最后这一个的话呢，是我们的bank啊，我们一会呀，对于这些image的话，都设置一下他们的move的属性呗，Image下面的bank BA啊好了，这样来说的话呢，就差不多了吧啊这样的话，我们对于每一个image的话，开始设置成moved等于一个wind fix，然后我们给它也加上wide fix，给它也加上wide fix，给它也加上一个Y的fix，然后我们对于所有的图片的话呢，咱们给它设置啊，这个图片的大小的话呢，就是60RPX就行了，所以我在我的对应的CSS中，咱们应该是点什么呀？点it里面的image，它的宽度的话呢，是个60。

RPS你看一保存之后的话呢，你看是不是这种感觉来说的话呢，还是有模有样的了，另外看一眼是不是在这里，这是我们这个呃，电商的啊，这是我们的发送礼物的啊，这是我们的点赞的啊，这是我们这个返回的这一块，是咱们的正常的这一个什么呀，输入框这一块啊，所以在这里的话呢，来列位，咱们把这个it home，诶，我应该好像给这个不要加it哈，这个加上it home之后也控制它就这么宽了，OK，这样的话呢，就差不多了，好，咱们再让他进行一个什么，你看一下现在在这里的话呢，他们好像是偏上的，因为我给的这个高度的话呢，是一百二一百，然后对应的这个图片的话呢，应该是，呃，我们设置的是60啊，所以在这里它好像有点靠上啊，咱们在这方案有很多，你可以设置marin啊，Top值啊，设置painting top值啊，然后设置你的盒子的类型啊，Border box啊就能控制住了啊。我们在这的话也。

可以直接使用咱们弹性盒的这个方法，就直接设置咱们在纵轴方向上的话呢，让它设置成什么呀，Center就可以了啊，所以轻轻松松啊就搞定了，这样来说的话，你看底部这一块的话呢，啊，以咱们这种啊不太讲究的啊，不太这个追求细节的话呢，我认为就已经不错了啊，咱们在这儿的话呢，啊，把里面这块再设成text烂咱们就差不多了，好吧，另外咱们在就不再浪费更多的时间去说我们这个事儿了，好，那这样的话，最终可能把这一个的话呢，咱们就先暂时啊设置成啊这个样子的啊，就是我们这一个，咱们可以把里面这个字体的话呢，你列位可以给它改的大一点小一点的都可以点it input啊fo-size我给他一个14PX，那这样的话呢，我认为啊，咱们这个布局啊，先暂时到这里，好，咱们一会儿啊，在下一小节中吧，咱们再考虑了啊，我们首先从哪里开始呢？从这个底部。

我的输入框开始，咱们来看这个输入框里面的话呢，如何把这个消息啊真正的给它发出去，你看我现在一回车啪这条消息就应该在这个位置上来显示，而且这个消息的话呢，里面这个显示的话呢，啊，还有很多细节需要咱们去讲究的啊，咱们在下一小节一起来看一下这个问题，好，这就是咱们room包term这个组件的布局部分，这一小节咱们到这儿。