?#19968;?#23494;码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 查看内容

uni-app相关知识总结

Rolan 2019-10-12 00:43

一、默认导航栏uni-app默认会提供一个导航栏,即小程序的导航栏,我们不需要进行任何的配置就会显示,默认导航栏的配置同微信小程序,只不过微信小程序的组件是分为.wxml、.wxss、.js、.json四个文件组成,而uni-app ...

一、默认导航栏

uni-app默认会提供一个导航栏,即 小程序的导航栏 ,我们不需要进行任何的配置就会显示, 默认导航栏的配置同微信小程序 ,只不过微信小程序的组件是分为.wxml、.wxss、.js、.json四个文件组成,而 uni-app的组件则只有一个.vue文件 (其中包含了html、css、js),其中并未包含.json的相关内容,那么.json配置写在哪里呢?.json文件主要是 对页面的 窗口表现及页面相关功能进?#20449;?#32622;,所以unip在pages.json文件中注册页面的时候,给每个page页面提供了一个style属性,用于对当前页面的窗口表现( 窗口 样式、 导航栏 样式)及功能( 页面下拉刷新 、 页面能否滚动等),如:

{
    "pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
        {
            "path": "pages/index/index",
            "style": { // 对窗口及其页面表现进?#20449;?#32622;
                "navigationBarTitleText": "导航标题", // 设置默认导航栏标题文字内容
                "navigationBarTextStyle": "white", // 设置默认导航栏标题文字颜色及状态栏上文字颜色,仅支持black和white
                "navigationBarBackgroundColor": "#4CD964", // 设置默认导航栏背景颜色及状态栏背景颜色,仅支持十六进制颜色值
                "navigationStyle": "default", // 支持defaul和custom两种,设置custom(自定义)后,默认导航栏将消失,微信小程序上只保持右上角胶囊按钮
                "backgroundColor":"#ADFF2F", // 设置窗口背景颜色,开启下拉刷新之后,下拉后可见该背景颜色(黄色),仅小程序端生效
                "enablePullDownRefresh": true, // 是否开启页面下拉刷新功能
                // 上拉刷新不需要开启,页面提供了一个触底事件onReachBottom,只要页面存在滚动条,滚动条触底后就可以触发触底事件,从而进行下拉刷新
                "onReachBottomDistance": 0, // 当滚动条距离底部的距离为指定值的时候则判定为触底
                "disableScroll": false, // 页面能否滚动,如果为true则禁用页面滚动功能,及时页面设置的高度超过了屏幕高度也不会发生滚动,仅小程序端生效
                "usingComponents": { // 配置是否使用小程序提供的自定义组件,这里的小程序组件不是.vue组件,而是小程序提供的原生组件,App端也支持
                    "custom": "/wxcomponents/custom/index"
                },
                // "backgroundTextStyle":"dark", // 设置下拉 loading 的样式,仅支持dark和light,无明显用处
            }
        }
    ]
}

需要注意的就是usingComponents的配置,其配置的是使用 小程序提供的原生组件(如包含.wxml、.wxss、.js、.json的组件) ,而不是.vue组件。同时 状态栏上文字颜色仅支持black和white,即非黑即白,状态栏背景色同导航栏背景颜色

二、原生导航栏

uni-app运行在app端的时候,还提供了原生导航栏,其在注册页面的时候,style还提供了一个 app-plus 属性用于 配置app端 页面窗口、导航栏样式的配置,导航栏的配置通过titleNView属性,如:

