关于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允许小数点半分，比如半颗星。
效果：
