学习Uni-app开发小程序Day21

学习了评分组件、自定义导航栏

评分组件uni-rate

在这里插入图片描述
这是需要达到的效果图，这里先分析下效果图，
1、图片是从布局中间弹出的，那这里就要用到uni-popup ，设置type从中间弹出
2、这个弹出的顶部和上一张的顶部布局是一样的，都是标题和关闭按钮，那就把上一张的布局拿过来
3、有用到评分，那就在直接使用评分组件，这里的评分是可以选择更改的，那就查看评分的文档，进行修改
4、底部有个按钮，这里是最后实现的效果图，原始图应该是刚进入的时候，是不能点击按钮的，只有进行评分后才能点击
下面是这里的样式

.scorePopup {background: #fff;background: #fff;padding: 30rpx;width: 70vw;border-radius: 30rpx;.content {padding: 30rpx 0;display: flex;justify-content: center;align-items: center;.text {color: #FFCA3E;padding-left: 10rpx;width: 80rpx;line-height: 1em;text-align: right;font-size: 28rpx;}}.footer {padding: 10rpx 0;display: flex;align-items: center;justify-content: center;}}

下面是页面布局

<uni-popup ref="scorePopup" type="center" :is-mask-click="false"><view class="scorePopup"><view class="popHeader"><view></view><view class="title">壁纸评分</view><view class="close" @click="clickScoreClose"><uni-icons type="closeempty" size="18" color="#999"></uni-icons></view></view><view class="content"><uni-rate v-model="userScore" allowHalf  disabled-color="#FFCA3E" /><text class="text">{{userScore}}分</text></view><view class="footer"><button @click="submitScore" :disabled="!userScore " type="default" size="mini"plain>确认评分</button></view></view></uni-popup>

这里有个地方需要注意：
:is-mask-click=“false”，这是popup中的属性，设置这个的意思是，点击空白或者其他地方，不能让弹出框取消掉，只有点击设定的关闭图标才能取消掉

<uni-rate v-model="userScore" allowHalf  disabled-color="#FFCA3E" />
<text class="text">{{userScore}}分</text>

这里多说下，当初设置这里的时候，我是在下面设置了一个变量，想着是只要选择了星星，然后监听组件返回的值进行赋值，这里调用就可以了，但最后发现，虽然是实现了，但是后台报警告，查了半天，也不知道什么原因，最后还是复盘老师视频，才做了现在这种，这里就是rate的model和定义的变量名都是统一名称，然后也不用专门监听rate的@chang，直接在需要的地方，调用变量就可以，为什么这样，不清楚，先记录下。

至于点击确定的办法，这里就不写了，前面都有案例的。

自定义导航栏

这是自定义导航栏，使用的办法，就是在需要的页面，直接引用自定义组件就可以了，这里先发个效果图
在这里插入图片描述
这里就是自定义导航栏，

<template><view class="layout"><view class="navbar"><view class="statusBar"></view><view class="titleBar"><view class="title">标题</view><view class="search"><uni-icons class="icons" type="search" color="#888" size="18"></uni-icons><text class="text">搜索</text></view></view></view><view class="fill"></view></view>
</template><script setup></script><style lang="scss" scoped>
.layout{.navbar{ position: fixed;top: 0;left: 0;width: 100%;z-index: 10;//上面这几个属性，就是设置布局在顶部不会随着滑动而改变位置background: //这就是背景渐变linear-gradient(to bottom,transparent,#fff 400rpx),linear-gradient(to right,#beecd8 20%,#F4E2D8); .statusBar{border: 1px solid red;}.titleBar{display: flex;padding: 0 30rpx;border: 1px solid green;align-items: center;.title{font-size: 22rpx;font-weight: 700;color: $text-font-color-1;}.search{width: 220rpx;height: 50rpx;border-radius: 60rpx;background: rgba(255, 255, 255,0.4);border: 1px solid #fff;margin-left: 30rpx;color: #999;font-size: 28rpx;display: flex;.text{padding-left: 10rpx;}.icons{margin-left:5rpx;}}}}
}
</style>