{
    "pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
        {
            "path": "pages/index/index",
            "style": { // 对窗口及其页面表现进?#20449;?#32622;
                "app-plus": {
                    // "titleNView": false // 禁用原生导航栏,即当前页面不显示原生导航栏
                    "scrollIndicator":"none", // 设置是否显示页面滚动条,设置为none,滚动时看不到右侧的滚动条
                    "pullToRefresh": {
                        "style":"default" // 设置下拉刷新样式,只支持default和circle
                    },
                    "bounce":"none", // 设置页面回弹效果,none关闭回弹效果
                    // "titleNView": { // 空对象不会对默认导航栏进行替换,必须进行相关配置才会对默认导航栏进行修改
                        
                    // },
                    "titleNView": { // 对原生导航栏进?#20449;?#32622;
                        "titleText": "原生导航栏标题内容", // 标题内容与搜索框只能显示一个
                        "buttons": [ // 在原生导航栏上添加按钮
                            {
                                // "type":"share", // 使用 type 值设置按钮的样式时,会忽略 fontSrc 和 text 属性。
                                "fontSrc":"./static/font/icon.ttf", // 使用字体图标
                                "text": "\ue609", // 使用字体图标时 unicode 字符表示必须 '\u' 开头
                                "fontSize":"22px",
                                "color":"#FF9619", 
                                "colorPressed":"#BBBBBB",
                                "select": false, // 是否显示右侧向?#24405;?#22836;图标常用于城市选择
                                "float":"left" // 按钮放在导航栏左侧
                            },
                            {
                                // "type":"favorite", // 使用 type 值设置按钮的样式时,会忽略 fontSrc 和 text 属性。
                                "fontSrc":"./static/font/icon.ttf",
                                "text": "\ue653", // 使用字体图标时 unicode 字符表示必须 '\u' 开头
                                "fontSize":"22px",
                                "color":"#000000",
                                "colorPressed":"#BBBBBB",
                                "select": false, // 是否显示右侧向?#24405;?#22836;图标常用于城市选择
                                "float":"right" // 按钮放在导航栏右侧
                            }
                        ],
                        "searchInput": { // 是否在原生导航栏上添加搜索框,一旦添加搜索框,那么导航栏标题内容将无法显示,因为搜索框是放在标题的位置,对标题进行了替换
                            "align":"center",
                            "backgroundColor":"#F7F7F7",
                            "borderRadius":"4px",
                            "placeholder":"搜索",
                            "disabled": true
                        }
                    }
                }
            }
        }
    ]
}

三、自定义导航栏

要想自定义导航栏,我们必须先让默认导航栏或者原生导航栏隐藏,在小程序端可以通过 "navigationStyle":"custom" 隐藏,app端则可以通过 "titleNView": false 进行隐藏,如:

{
    "pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
        {
            "path" : "pages/contact/contact",
            "style" : {
                "navigationStyle":"custom", // 隐藏小程序端导航栏
                "app-plus": {
                    "titleNView": false // 隐藏app端原生导航栏
                }
            }
        }
     ]
}

使用自定义导航栏导航后,由于默认导航栏和原生导航栏都消失了,所以原先导航栏的位置就被空出来了,我们可以 通过自定义一个导航视图组件占据原先导航栏的位置即可实现 ,但是下拉刷新会有问题,因为页面?#21335;?#25289;刷新是从顶部开始的,之前 有默认导航和原生导航的时候 , 页面的顶部就是导航栏底部 ,但是默认导航和原生导航隐藏后, 顶部就变成了原先导航栏的顶部了 ,所以 页面下拉刷新的位置向上移了 ,使用自定义导航栏后最好不要在页面中使用下拉刷新功能了。如果非要使用下拉刷新功能的话,我们可以通过<scroll-view>组件来模拟下拉刷新。即 监听<scroll-view>组件的@scrolltoupper事件判断是否到达顶部,然后监听@scroll事件,判断下拉的位置,然后动态改变下拉刷新的样式、动画 从而模拟出下拉刷新效果。

<view class="pull-down iconfont icon-liulan" :style="{transform: 'rotate(' + detal+ 'deg)'}"></view>
<scroll-view scroll-y class="scroll-box" @scrolltoupper="pullDown" @scroll="scroll">
</scroll-view>
export default {
    methods: {
        pullDown(e) {
            // console.log(e);
        },
        scroll(e) { // 根据下拉的距离改变detal的值从而改变下拉刷新图标的选择角度
            this.detal = e.detail.scrollTop + 100;
        }
    }
}

四、vue与nvue

