uniapp弹出层 uni-popup 弹出层
文章描述：
uniapp弹出层居中效果
uni-popup 弹出层
https://uniapp.dcloud.net.cn/component/uniui/uni-popup.html#uni-popup
组件地址
https://ext.dcloud.net.cn/plugin?name=uni-popup
…
uni_modules目录下有uni-popup、uni-scss、uni-transition文件
使用
vue页面
<template>
<view>
<view class="list">
<view class="item" @click="showProp">item</view>
</view>
<Pup class="prop" ref="popup"></Pup>
</view>
</template>
<script>
import Pup from '@/components/index/prop.vue';
export default {
components:{
Pup,
},
data() {
return {
}
},
methods: {
// 显示
showProp(){
this.$refs.popup.show();
},
}
}
</script>
组件
<template>
<view>
<uni-popup ref="popup">
<view class="popup-model" >
<view class="propcom">
<view class="tophead">
弹出框
<view class="close" @click="close"><image src="../../static/images/close_icon.png" mode="widthFix" class="close-img"></image></view>
</view>
<view class="content">
</view>
<view class="btmbox" @click="close">
确定
</view>
</view>
</view>
</uni-popup>
</view>
</template>
<script>
export default{
methods:{
show(){
this.$refs.popup.open('center')
},
close(){
this.$refs.popup.close()
}
}
}
</script>
<style lang="scss">
.popup-model{
position: relative;
top: -30px;
width: 600upx;
height: 474upx;
background: #fff;
border-radius: 20upx;
z-index: 10;
}
.propcom{
position: relative;
height: 100%;
.tophead{
position: relative;
font-size: 34rpx;
text-align: center;
padding: 50rpx 0 38rpx 0;
.close{
position: absolute;
top: 26rpx;
right:32rpx;
.close-img{
width: 36rpx;
height: 36rpx;
}
}
}
.content{
padding: 0 44rpx 30rpx 44rpx;
font-size: 32rpx;
color: #666;
}
.btmbox{
width: 100%;
height: 80rpx;
background: #ed6942;
position: absolute;
bottom: 0;
left: 0;
border-radius: 0 0 20rpx 20rpx;
text-align: center;
font-size: 30rpx;
color: #fff;
line-height: 80rpx;
}
}
</style>
发布时间：2024/02/01
发表评论