Mui-tbar设置-流畅-先前一直用src跳转

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <link href="css/mui.min.css" rel="stylesheet" />
    </head>
    <body>
        <header class="mui-bar mui-bar-nav">
            <h1 class="mui-title">标题</h1>
        </header>
         
        <nav class="mui-bar mui-bar-tab">
            <a class="mui-tab-item mui-active" href="show1.html">
                <span class="mui-icon mui-icon-home"></span>
                <span class="mui-tab-label">首页</span>
            </a>
            <a class="mui-tab-item" href="show2.html">
                <span class="mui-icon mui-icon-phone"></span>
                <span class="mui-tab-label">电话</span>
            </a>
            <a class="mui-tab-item" href="show3.html">
                <span class="mui-icon mui-icon-email"></span>
                <span class="mui-tab-label">邮件</span>
            </a>
            <a class="mui-tab-item" href="show4.html">
                <span class="mui-icon mui-icon-gear"></span>
                <span class="mui-tab-label">设置</span>
            </a>
        </nav>
        <script src="js/mui.min.js"></script>
        <script src="js/jquery.min.js"></script>
        <script type="text/javascript">
            mui.init();
            //mui加载完成事件
            mui.plusReady(function(){
                //定义子页面的数组
                var subPages = ["show1.html","show2.html","show3.html","show4.html"];
                //定义子页面显示位置的样式
                var subPagesStyle = {
                    top:"44px",//距离顶部44px
                    bottom:"50px",
                };
                //获取主webview-也就是当前页面index
                var mainView = plus.webview.currentWebview();
                //遍历子页面数组，根据每个页面url创建webView
                for(var i=0;i<subPages.length;i++){
                    var url = subPages[i];
                    //创建webview参数plus.webview.create(url,id,style)（用于指定将那个web页面创建为webview,
                    // 参数二，标识符，参数三设置样式）
                    var subView = plus.webview.create(url,url,subPagesStyle);
                    //设置子页面初始隐藏状态
                    subView.hide();
                    //将子页面追加到主页面
                    mainView.append(subView);//处于隐藏
                }
                //默认第一个子页面显示
                plus.webview.show(subPages[0]);
                 
                //给每个子页面tbr绑定点击事件，注意onclick,click是网页点击，手机无效
                mui(".mui-bar-tab").on("tap","a",function(){
                    //获取点击的ID，href就可以当做ID,或者自己定义一个
                    var id = this.getAttribute("href");
                    plus.webview.show(id);
                });
                 
            });
             
        </script>
    </body>
 
</html>

　　

posted @   小白咚  阅读(280)  评论(0)  编辑  收藏  举报
编辑推荐：
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识（上）
· 浏览器原生「磁吸」效果！Anchor Positioning 锚点定位神器解析
阅读排行：
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 单线程的Redis速度为什么快？
点击右上角即可分享
微信分享提示
AI FOR CODE 大赛