nvue即 native vue 。uni-app App?#22235;?#32622; weex 渲染引擎,提供了原生渲染能力。 uni-app默认是处于uni-app的渲染模式 ,即小程序渲染模式,如果要启用纯原生渲染模式,即weex渲染模式,那么需要在 manifest.json 源码视图的 "app-plus" 下配置 "renderer":"native" ,开启原生渲染模式后, pages.json注册的vue页面将被忽略 ,启动纯原生渲染,可以减少App端的包体积、加快App启动速度。因为webview渲染模式的相关模块将被移除了。

// manifest.json    
{    
    // ...    
     /* App?#25945;?#29305;?#20449;?#32622; */    
    "app-plus": {    
        "renderer": "native", //App端纯原生渲染模式
    }    
}

在未开启weex原生渲染模式的情况下,即uni-app模式下也是可以直接渲染.nvue文件的, 不管是vue页面还是nvue页面,都需要在pages.json中注册 ,并且如果一个页面下出现了两个同名的vue和nvue文件,那么在 App端 , 会优先使用nvue页面 ,同名的vue文件将不会被编译到App端。而在 非App端 , 会优先使用vue页面 。.nve文件的写法同.vue文件一样,只不过,.nvue文件中可以还使用一些weex提供的特有组件,比如<barcode>、<list>、<cell>、<refresh>等。

五、subNvue

subNvue ,是 vue 页面的原生子窗体,其会 把weex渲染的原生界面当做 vue 页面的子窗体覆盖在页面上 ,主要解决 运行在App端时 , 视图无法覆盖在<video>、<map>等组件上 的问题( 非App端可以通过z-index或者cover-view解决 ),subNvue的使用方式非常简单,只需要 新建一个.nvue文件 ,建议放在母页面目录中,但是 subNvue页面不需要注册到pages.json中 ,而是 在母页的"style"--> "app-plus" --> "subNVues"进?#20449;?#32622; ,因为subNvue主要解决App端层级覆盖问题,所以需要在"app-plus"下配置,需要注意的是 subNVues是一个数组 ,每个元素为一个原生子窗体,因为一个母页中可以包含多个原生子窗体,每个原生子窗体通过配置中的id进行区分。配置好subNvues后,对应的原生子窗体默认就会显示。

{
    "pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
        {
        "path" : "pages/video/video", // 母页面路径
        "style" : {
            "navigationBarTextStyle":"white",
            "app-plus": {
                "titleNView":false,
                "subNVues":[{  
                            "id": "test", // 唯一标识,母页面中可以通过这个id调用api获取到原生子窗体  
                            "path": "pages/video/subNVue/cover", // video母页面下原生子窗体页面路径  
                            // "type": "popup",  //这里不需要
                            "style": {  
                                "position": "absolute",  
                                // "dock":"right",
                                "width": "750rpx",  
                                "height": "150upx", // 需要设置合适的高度,否则可能出现无法点击原生子窗体下面的内容 
                                "background":"transparent" // 设置为透明,以便能看到原生子窗体下面的内容 ,如果有背景颜色,则全屏可见
                            }  
                 }]
            }
        }
    ]
}

pages.json文件?#20449;?#32622;好原生子窗体后,不需要向vue组件一样引入到母页中,直接就会出现在母页面上,具体位置根据subNVues中的配置而定。

六、优化自定义导航栏下拉刷新功能

前面说过,使用自定义导航栏需要隐藏掉默认导航栏和原生导航栏,但是会存在一个问题,就是页面下拉刷新会跟着上移到了最顶部,导致页面下拉刷新位置不正确,之前的方法是使用<scroll-view>方法进行模拟, 但是官方并不推荐该方法 ,我们可以通过原生子窗口实现,其实现方法非常简单,就是用原生子窗口占据原生导航栏的位置,其中关键的一步就是,在配置原生子窗体的时候, 需要将其type设置为navigationBar类型 ,该原生子窗体就会站住原生导航栏的位置,并且下拉刷新图标不会向上移,如:

