uniapp-模板弹窗
2019-02-14 10:47
615 查看
思路:
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"> <!-- x --> <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>
相关文章推荐
- uniapp-模板笔记[复习表单验证]
- nodejs express框架 app.js文件该html模板
- 非常牛逼的橙色的app租房网站商城手机站模板html整站
- APP开发之一splash模板代码
- uni-app跨平台终极解决方案
- uni-app - vue以及微信小程序
- uniapp-接口学习【界面-未(下班前进行重点内容的修改概括)】
- H5下载打开APP页面通用模板
- app接口文档模板
- 创建3层的服务模板 (2)--- App-V package 和 Application Profile
- ThinAPP笔记之四:创建ThinApp模板
- Android社交类APP动态详情代码实现通用模板
- Dcloud,hbuilderX开发uni-app第一天踩坑记录
- 源码推荐(0623):最简洁的购物车通用模板,咸鱼APP-视频动画版新特性
- Hbuilder云打包iOS App定位弹窗描述问题
- 关于uniapp的webview组件进度条(loading)样式的定义
- 四种常见的App弹窗设计,你有仔细注意观察吗?
- ASP.NET Core Web App应用第三方Bootstrap模板的方法教程
- ICViewPager MJRefresh NewsFourApp 左侧抽屉菜单 新闻类APP模板详解(iOS版)
- 使用instruments的alloc模板分析app的内存分配