uni-app相关知识总结

2019-10-12 admin

一、默认导航栏

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

{
    "pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
        {
            "path": "pages/index/index",
            "style": { // 对窗口及其页面表现进行配置
                "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,无明显用处
            }
        }
    ]
}

默认导航栏style配置样式

需要注意的就是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": { // 对窗口及其页面表现进行配置
                "app-plus": {
                    // "titleNView": false // 禁用原生导航栏,即当前页面不显示原生导航栏
                    "scrollIndicator":"none", // 设置是否显示页面滚动条,设置为none,滚动时看不到右侧的滚动条
                    "pullToRefresh": {
                        "style":"default" // 设置下拉刷新样式,只支持default和circle
                    },
                    "bounce":"none", // 设置页面回弹效果,none关闭回弹效果
                    // "titleNView": { // 空对象不会对默认导航栏进行替换,必须进行相关配置才会对默认导航栏进行修改

                    // },
                    "titleNView": { // 对原生导航栏进行配置
                        "titleText": "原生导航栏标题内容", // 标题内容与搜索框只能显示一个
                        "buttons": [ // 在原生导航栏上添加按钮
                            {
                                // "type":"share", // 使用 type 值设置按钮的样式时,会忽略 fontSrc 和 text 属性。
                                "fontSrc":"./static/font/icon.ttf", // 使用字体图标
                                "text": "\ue609", // 使用字体图标时 unicode 字符表示必须 '\u' 开头
                                "fontSize":"22px",
                                "color":"#FF9619", 
                                "colorPressed":"#BBBBBB",
                                "select": false, // 是否显示右侧向下箭头图标常用于城市选择
                                "float":"left" // 按钮放在导航栏左侧
                            },
                            {
                                // "type":"favorite", // 使用 type 值设置按钮的样式时,会忽略 fontSrc 和 text 属性。
                                "fontSrc":"./static/font/icon.ttf",
                                "text": "\ue653", // 使用字体图标时 unicode 字符表示必须 '\u' 开头
                                "fontSize":"22px",
                                "color":"#000000",
                                "colorPressed":"#BBBBBB",
                                "select": false, // 是否显示右侧向下箭头图标常用于城市选择
                                "float":"right" // 按钮放在导航栏右侧
                            }
                        ],
                        "searchInput": { // 是否在原生导航栏上添加搜索框,一旦添加搜索框,那么导航栏标题内容将无法显示,因为搜索框是放在标题的位置,对标题进行了替换
                            "align":"center",
                            "backgroundColor":"#F7F7F7",
                            "borderRadius":"4px",
                            "placeholder":"搜索",
                            "disabled": true
                        }
                    }
                }
            }
        }
    ]
}

原生导航栏app-plus配置样式

三、自定义导航栏

要想自定义导航栏,我们必须先让默认导航栏或者原生导航栏隐藏,在小程序端可以通过**“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端原生导航栏
                }
            }
        }
     ]
}

使用自定义导航栏导航后,由于默认导航栏和原生导航栏都消失了,所以原先导航栏的位置就被空出来了,我们可以通过自定义一个导航视图组件占据原先导航栏的位置即可实现,但是下拉刷新会有问题,因为页面的下拉刷新是从顶部开始的,之前有默认导航和原生导航的时候页面的顶部就是导航栏底部,但是默认导航和原生导航隐藏后,顶部就变成了原先导航栏的顶部了,所以页面下拉刷新的位置向上移了,使用自定义导航栏后最好不要在页面中使用下拉刷新功能了。如果非要使用下拉刷新功能的话,我们可以通过<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端内置 weex 渲染引擎,提供了原生渲染能力。uni-app默认是处于uni-app的渲染模式,即小程序渲染模式,如果要启用纯原生渲染模式,即weex渲染模式,那么需要在manifest.json源码视图的**“app-plus"下配置"renderer”:“native”**,开启原生渲染模式后,pages.json注册的vue页面将被忽略,启动纯原生渲染,可以减少App端的包体积、加快App启动速度。因为webview渲染模式的相关模块将被移除了。

