uni-app项目实战笔记15--使用uni-popup实现弹出层和uni-rate实现评分效果

关于uni-popup组件可访问uniapp官网查看更多：uni-popup 弹出层 | uni-app官网。

重要属性配置：

属性名	类型	默认值	说明
animation	Boolean	true	是否开启动画
type	String	'center'	弹出方式
mask-click [即将废弃]	Boolean	true	蒙版点击是否关闭弹窗
is-mask-click [1.7.4新增]	Boolean	true	蒙版点击是否关闭弹窗
mask-background-color [1.7.4新增]	rgba	rgba(0,0,0,0.4)	蒙版颜色，建议使用 rgba 颜色值
background-color	String	'none'	主窗口背景色
borderRadius	String	无	设置圆角(左上、右上、右下和左下) 示例:"10px 10px 10px 10px"
safe-area	Boolean	true	是否适配底部安全区

下面是uni-popup的使用示例：

<uni-popup ref="infoPopup" type="bottom"><view class="infoPopup"><view class="popHeader"><view class="title">壁纸信息</view><view class="close" @click="closeInfoPopup"><uni-icons type="closeempty" size="18" color="#999"></uni-icons></view></view><scroll-view scroll-y><view class="content"><view class="row" ><view class="label">壁纸ID：</view><text selectable class="value" >13897856890321</text></view><view class="row" ><view class="label">分类：</view><text class="value classify" >明星美女</text></view><view class="row" ><view class="label">发布者：</view> <text class="value" >咸虾米</text></view><view class="row" ><view class="label">评分：</view><view class="value rateBox"><uni-rate readonly touchable value="3.5" size="16" /><text class="score" >5分</text></view></view><view class="row" ><view class="label">摘要：</view><text class="value" >内容提要内容提要内容提要</text></view><view class="row" ><view class="label">标签：</view><view class="value tabs"><view class="tab" v-for="item in 3">标签名</view></view></view><view class="copyright">声明：本图片来自用户投稿，非商业使用，用于免费学习交流，如侵犯您的权益，您可以拷贝壁纸ID举报至平台，邮箱：1056378750@qq.com，管理员将删除侵权壁纸，维护您的权益。</view></view></scroll-view></view></uni-popup><uni-popup ref="scorePopup" :is-mask-click="false"><view class="scorePopup"><view class="popHeader"><view class="title">壁纸评分</view><view class="close" @click="closeScorePopup"><uni-icons type="closeempty" size="18" color="#999"></uni-icons></view></view><view class="content"><uni-rate v-model="userScore" allowHalf /><text class="text" >{{userScore}}分</text></view><view class="footer"><button @click="submitScore" :disabled="!userScore" type="default" size="mini" plain>确认评分</button></view></view></uni-popup>

 使用ref为弹出层指定一个名称，

JS代码：

<script setup>const maskState = ref(true)const infoPopup = ref(null)const scorePopup = ref(null)const userScore = ref(0)function maskChange(){maskState.value = !maskState.value}function getInfo(){infoPopup.value.open()}function closeInfoPopup(){infoPopup.value.close()}//点击打开弹窗function clickScore(){scorePopup.value.open()}//关闭弹窗function closeScorePopup(){scorePopup.value.close()//关闭弹窗后将评分置为初始值userScore.value = 0}function submitScore(e){console.log("用户提交了评分")}
</script>

CSS代码：

<style lang="scss" scoped>.preview{width: 100%;height: 100vh;position: relative;swiper{width: 100%;height: 100%;image{width: 100%;height: 100%;}}.mask{&>view{position: absolute;left: 0;margin: auto;right: 0;color: #fff;width: fit-content;}.goBack{}.count{top:10vh;background: rgba(0,0,0,0.3);font-size: 28rpx;border-radius: 40rpx;padding: 8rpx 28rpx;backdrop-filter: blur(10rpx);}.time{font-size: 140rpx;top:calc(10vh + 80rpx);font-weight: 100;line-height: 1em;text-shadow: 0 4rpx rgba(0,0,0,0.3);}.date{font-size: 34rpx;top:calc(10vh + 230rpx);text-shadow: 0 2rpx rgba(0,0,0,0.3);}.footer{background: rgba(255,255,255,0.8);bottom:10vh;width: 65vw;height: 120rpx;border-radius: 120rpx;color:#000;display: flex;justify-content: space-around;align-items: center;box-shadow: 0 2rpx 0 rgba(0, 0, 0, 0.1);backdrop-filter: blur(20rpx);.box{display: flex;flex-direction: column;align-items: center;justify-content: center;padding: 2rpx 12rpx;.text{font-size: 20rpx;color: $text-font-color-2;}}}}.popHeader{display: flex;justify-content: space-between;align-items: center;.title{color: $text-font-color-2;font-size: 26rpx;}.close{padding: 6rpx;}}.infoPopup{background: #fff;padding:30rpx;border-radius: 30rpx 30rpx 0 0;overflow: hidden;scroll-view{max-height: 60vh;.content{.row{display: flex;padding: 16rpx 0;font-size: 32rpx;line-height: 1.7em;.label{color:$text-font-color-3; width: 140rpx;text-align: right;font-size: 30rpx;}.value{flex:1;width: 0;}.rateBox{display: flex;align-items: center;.score{font-size: 26rpx;color:$text-font-color-2;padding-left: 10rpx;}}.tabs{display: flex;flex-wrap: wrap;.tab{border:1px solid $brand-theme-color;color: $brand-theme-color;font-size: 22rpx;padding: 10rpx 30rpx;border-radius: 40rpx;line-height: 1em;margin: 0 10rpx 10rpx 0;}}.classify{color: $brand-theme-color;}}.copyright{font-size: 28rpx;padding: 20rpx;background: #F6F6F6;color: #666;border-radius: 10rpx;margin: 20rpx 0;line-height: 1.6em;}}}}.scorePopup{background: #fff;padding: 30rpx;width: 70vw;border-radius: 30rpx;.content{padding: 30rpx 0;display: flex;align-items: center;justify-content: center;.text{color:#FFCA3E;padding-left: 10rpx;width: 80rpx;line-height: 1em;text-align: right;}}.footer{padding: 10rpx 0;display: flex;align-items: center;justify-content: center;}}}     
</style>

重要知识点：

1.控制弹出方向：<uni-popup ref="infoPopup" type="bottom"> type指定弹出的类型,bottom从底部弹出，不带type即为中间层弹出；

2.评分组件：<uni-rate v-model="userScore" allowHalf />

allowHalf允许小数点半分，比如半颗星。

效果：