MUI 窗体切换(setting设置)即窗口从右往左切换,返回从左往右切换。

时间:2022-01-30 03:43:52

1)引入mui.min.css

2)引入mui.min.js

   引入mui.view.js

1.HTML:

//这是页面的主体结构
  <div id="app" class="mui-views">
    <div class="mui-view">
      <div class="mui-navbar"></div>
       <div class="mui-pages"></div>
    </div>
  </div>
//这是主页面
<div id="这是主页面的ID" class="mui-page">
  <div class="mui-navbar-inner mui-bar mui-bar-nav">
    <button type="button" class="mui-left mui-action-back mui-btn-link mui-btn-nav mui-pull-left">
        <span class="mui-icon mui-icon-left-nav"></span>返回 //此处是返回按钮
    </button>
     <p class="">这里是顶部导航栏的title</p>
      //如果想在右上角也添加一个按钮的话,可以在此处也添加一个标签,然后绝对定位就行了。例如:<a href="#user_change_ifo" class="mycenter_nav_bianji">编辑</a> 这a标签里的href就用#ID的形式来实现页面跳转
  </div>
    <div class="mui-page-content">
      <div class="mui-scroll-wrapper">
        <div class="mui-scroll">
           主页面的内容
        </div>
      </div>
    </div>
  </div>
    //这是单一页面
  <div id="这是单一页面的ID" class="mui-page">
    <div class="mui-navbar-inner mui-bar mui-bar-nav">
      <button type="button" class="mui-left mui-action-back mui-btn-link mui-btn-nav mui-pull-left">
        <span class="mui-icon mui-icon-left-nav"></span>返回 //此处是返回按钮
      </button>
      <p class="">这里是顶部导航栏的title</p>
      //如果想在右上角也添加一个按钮的话,可以在此处也添加一个标签,然后绝对定位就行了。例如:<a href="#user_change_ifo" class="mycenter_nav_bianji">编辑</a> 这a标签里的href就用#ID的形式来实现页面跳转
    </div>
    <div class="mui-page-content">
      <div class="mui-scroll-wrapper">
        <div class="mui-scroll">
           主页面的内容
        </div>
      </div>
    </div>
  </div>

2.CSS

  .mui-views,.mui-view,.mui-pages,.mui-page,.mui-page-content {
    position: absolute;
    left:;
    right:;
    top:;
    bottom:;
    width: 100%;
    height: 100%;
    background-color: #efeff4;
  }
  .mui-pages {
    top: 46px;
    height: auto;
  }
  .mui-scroll-wrapper,.mui-scroll { /*好像是为了把单一页面的内容覆盖掉*/
    background-color: #efeff4;
  }
  .mui-page.mui-transitioning { /*页面切换的特效*/
    -webkit-transition: -webkit-transform 300ms ease;
    transition: transform 300ms ease;
  }
  .mui-navbar .mui-btn-nav {
    -webkit-transition: none;
    transition: none;
    -webkit-transition-duration: .0s;
    transition-duration: .0s;
  }
  .mui-navbar-inner.mui-transitioning,
    .mui-navbar-inner .mui-transitioning {
    -webkit-transition: opacity 300ms ease, -webkit-transform 300ms ease;
    transition: opacity 300ms ease, transform 300ms ease;
  }
  .mui-android .mui-navbar-inner.mui-navbar-left { /*顶部导航栏文字的隐藏*/     opacity:;
  }
  .mui-navbar .mui-btn-nav { /*这个可要可不要,是返回按钮那点的效果*/
    -webkit-transition: none;
    transition: none;
    -webkit-transition-duration: .0s;
    transition-duration: .0s;
  }
  .mui-page {
    display: none;
  }
  .mui-pages .mui-page {
    display: block;
  }

3.JS

//初始化单页view
  var viewApi = mui('这是页面的主体结构的ID').view({
    defaultPage: '这是主页面的ID'
  });
  var view = viewApi.view;
  (function($) {
    //处理view的后退与webview后退
    var oldBack = $.back;
    $.back = function() {
      if (viewApi.canBack()) { //如果view可以后退,则执行view的后退
        viewApi.back();
      } else { //执行webview后退
        oldBack();
      }
    };
  //监听页面切换事件方案1,通过view元素监听所有页面切换事件,目前提供pageBeforeShow|pageShow|pageBeforeBack|pageBack四种事件(before事件为动画开始前触发)
  //第一个参数为事件名称,第二个参数为事件回调,其中e.detail.page为当前页面的html对象
    view.addEventListener('pageBeforeShow', function(e) {
      // console.log(e.detail.page.id + ' beforeShow');
    });
    view.addEventListener('pageShow', function(e) {
      // console.log(e.detail.page.id + ' show');
    });
    view.addEventListener('pageBeforeBack', function(e) {
      // console.log(e.detail.page.id + ' beforeBack');
    });
    view.addEventListener('pageBack', function(e) {
      // console.log(e.detail.page.id + ' back');
    });
  })(mui);