// manifest.json    
{    
    // ...    
     /* App平台特有配置 */    
    "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"进行配置,因为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文件中配置好原生子窗体后,不需要向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; /*导航栏固定高度为44px*/
    background-color: #007AFF;
    justify-content: center;
    align-items: center;/*导航栏标题区垂直居中显示*/
}
</style>

七、实现抽屉效果

所谓抽屉效果就是,就是页面上触发某种事件后,页面上方有一个页面从屏幕的一侧开始滑出覆盖到原来页面的上方,然后点击空白处,该页面又可以收回去的效果。要实现这种效果,我们也是需要利用原生子窗体,将抽屉页面做成一个原生子窗体覆盖在页面上方,其中关键的一步,就是需要将其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控制原生子窗体的显示和隐藏

<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%"
    }
}

中间弹出框效果

[转载]原文链接:https://segmentfault.com/a/1190000020654651

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-77166.html

文章标题:uni-app相关知识总结

相关文章
Dcloud,hbuilderX开发uni-app第一天踩坑记录
其实大部分坑在 uni-app在官网都有介绍 具体位置在 在 uni-app 中使用 Vue.js 模块 官方文档中总结了很多坑,但我只说一下我今天遇到的: 解决办法:从后台获取数据后始用js对数据进行处理, 例子: 始用过滤器时: &lt...
2018-08-27
Clappr——开源的Web视频播放器
巴西著名的门户网站 Globo.com(视频播放器),使用的是基于OSMF的Flash组件。在最近几年的发展过程中,Globo为视频平台陆续添加了不少额外功能,例如: 字幕,广告,画中画播放等。然而,由于缺乏针对视频平台进行维护的专门小组,...
2016-01-13
优化RequireJS项目的相关技巧总结
本文将演示如何合并与压缩一个基于RequireJS的项目。本文中将用到苦干个工具,这其中就包括Node.js。 因此,如果你手头上还没有Node.js可以点击此处下载一个。 动机 关于RequireJS已经有很多文章介绍过了。这个工具可以将...
2017-03-27
JavaScript数据类型判定的总结笔记
用typeof 来检测数据类型 Javascript自带两套类型:基本数据类型(undefined,string,null,boolean,function,object)和对象类型。 但是如果尝试用typeof 来检测对象类型都一律返回&...
2017-03-27
jQuery使用append在html元素后同时添加多项内容的方法
本文实例讲述了jQuery使用append在html元素后同时添加多项内容的方法。分享给大家供大家参考。具体分析如下: 下面的代码可以同时在文本段落后添加多项内容 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt...
2017-03-22
详解JavaScript中数组的相关知识
创建数组 js中数组的声明可以有如下几种方式: var arr = []; &#x2F;&#x2F; 简写模式 var arr = new Array(); &#x2F;&#x2F; new一个array对象 var arr = new ...
2017-03-27
JAVA四种基本排序方法实例总结
本文实例讲述了JAVA四种基本排序方法。分享给大家供大家参考。具体如下: JAVA四种基本排序,包括冒泡法,插入法,选择法,SHELL排序法.其中选择法是冒泡法的改进,SHELL排序法是 插入法的改进.所以从根本上来说可以归纳为两种不同的排...
2017-03-27
对JavaScript的全文搜索实现相关度评分的功能的方法
全文搜索,与机器学习领域其他大多数问题不同,是一个 Web 程序员在日常工作中经常遇到的问题。客户可能要求你在某个地方提供一个搜索框,然后你会写一个类似 WHERE title LIKE %:query% 的 SQL 语句实现搜索功能。一开...
2017-03-24
简述AngularJS相关的一些编程思想
在过去的几个月里,我一直遨游于Angular的世界。如今回想起来,很难想象在没有类似于Angular.js, Backbone.js以及其伙伴Underscore.js这些数据绑定框架下我每天如何去编写一个大型前端应用。我不敢相信我已经用它...
2017-03-24
JSON相关知识汇总
JSON:JavaScript 对象表示法(JavaScript Object Notation) JSON 语法规则 数据在名称/值对中 数据由逗号分隔 花括号保存对象 方括号保存数组 JSON有6种类型的值: 对象、数组、字符串、数字、...
2017-03-25
回到顶部