{
    "pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
        {
        "path" : "pages/nav/nav",
        "style" : {
            "navigationBarTextStyle":"white",
            "navigationBarBackgroundColor":"#007AFF",
            "enablePullDownRefresh": true,
            "app-plus": {
                "titleNView": false,
                "subNVues": [
                    {
                        "id":"nav",
                        "path":"pages/nav/subNvue/nav",
                        "type":"navigationBar" // 设置为navigationBar类型才能让原生子窗体站住原生导航栏的位置
                    }
                ]
            }
        }
    },
    ]
}

pages/nav/subNvue/nav.nvue

<template>
    <div class="nav">
        <div class="status-bar"></div>
        <div class="nav-title">
            <div>我是导航栏</div>
        </div>
    </div>
</template>

<script>
    export default {
        
    }
</script>

<style scoped>
.nav { /*.nvue页面中的所有元素都是flex布局,不需要进行显示设定*/
    flex: 1; /*占满整个导航栏高度,当该原生子窗体页面被设置为navigationBar类型后,会自动给予该页面一个导航高度,占满即可*/
    background-color: #007AFF;
}
.status-bar { /*状态栏占位区,下面导航标题栏已经设置了44px高度,让状态栏占满剩余高度*/
    flex: 1; 
}
.nav-title {
    flex: 0;
    height: 44px; /*导航栏固定高?#20219;?4px*/
    background-color: #007AFF;
    justify-content: center;
    align-items: center;/*导航栏标题区垂直居中显示*/
}
</style>

七、实现抽屉效果

所谓抽屉效果就是,就是页面上触发?#25345;?#20107;件后,页面上方有一个页面从屏幕的一侧开始滑出覆盖到原来页面的上方,然后点击空?#29366;Γ?#35813;页面又可以收回去的效果。要实现这?#20013;?#26524;,我们也是需要利用原生子窗体,将抽屉页面做成一个原生子窗体覆盖在页面上方,其中关键的一步,就是 需要将其type设置为popup类型 , 设置为popup类型之后 , 该页面默认不会出现在母页面上 ,需要通过调用api才能让该抽屉页面显示出来。如:

{
    "pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
        {
        "path" : "pages/nav/nav",
        "style" : {
            "navigationBarTextStyle":"white",
            "navigationBarBackgroundColor":"#007AFF",
            "enablePullDownRefresh": true,
            "app-plus": {
                "titleNView": false,
                "subNVues": [
                    {
                        "id":"drawer",
                        "path":"pages/nav/subNvue/drawer",
                        "type":"popup",
                        "style": {
                            "width":"50%" // 只显示整个屏幕宽度的50%,高度默认为屏幕100%
                        }
                    }
                ]
            }
        }
    },
    ]
}

pages/nav/subNvue/nav.nvue 母页通过api控制原生子窗体?#21335;?#31034;和隐藏

<template>
    <view>
        母页面
        <button @click="showDrawer">显示抽屉</button>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                
            }
        },
        methods: {
            showDrawer() {
                uni.getSubNVueById('drawer').show("slide-in-left", 200); // 从屏幕左侧向右边滑入,耗时200ms
            }
        }
    }
</script>

同样的方式也可以实现页面中间显示弹出框效果,只需要改变原生子窗体的位置即可,即将其定位到正中间,如:

{
    "id":"drawer",
    "path":"pages/nav/subNvue/drawer",
    "type":"popup",
    "style": {
        "margin":"auto", // 居中显示
        "height":"50%",
        "width":"80%"
    }
}

鲜花
鲜花
鸡蛋
鸡蛋
分享至 : QQ空间
收藏
原作者: JS_Even_JS 来自: segmentfault
不朽的浪漫援彩金
江苏体彩网首页 3d组三遗漏周期 安徽十一选五开奖结果图 pc蛋蛋预测走势图 蛇怎么赚钱 广西十一选五手机 澳洲幸运10是不是真的 冠通棋冠通棋牌 体彩新疆十一选五开奖走势图 北京快乐8走势图彩经网 股票融资风险_杨方配资开户 云南十一选五任三遗漏 查一下17125规律走势图 炒股的技巧 河北11选5开奖结果走势图 双色球历史比较器