美文网首页
mui 应该这样打开外部链接

mui 应该这样打开外部链接

作者: 丸子小姐__不懂爱 | 来源:发表于2020-01-10 17:47 被阅读0次

看效果

21313.gif

思路

  1. 当我们点击图标跳转至外链时,实际上不是直接跳出去的,而是调用 mui的openWindow方法打开了一个新的页面, 下面简单封装下,打开externalPage页面
Utils.open_newPage({
   url: './externalPage.html',
   id: 'externalPage'
})
  1. 新建externalPage页面, 这相当于一个容器页面,用来展示外链内容,
    调用 plus.webview.create 创建一个新的页面
    urls 为 外链地址,注意http不要省略
var embed=plus.webview.create(urls,'embed',{top:'45px',bottom:'0px'});
  1. 调用plus.webview.currentWebview()获取当前页面,并将创建的外链页面,添加至当前页面
var ws = plus.webview.currentWebview();
ws.append(embed); 
  1. 处理页面加载
embed.addEventListener('loading',function(){       //当页面加载时
    plus.nativeUI.showWaiting('',{style:'black',modal:false,background:'rgba(0,0,0,0)'});
},false);
embed.addEventListener('loaded',function(){       //当页面加载完成时
    plus.nativeUI.closeWaiting();
},false);

5.页面返回
注意到,在创建外链页面时,所设置的top 值,就是用来放置返回按钮的

<header id="header" class="mui-bar mui-bar-nav">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    <h1 class="mui-title"></h1>
</header>

完整代码

image.png

相关文章

网友评论

      本文标题:mui 应该这样打开外部链接

      本文链接:https://www.haomeiwen.com/subject/lhkmactx.html