MUI-创建子页面打开新页面
生活随笔
收集整理的這篇文章主要介紹了
MUI-创建子页面打开新页面
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
本文主要簡(jiǎn)單講述創(chuàng)建子頁(yè)面和打開(kāi)新頁(yè)面的方法。
1、使用subpages:[{}]，創(chuàng)建子頁(yè)面，擋在mui.init()方法中
2、使用mui.openWindow({})打開(kāi)新頁(yè)面
3、實(shí)現(xiàn)如下效果圖：
通過(guò)雙webview模式解決，此種情況適用于需要上下拉刷新的列表頁(yè)面。將需要滾動(dòng)的區(qū)域通過(guò)單獨(dú)的webview實(shí)現(xiàn)，完全使用原生滾動(dòng)。具體做法則是：將目標(biāo)頁(yè)面分解為主頁(yè)面new_file和內(nèi)容頁(yè)面new_file4，主頁(yè)面顯示卡頭卡尾區(qū)域，比如頂部導(dǎo)航、底部選項(xiàng)卡等；內(nèi)容頁(yè)面顯示具體需要滾動(dòng)的內(nèi)容，然后在主頁(yè)面中調(diào)用mui.init方法初始化內(nèi)容頁(yè)面。
如下分解結(jié)構(gòu)：
?
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>數(shù)字輸入框</title><meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="black"><!--標(biāo)準(zhǔn)mui.css--><link rel="stylesheet" type="text/css" href="css/mui.min.css"><!--App自定義的css--><link rel="stylesheet" type="text/css" href="css/app.css" /><link rel="stylesheet" type="text/css" href="css/mui.picker.css" /><link rel="stylesheet" type="text/css" href="css/mui.poppicker.css" /><style></style></head><body><header class="mui-bar mui-bar-nav"><a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a><a class="mui-icon mui-icon-bars mui-pull-right" id="open"></a><h1 class="mui-title">標(biāo)題</h1></header><nav class="mui-bar mui-bar-tab"><a class="mui-tab-item" href="#delete"><span class="mui-icon mui-icon-trash"></span></a><a class="mui-tab-item" href="#"></a><a class="mui-tab-item" href="#"></a><a class="mui-tab-item" href="#forward"><span class="mui-icon mui-icon-undo"></span></a></nav></body><script src="js/mui.min.js"></script><script src="js/jquery.min.js"></script><script src="js/mui.picker.js"></script><script src="js/mui.poppicker.js"></script><script>// 創(chuàng)建子頁(yè)面mui.init({subpages: [{url: 'new_file4.html',id: 'new_file4',styles: {top: '45px', //mui標(biāo)題欄默認(rèn)高度為45px；bottom: '52px' //默認(rèn)為0px，可不定義；}}]});// 打開(kāi)新頁(yè)面document.getElementById("open").addEventListener('tap', function() {mui.openWindow({url: 'new_file3.html',id: 'new_file3',});});</script> </html>?
總結(jié)
以上是生活随笔為你收集整理的MUI-创建子页面打开新页面的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 无线网络技术测试试题（四）
- 下一篇： ffmpeg截取视频片段的两种方式 1）