uniapp-模板弹窗

一时失言乱红尘 2022-02-05 04:23 408阅读 0赞

# uniapp-模板弹窗 #

2019年02月14日 10:47:09 [wy在路上][wy] 阅读数：382

思路：

1.创建静态弹窗按钮键  
2.创建显示窗口【图片】

在

<template>
    	<view>
    		
    		
    		
    		<view style="padding: 200upx 15%;">
    			<button type="primary" @tap="showBanner">打开弹窗</button>
    		</view>
    		
    		
    		<view  class="uni-banner" style="background:#FFFFFF;" v-if="bannerShow">
    			
    			<view style=" text-align:right;padding:20upx;border: 1upx solid;" @tap="closeBanner">
    				<text>x</text>
    			</view>
    			
    			<view>
    				<image src="https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/shuijiao.jpg" mode="widthFix" style="width:100%;"></image>
    			</view>
    			
    			<view style="margin:50upx 0; margin-bottom:68upx;" >
    			    <button type='warn' style="background:#F6644D; margin:0 80upx;">一个按钮</button>
    			</view>
    		</view>
    		
    		
    		<view class="uni-mask" v-if="bannerShow"></view>
    		
    	</view>
    </template>
    
    <script>
    	export default {
    		data() {
    			return {
    				bannerShow:true
    			};
    		},
    		// 监听页面返回
    		onBackPress() {
    			if(this.bannerShow){
    				this.bannerShow = false;
    				return true;
    			}
    		},
    		methods: {
    			closeBanner:function(){
    				this.bannerShow=false;
    			},
    			showBanner:function(){
    				this.bannerShow=true;
    			},
    		}
    
    	}
    </script>
    
    
    <style>
    	/* 弹出层形式的广告 */
    	.uni-banner {
    		width: 70%;
    		position: fixed;
    		left: 15%;
    		margin-top: -400upx;
    		z-index: 99;
    	}
    	.uni-mask{
    		 z-index: 1;
    		background: rgba(0, 0, 0, 0.6);
    	}
    </style>

[wy]: https://me.csdn.net/qq_43239475