mui 创建子页面

25 篇文章 0 订阅
17 篇文章 0 订阅

<nav class="mui-bar mui-bar-tab" id="nav">
            <a class="mui-tab-item mui-active" id="0">
                <span class="mui-icon mui-icon-home"></span>
                <span class="mui-tab-label">首页</span>
            </a>
            <a class="mui-tab-item" id="1">
                <span class="mui-icon mui-icon-paperplane"></span>
                <span class="mui-tab-label">巡课</span>
            </a>
            <a class="mui-tab-item" id="2">
                <span class="mui-icon mui-icon-compose"></span>
                <span class="mui-tab-label">反馈</span>
            </a>
            <a class="mui-tab-item" id="3">
                <span class="mui-icon mui-icon-flag"></span>
                <span class="mui-tab-label">课程</span>
            </a>
            <a class="mui-tab-item" id="4">
                <span class="mui-icon mui-icon-person"></span>
                <span class="mui-tab-label">通讯录</span>
            </a>
        </nav>

 

js

<script type="text/javascript">
    
mui.plusReady(function() {
                //设置默认打开首页显示的子页序号
                var Index = 0;
                //把子页面路径写在数组里面
                var subpages = ['home.html', 'xunke.html', 'feedback.html', 'course.html', 'mine.html']
                //获取当前页面所属的Webview窗口对象
                var self = plus.webview.currentWebview();
                for(var i = 0; i < 5; i++) {
                    //创建webview子页
                    var sub = plus.webview.create(
                        subpages[i], //子页url
                        subpages[i], //子页id
                        {
                            top: '50px',
                            bottom: '44px',
                            scrollIndicator: "none" //隐藏滚动条
                        }
                    );
                    //如果不是我们设置的子页就隐藏
                    if(i != Index) {
                        sub.hide()
                    }
                    //将webview对象填充到窗口
                    self.append(sub)
                }
 
                //当前激活选项
                var activeTab = subpages[Index]
                var targetTab;
                mui('.mui-bar-tab').on('tap', 'a', function(e) {
                    //获取子页面的id
                    var j = this.getAttribute('id')
                    targetTab = subpages[j]
                    if(activeTab == targetTab) {
                        return
                    }
                    //显示目标选项卡
                    plus.webview.show(targetTab)
                    //隐藏当前选项卡
                    plus.webview.hide(activeTab)
                    //更改当前活跃选项卡
                    activeTab = targetTab
         })
            })
</script>

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值