mui原生渐变式导航5+

最新推荐文章于 2023-05-30 11:29:05 发布

web_longboss

最新推荐文章于 2023-05-30 11:29:05 发布

阅读量2.6k

点赞数

分类专栏： mui 文章标签： mui

本文链接：https://blog.csdn.net/web_longboss/article/details/78232771

版权

mui 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<script type="text/javascript">
            mui.init({
                statusBarBackground: '#f7f7f7',
                preloadPages: [ {
                    url: "../pages/contacts/contact.html",
                    id: "contact.html"
                }],
            });
            mui.plusReady(function() {

                document.getElementById('contact').addEventListener('tap', function() {
        //常规方式方法打开是不会有原生效果的 可以使用预加载
                    //                  mui.openWindow({
                    //                      url: '../pages/contacts/contact.html',
                    //                      id: 'contact.html',
                    //                      show: {
                    //                          autoShow: true, //页面loaded事件发生后自动显示，默认为true
                    //                          //    aniShow:animationType,//页面显示动画，默认为”slide-in-right“；
                    //                          //    duration:animationTime,//页面动画持续时间，Android平台默认100毫秒，iOS平台默认200毫秒；
                    //                          //    event:'titleUpdate',//页面显示时机，默认为titleUpdate事件时显示
                    //                          //    extras:{}//窗口动画是否使用图片加速
                    //                      },
                    //                  });

                    //5+方法 不使用预加载  仅5+创建webview 事件发生前创建
                   var webview = plus.webview.create("../pages/contacts/contact.html",    "contact.html", {
                        titleNView: {
                            'backgroundColor': '#f7f7f7', //导航栏背景色
                            'titleText': '透明渐变(native模式)', //导航栏标题
                            'titleColor': '#000000', //文字颜色
                            type: 'transparent', //透明渐变样式
                            autoBackButton: true, //自动绘制返回箭头
                            splitLine: { //底部分割线
                                color: '#cccccc'
                            }
                        }
                    }, {});//不能放到事件外面
                    //5+打开跳转
                    webview.show("slide-in-right", 300); //直接显示
                });
            })
        </script>