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