学习了评分组件、自定义导航栏
评分组件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>
上面是自定义导航栏的代码，但在实际使用过程中，还是发现有些其他的问题，手机的状态栏会遮住状态栏，这里还没有学到，就只记录到这里！
明天的记录中会有计算状态栏的高度等。
