自己写一个uniapp全局弹窗(APP端)_javascript技巧_

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);

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([ {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; } 

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:'font',id:'title',text:modelInfo.tit,textStyles:{size:'16px',color:'#fff'},position:{top:titleTop+'px',left:startLeft+'px',width:width+'px',height:titleHeight+'px'}}, {tag:'font',id:'text',text:modelInfo.content,textStyles:{size:'14px',color:'#fff',whiteSpace:'normal',align:modelInfo.align},position:{top:contentTop+'px',left:startLeft+'px',width:width+'px',height:contentHeight+'px'}}, // 这个是内容和底部按钮的分割线 {tag:'rect',id:'line',color:'rgba(255,255,255,0.3)',position:{top:lineTop+'px',left:startLeft+'px',width:width+'px',height:'0.5px'}}, ]); { tag:'font', // 绘制文字 id:'title', text:modelInfo.tit, // 文字内容 textStyles:{size:'16px',color:'#fff'}, position:{top:titleTop+'px',left:startLeft+'px',width:width+'px',height:titleHeight+'px'} },

// 确认 let viewconfirm=new plus.nativeObj.View('confirm', { width:modelInfo.delCancel?width+'px':'40%', height:buttonHeight+'px', top:lineTop+'px', left:modelInfo.delCancel?startLeft+'px':halfWidthForGlobal +'px', backgroundColor:'rgba(255,255,255,0)', }, ); viewconfirm.draw([ {tag:'font',id:'confirm',text:modelInfo.confirmVal,textStyles:{color:modelInfo.confirmColor,size:'14px'}}, ]);

viewconfirm.addEventListener("click",(e)=>{ // 发送事件 this.$event({res:true,types:'confirm'}); // 隐藏当前控件(关闭) this.hide(); },false);

function show(){ this.view.show(); this.confirmModel.show(); }

// show_modal/index.js export class show_model{ constructor(option={}) { this.bodyModel=null; this.cancelModel=null; this.confirmModel=null; this.pageHeight=uni.getSystemInfoSync().screenHeight; this.pageWidth = uni.getSystemInfoSync().screenWidth; let opacity = option.opacity || 0.4; let model_tit=option.title||'温馨提示'; let model_content=option.content||"内容" let clickEvent=option.IsclickEvent||false; let cancelVal=option.cancelVal||'取消'; let confirmVal=option.confirmVal||'确认'; let cancelColor=option.cancelColor||'#fff'; // 取消 let confirmColor=option.confirmColor||'#fff'; // 确认 let delCancel=option.delCancel||false; let align=option.align||"center"; let fn = ()=>{}; this.$event = option.$event || fn; let backOff=option.backOff||false; //#ifdef APP-PLUS this.creatView({height:`${this.pageHeight}px`,top:0},opacity,clickEvent,{'tit':model_tit,'content':model_content,cancelVal,confirmVal,confirmColor,cancelColor,delCancel,align}) if(!backOff){ this.backbtn(); } //#endif } backbtn(){ let that=this; plus.key.addEventListener('backbutton', function (e) { that.hide(); },false) } //生成提示框view creatView(style,opa,clickEvent,modelInfo){ style = { left:'0px', width:'100%', ...style } let platform = plus.os.name.toLowerCase(); let view = new plus.nativeObj.View('showModalView',style); let width = 300; let height = 150; let titleHeight = 20; let contentHeight = 60; let startTop = (this.pageHeight - height) / 2; let startLeft = (this.pageWidth - width) / 2; let titleTop = startTop + 10; let contentTop = titleTop+30; let lineTop = startTop + height - 40; let buttonHeight = 40; let halfWidth = width / 2; let halfWidthForGlobal = startLeft + halfWidth; if(platform == "ios"){ view.draw([ {tag:'rect',id:'modal',color:`rgba(0,0,0,${opa})`,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:'font',id:'title',text:modelInfo.tit,textStyles:{size:'16px',color:'#fff'},position:{top:titleTop+'px',left:startLeft+'px',width:width+'px',height:titleHeight+'px'}}, {tag:'font',id:'text',text:modelInfo.content,textStyles:{size:'14px',color:'#fff',whiteSpace:'normal',align:modelInfo.align},position:{top:contentTop+'px',left:startLeft+'px',width:width+'px',height:contentHeight+'px'}}, {tag:'rect',id:'line',color:'rgba(255,255,255,0.3)',position:{top:lineTop+'px',left:startLeft+'px',width:width+'px',height:'0.5px'}}, {tag:'rect',id:'line2',color:'rgba(255,255,255,0.3)',position:{top:lineTop+'px',left:+halfWidthForGlobal+'px',width:modelInfo.delCancel?'0px':'0.5px',height:modelInfo.delCancel?'0px':buttonHeight+'px'}} ]); }else{ view.draw([ {tag:'rect',id:'modal',color:`rgba(0,0,0,${opa})`,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:'font',id:'title',text:modelInfo.tit,textStyles:{size:'16px',color:'#fff'},position:{top:titleTop+'px',left:startLeft+'px',width:width+'px',height:titleHeight+'px'}}, {tag:'font',id:'text',text:modelInfo.content,textStyles:{size:'14px',color:'#fff',whiteSpace:'normal',align:modelInfo.align},position:{top:contentTop+'px',left:startLeft+'px',width:width+'px',height:contentHeight+'px'}}, {tag:'rect',id:'line',color:'rgba(255,255,255,0.3)',position:{top:lineTop+'px',left:startLeft+'px',width:width+'px',height:'0.5px'}}, {tag:'rect',id:'line2',color:'rgba(255,255,255,0.3)',position:{top:lineTop+'px',left:halfWidthForGlobal+'px',width:modelInfo.delCancel?'0px':'0.5px',height:modelInfo.delCancel?'0px':buttonHeight+'px'}} ]); } var num = 0.55; if(platform == "ios"){ num = 0.57 } if(!modelInfo.delCancel){ // 取消 let viewCancel=new plus.nativeObj.View('cancel',{width:halfWidth+'px',height:buttonHeight+'px',top:lineTop+'px',left:startLeft+'px',backgroundColor:'rgba(255,255,255,0)'}); viewCancel.draw([ {tag:'font',id:'cancel',text:modelInfo.cancelVal,textStyles:{color:modelInfo.cancelColor,size:'14px'}}, ]); viewCancel.addEventListener("click",(e)=>{ this.$event({res:false,types:'cancel'}); this.hide(); },false); this.cancelModel=viewCancel; } // 确认 let viewconfirm=new plus.nativeObj.View('confirm', { width:modelInfo.delCancel?width+'px':'40%', height:buttonHeight+'px', top:lineTop+'px', left:modelInfo.delCancel?startLeft+'px':halfWidthForGlobal +'px', backgroundColor:'rgba(255,255,255,0)', }, ); viewconfirm.draw([ {tag:'font',id:'confirm',text:modelInfo.confirmVal,textStyles:{color:modelInfo.confirmColor,size:'14px'}}, ]); viewconfirm.addEventListener("click",(e)=>{ this.$event({res:true,types:'confirm'}); this.hide(); },false); //点击蒙布 if(clickEvent){ view.addEventListener("click", (e) => { this.$event({res:false,types:'cover'}); this.hide(); }, false); } this.bodyMode
                
提示：
                    本文由神整理自网络，如有侵权请联系本站删除！
                    

                    本站声明： 

                    1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持； 

                    2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！
                
                

                

                                            
上一篇：微信小程序跳转外部链接的详细实现方法_javascript技巧_
                                                                
下一篇：安装vue3开发者工具但控制台没有显示出vue选项的解决_vue.js_