uni-app中mui无等待窗体切换是如何实现的

发布于 1周前 作者 sinazl 来自 Uni-App

uni-app中mui无等待窗体切换是如何实现的 从mui v0.7.0版本开始，hello mui示例App的窗体切换性能大幅提升，点击一个链接，不显示雪花等待框，立即打开一个“正在加载…”的页面，之后真实内容快速填充“正在加载…”区域；本文详细讲解如何实现这种窗体切换效果。

整体思路：

  1. 预加载一个模板父页面（template.html）和共用子页面；
  2. 点击列表链接时，直接显示模板父页面，并动态修改模板父页面的标题；
  3. 共用子页面通过loadURL方法加载对应目标页面；

步骤分解：

list.html页面中预加载模板父页面和共用子页面，为了提高效率，共用子页面默认加载了主列表中的第一项（accordion.html），代码如下：

//预加载模板父页面  
var template = mui.preload({  
    url:'examples/template.html',  
    id:'demoTemplate',  
    styles:{  
        popGesture:"hide"  
    }  
});  
//预加载共用子页面  
var subWebview = mui.preload({  
    url:'examples/accordion.html',  
    id:'template_sub',  
    styles:{  
        top: '48px',  
        bottom: '0px'  
    }  
});

点击列表项时，立即显示模板父页面，改变模板父页面标题，共用子页面加载对应的目标页面，代码如下：

var title = this.innerText;  
template.evalJS("with(document.getElementById('title')){innerHTML='" + title + "';className='mui-title mui-fadein';};");  
if(subWebview.getURL()==this.href){  
    subWebview.show();  
}else{  
    subWebview.loadURL(this.href);  
}  
template.show('slide-in-right', 150);

共用子页面默认隐藏，等加载新内容完毕后，再显示出来，代码如下：

subWebview.addEventListener('loaded', function() {  
    setTimeout(function(){  
        subWebview.show();    
    },50);  
});

新页面按下返回按钮后，隐藏模板父页面，并在窗体动画结束后，隐藏共用子页面，代码（App.js）如下：

getTemplateWebview().hide('auto');  
setTimeout(function() {  
    document.getElementById("title").className = 'mui-title mui-fadeout';  
    getSubWebview().hide("none");  
}, 200);

Harmonyos Next教程
1 回复

在uni-app中实现mui无等待窗体切换，通常是通过优化页面跳转逻辑和使用异步数据加载来实现的。mui（即MUI框架）本身并不是uni-app的一部分，但我们可以借鉴其无等待切换窗体的思想，结合uni-app的特性来实现类似效果。

以下是一个简单的代码案例，展示了如何在uni-app中实现类似无等待窗体切换的功能。这个案例将涉及页面跳转和数据异步加载。

1. 创建两个页面

首先，我们创建两个页面：PageA 和 PageB。

PageA.vue

<template>
  <view>
    <button @click="navigateToPageB">Go to Page B</button>
  </view>
</template>

<script>
export default {
  methods: {
    navigateToPageB() {
      uni.navigateTo({
        url: '/pages/PageB/PageB',
        success: () => {
          // 在这里可以进行一些额外的操作，比如发送数据请求等
          console.log('Navigation to PageB succeeded');
        },
        fail: (err) => {
          console.error('Navigation to PageB failed:', err);
        }
      });
    }
  }
}
</script>

PageB.vue

<template>
  <view>
    <text>{{ message }}</text>
  </view>
</template>

<script>
export default {
  data() {
    return {
      message: 'Loading...'
    };
  },
  onLoad() {
    this.fetchData();
  },
  methods: {
    async fetchData() {
      // 模拟异步数据加载
      try {
        const response = await new Promise((resolve, reject) => {
          setTimeout(() => {
            resolve('Hello from Page B');
          }, 2000); // 模拟2秒的数据加载时间
        });
        this.message = response;
      } catch (error) {
        console.error('Data fetching failed:', error);
      }
    }
  }
}
</script>

2. 解释

  • PageA 中有一个按钮，点击按钮后调用 uni.navigateTo 方法跳转到 PageB。
  • PageB 在 onLoad 生命周期钩子中调用 fetchData 方法异步加载数据。
  • fetchData 方法使用 async/await 语法模拟了一个异步数据请求，并在数据加载完成后更新页面内容。

通过这种方式，PageB 在跳转过程中不会阻塞UI，用户可以看到一个加载提示（本例中为 “Loading…”），而数据则在后台加载。当数据加载完成后，页面内容会更新，从而实现无等待窗体切换的效果。

这种实现方式利用了uni-app的生命周期钩子和异步处理能力，无需引入额外的框架，即可实现类似mui无等待窗体切换的功能。

回到顶部