pbootcms网站模板|日韩1区2区|织梦模板||网站源码|日韩1区2区|jquery建站特效-html5模板网

mui幾種頁面跳轉方式對比總結概括

這篇文章主要介紹了mui幾種頁面跳轉方式對比,創建子頁面,打開新頁面,預加載頁面三種方式做出了對比,需要的朋友可以參考下

【幾種打開頁面的方式】

1.初始化時創建子頁面

2.直接打開新頁面

3.預加載頁面

【示例】

1.初始化時創建子頁面

mui.init({ 
    subpages: [{ 
        url: your - subpage - url, //子頁面HTML地址,支持本地地址和網絡地址 
        id: your - subpage - id, //子頁面標志 
        styles: { 
            top: subpage - top - position, //子頁面頂部位置 
            bottom: subpage - bottom - position, //子頁面底部位置 
            width: subpage - width, //子頁面寬度,默認為100% 
            height: subpage - height, //子頁面高度,默認為100% 
            ...... 
        }, 
        extras: {} //額外擴展參數 
    }] 
}); 

2.直接打開新頁面

mui.openWindow({ 
    url: new - page - url, 
    id: new - page - id, 
    styles: { 
        top: newpage - top - position, //新頁面頂部位置 
        bottom: newage - bottom - position, //新頁面底部位置 
        width: newpage - width, //新頁面寬度,默認為100% 
        height: newpage - height, //新頁面高度,默認為100% 
        ...... 
    }, 
    extras: { 
        ..... //自定義擴展參數,可以用來處理頁面間傳值 
    } 
    show: { 
        autoShow: true, //頁面loaded事件發生后自動顯示,默認為true 
        aniShow: animationType, //頁面顯示動畫,默認為”slide-in-right“; 
        duration: animationTime //頁面動畫持續時間,Android平臺默認100毫秒,iOS平臺默認200毫秒; 
    }, 
    waiting: { 
        autoShow: true, //自動顯示等待框,默認為true 
        title: '正在加載...', //等待對話框上顯示的提示內容 
        options: { 
            width: waiting - dialog - widht, //等待框背景區域寬度,默認根據內容自動計算合適寬度 
            height: waiting - dialog - height, //等待框背景區域高度,默認根據內容自動計算合適高度 
            ...... 
        } 
    } 
}) 
  
 

3.預加載頁面

// 方式1 
mui.init({ 
    preloadPages: [{ 
        url: prelaod - page - url, 
        id: preload - page - id, 
        styles: {}, //窗口參數 
        extras: {}, //自定義擴展參數 
        subpages: [{}, {}] //預加載頁面的子頁面 
    }] 
}); 
  
// 方式2 
var page = mui.preload({ 
    url: new - page - url, 
    id: new - page - id, //默認使用當前頁面的url作為id 
    styles: {}, //窗口參數 
    extras: {} //自定義擴展參數 
}); 
  
 

【一些區別】

1.子頁面和非子頁面

以上三種方式中,2,3打開的頁面非子頁面,

區別是子頁面相當于html中的iframe,而非子頁面相當于新開了一個瀏覽器窗口加載了一個html

2.子頁面適用于側滑菜單

子頁面有其有點,特別適用與index.html+list.html這種情況,

如果用index.html(主頁面)+list.html(子頁面)實現的話,當主頁面右滑時子頁面會自動跟隨,

而用index.html(主頁面)+list.html(新頁面)實現的話,主頁面右滑,新頁面不右滑,還得單獨處理新頁面。

3.子頁面實用頻繁切換的情況

如果頻繁左滑右滑,在配置較低的手機上會出現list.html遮住index.html的情況,

采用子頁面模式就不會,采用新頁面模式幾率很大。

4.子頁面適用與下拉刷新和上拉加載

之前做大下拉刷新的時候,采用的是新頁面的形式,

按照官網教程,怎么搞都不成功,

后來看了下源碼,發現下拉刷新必須采用子頁面的形式,

也就是你的list.html必須是index.html的子頁面,才可以下拉刷新。

5.新頁面適用于新頁面

open一個新頁面,適用于查看詳情之類的,需要打開一個新頁面的情況,

并且mui自己封裝了新頁面的back方法,你就不需要去操心了。

6.預加載頁面的兩種方式

第一種是在初始化的時候預加載,

這種情況適合在你這個頁面在很久之后才會用,

如果你要立即到的頁面并使用,那么你會得到null。

第二種方式類似與open,

個人感覺沒有什么太大的區別,

唯一的區別是open就直接打開了,

preload只是加載,你可以之后選擇打開的時機。

7.總結

需要下拉刷新上拉加載請使用子頁面,

需要打開一個新頁面請使用新頁面方式,

需要加載一個頁面但是暫時不使用請使用預加載方式。

以上就是這篇文章的全部內容了,希望本文的內容對大家的學習或者工作能帶來一定的幫助~如果有疑問大家可以留言交流,謝謝大家對的支持!

