uniapp自带的提示框不符合我们的要求,需要自己写一个提示框,且全局通用。
解决思路: 使用 plus.nativeObj 来绘制窗口以及事件监听。 官方文档
1. 首先创建一个整个屏幕的控件,作为一个父容器。 此时还看不到任何东西
let screenHeight = uni.getSystemInfoSync().screenHeight;
let style = {
width:'100%',
height: (screenHeight + 'px'),
left:'0px',
top:'0px'
};
// 创建原生控件对象
// 参数1: id
// 参数2: 控件的样式
let view = new plus.nativeObj.View('showModalView',style);
2. 绘制遮罩层
view.draw([
{tag:'rect',id:'modal',color:`rgba(0,0,0,0.4)`,position:{top:'0px',left:'0px',width:'100%',height:'100%'}}
]);
{
tag:'rect', // 绘制矩形
id:'modal', // 控件id
color:`rgba(0,0,0,0.4)`, // 背景色
position:{top:'0px',left:'0px',width:'100%',height:'100%'} // 位置和大小样式
}
view.draw(tags); 在控件上绘制,传入绘制对象。
绘制对象文档 可绘制图片、矩形区域、文本等内容。
3.绘制通知框样式
view.draw([
{tag:'rect',id:'modal',color:`rgba(0,0,0,0.4)`,position:{top:'0px',left:'0px',width:'100%',height:'100%'}},
{tag:'rect',id:'content',rectStyles:{borderWidth:'2px',radius:'8px',color:`rgba(36,34,56,1)`},position:{top:startTop+'px',left:startLeft+'px',width:width+'px',height:height+'px'}},
]);
{
tag:'rect',
id:'content',
// 矩形的样式
rectStyles:{borderWidth:'2px',radius:'8px',color:`rgba(36,34,56,1)`},
// 位置和大小. 下面的变量是根据屏幕宽高手动计算的
position:{top:startTop+'px',left:startLeft+'px',width:width+'px',height:height+'px'}
}
interface RectStyles {
attribute String color;
attribute String radius;
attribute String borderColor;
attribute String borderWidth;
}
4. 绘制标题和内容
view.draw([
{tag:'rect',id:'modal',color:`rgba(0,0,0,0.4)`,position:{top:'0px',left:'0px',width:'100%',height:'100%'}},
{tag:'rect',id:'content',rectStyles:{borderWidth:'2px',radius:'8px',color:`rgba(36,34,56,1)`},position:{top:startTop+'px',left:startLeft+'px',width:width+'px',height:heigh