学习Uni-app开发小程序Day21

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

评分组件uni-rate

这是需要达到的效果图，这里先分析下效果图，

1、图片是从布局中间弹出的，那这里就要用到uni-popup ，设置type从中间弹出

2、这个弹出的顶部和上一张的顶部布局是一样的，都是标题和关闭按钮，那就把上一张的布局拿过来

3、有用到评分，那就在直接使用评分组件，这里的评分是可以选择更改的，那就查看评分的文档，进行修改

4、底部有个按钮，这里是最后实现的效果图，原始图应该是刚进入的时候，是不能点击按钮的，只有进行评分后才能点击

下面是这里的样式

html 复制代码

.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;
			}
		}

下面是页面布局

html 复制代码

<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中的属性，设置这个的意思是，点击空白或者其他地方，不能让弹出框取消掉，只有点击设定的关闭图标才能取消掉

html 复制代码

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

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

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

自定义导航栏

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

这里就是自定义导航栏，

html 复制代码

<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>

上面是自定义导航栏的代码，但在实际使用过程中，还是发现有些其他的问题，手机的状态栏会遮住状态栏，这里还没有学到，就只记录到这里！

明天的记录中会有计算状态栏的高度等。