【網站聲明】本站除付費源碼經過測試外,其他素材未做測試,不保證完整性,網站上部分源碼僅限學習交流,請勿用于商業用途。如損害你的權益請聯系客服QQ:2655101040 給予處理,謝謝支持。

相關文檔推薦

這篇文章主要介紹了Web前端頁面跳轉并取到值,就是從A頁面跳轉到B頁面,并將B頁面的值取到賦到A頁面上顯示,具體實現方法,大家參考下本文
主站蜘蛛池模板: 真空搅拌机-行星搅拌机-双行星动力混合机-广州市番禺区源创化工设备厂 | 成都珞石机械 - 模温机、油温机、油加热器生产厂家 | 齿轮减速电机一体机_蜗轮蜗杆减速马达-德国BOSERL齿轮减速机带电机生产厂家 | 餐饮小吃技术培训-火锅串串香培训「何小胖培训」_成都点石成金[官网] | 熔体泵|换网器|熔体齿轮泵|熔体计量泵厂家-郑州巴特熔体泵有限公司 | 哈尔滨京科脑康神经内科医院-哈尔滨治疗头痛医院-哈尔滨治疗癫痫康复医院 | 鲁尔圆锥接头多功能测试仪-留置针测试仪-上海威夏环保科技有限公司 | 【北京写字楼出租_写字楼租赁_办公室出租网/出售】-远行地产官网 | 低合金板|安阳低合金板|河南低合金板|高强度板|桥梁板_安阳润兴 北京租车牌|京牌指标租赁|小客车指标出租 | 拉曼光谱仪_便携式|激光|显微共焦拉曼光谱仪-北京卓立汉光仪器有限公司 | uv机-uv灯-uvled光固化机-生产厂家-蓝盾机电 | 聚合氯化铝价格_聚合氯化铝厂家_pac絮凝剂-唐达净水官网 | 一航网络-软件测评官网| 塑胶跑道_学校塑胶跑道_塑胶球场_运动场材料厂家_中国塑胶跑道十大生产厂家_混合型塑胶跑道_透气型塑胶跑道-广东绿晨体育设施有限公司 | 北京网站建设-企业网站建设-建站公司-做网站-北京良言多米网络公司 | RTO换向阀_VOC高温阀门_加热炉切断阀_双偏心软密封蝶阀_煤气蝶阀_提升阀-湖北霍科德阀门有限公司 | 山东锐智科电检测仪器有限公司_超声波测厚仪,涂层测厚仪,里氏硬度计,电火花检漏仪,地下管线探测仪 | 玄米影院| 振动时效_振动时效仪_超声波冲击设备-济南驰奥机电设备有限公司 北京宣传片拍摄_产品宣传片拍摄_宣传片制作公司-现像传媒 | 废水处理-废气处理-工业废水处理-工业废气处理工程-深圳丰绿环保废气处理公司 | 翅片管散热器价格_钢制暖气片报价_钢制板式散热器厂家「河北冀春暖气片有限公司」 | 圣才学习网-考研考证学习平台,提供万种考研考证电子书、题库、视频课程等考试资料 | 煤粉取样器-射油器-便携式等速飞灰取样器-连灵动 | 亚克隆,RNAi干扰检测,miRNA定量检测-上海基屹生物科技有限公司 | 三效蒸发器_多效蒸发器价格_四效三效蒸发器厂家-青岛康景辉 | 岩棉切条机厂家_玻璃棉裁条机_水泥基保温板设备-廊坊鹏恒机械 | 食安观察网| 艺术漆十大品牌_艺术涂料加盟代理_蒙太奇艺术涂料厂家品牌|艺术漆|微水泥|硅藻泥|乳胶漆 | 软文推广发布平台_新闻稿件自助发布_媒体邀约-澜媒宝 | 真空干燥烘箱_鼓风干燥箱 _高低温恒温恒湿试验箱_光照二氧化碳恒温培养箱-上海航佩仪器 | 共享雨伞_共享童车_共享轮椅_共享陪护床-共享产品的领先者_有伞科技 | 天然气分析仪-液化气二甲醚分析仪|传昊仪器 | 英超直播_英超免费在线高清直播_英超视频在线观看无插件-24直播网 | 仿古瓦,仿古金属瓦,铝瓦,铜瓦,铝合金瓦-西安东申景观艺术工程有限公司 | 数显水浴恒温振荡器-分液漏斗萃取振荡器-常州市凯航仪器有限公司 | 江苏南京多语种翻译-专业翻译公司报价-正规商务翻译机构-南京华彦翻译服务有限公司 | 高效节能电机_伺服主轴电机_铜转子电机_交流感应伺服电机_图片_型号_江苏智马科技有限公司 | 镀锌钢格栅_热镀锌格栅板_钢格栅板_热镀锌钢格板-安平县昊泽丝网制品有限公司 | pos机办理,智能/扫码/二维码/微信支付宝pos机-北京万汇通宝商贸有限公司 | 民用音响-拉杆音响-家用音响-ktv专用音响-万昌科技 | 药品/药物稳定性试验考察箱-埃里森仪器设备(上海)有限公司 |