MUI从入门到项目实战（十五）（MUI事件之自定义事件）

在App开发中，经常会遇到页面间传值的需求，比如从新闻列表页进入详情页，需要将新闻id传递过去； Html5Plus规范设计了evalJS方法来解决该问题；但evalJS方法仅接收字符串参数，涉及多个参数时，需要开发人员手动拼字符串；为简化开发，mui框架在evalJS方法的基础上，封装了自定义事件，通过自定义事件，用户可以轻松实现多webview间数据传递

监听自定义事件

添加自定义事件监听操作和标准js事件监听类似，可直接通过window对象添加，如下：

window.addEventListener('customEvent',function(event){
  //通过event.detail可获得传递过来的参数内容
  ....
});

通过mui.fire()方法可触发目标窗口的自定义事件：

index.html的代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <title></title>
        <script src="js/mui.min.js"></script>
        <link href="css/mui.min.css" rel="stylesheet" />
        <link rel="stylesheet" href="css/iconfont.css" />
        <link rel="stylesheet" href="css/mui.picker.min.css" />
        <script src="js/mui.picker.min.js"></script>
        

    </head>
    <body>
        <header class="mui-bar mui-bar-nav mui-bar-transparent" data-top='0' data-offset='150' data-duration='16'
         data-scrollby=".mui-scroll-wrapper">
            <h1 class="mui-title">标题</h1>
        </header>
        <!-- 主界面菜单同时移动 -->
        <!-- 侧滑导航根容器 -->
        <div class="mui-off-canvas-wrap mui-draggable">
            <!-- 主页面容器 -->
            <div class="mui-inner-wrap">
                <!-- 菜单容器 -->
                <aside class="mui-off-canvas-left" id="offCanvasSide">
                    <div class="mui-scroll-wrapper">
                        <div class="mui-scroll">
                            <!-- 菜单具体展示内容 -->

                        </div>
                    </div>
                </aside>
                <!-- 主页面标题 -->
                <header class="mui-bar mui-bar-nav mui-bar-transparent">
                    <a class="mui-icon mui-action-menu mui-icon-bars mui-pull-left" href="#offCanvasSide"></a>
                    <h1 class="mui-title">标题</h1>
                </header>
                <nav class="mui-bar mui-bar-tab">
                    <a class="mui-tab-item mui-active">
                        <span class="mui-icon iconfont icon-home"></span>
                        <span class="mui-tab-label">首页</span>
                    </a>
                    <a class="mui-tab-item">
                        <span class="mui-icon iconfont icon-faxian"></span>
                        <span class="mui-tab-label">发现</span>
                    </a>
                    <a class="mui-tab-item">
                        <span class="mui-icon iconfont icon-jifenshangcheng"></span>
                        <span class="mui-tab-label">积分商城</span>
                    </a>
                    <a class="mui-tab-item">
                        <span class="mui-icon iconfont icon-wode"></span>
                        <span class="mui-tab-label">我的</span>
                    </a>
                </nav>
                <!-- 主页面内容容器 -->
                <div class="mui-content mui-scroll-wrapper" id="dialogDemo">                                
                    <ul id="list1">
                        <li id="1">新闻1</li>
                        <li id="2">新闻2</li>
                        <li id="3">新闻3</li>
                    </ul>
                </div>

                <div class="mui-off-canvas-backdrop"></div>

            </div>
        </div>
    </body>
    <script type="text/javascript" charset="utf-8">
        mui.init();
        mui.plusReady(function(){
            var detailPage = mui.preload({
                url:'sub.html',
                id:'sub.html',
                styles:{},//窗口参数
                extras:{}//自定义扩展参数
            });
            mui('#list1').on('tap','li',function(e){
                mui.fire(detailPage,'newsId',{id:this.getAttribute('id')});
                mui.openWindow('sub.html','sub.html',{});
            })
        });
    </script>
</html>

sub.html的代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="js/mui.min.js"></script>
        <link href="css/mui.min.css" rel="stylesheet" />
        <link rel="stylesheet" href="css/iconfont.css" />
        <link rel="stylesheet" href="css/mui.picker.min.css" />
        <script src="js/mui.picker.min.js"></script>
        <script type="text/javascript" charset="utf-8">
            mui.init();
            mui.plusReady(function(){
               window.addEventListener('newsId',function(event){
                   console.log(event.detail.id);
                   mui.alert('新闻id:'+event.detail.id);
               })
            });
        </script>
    </head>
    <body>
    </body>
</html>

posted on 2019-05-31 17:40 友帅老师阅读(215) 评论(0) 收藏举报