uni-app相关知识总结
一、默认导航栏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",96);">// 设置默认导航栏标题文字颜色及状态栏上文字颜色，仅支持black和white
"navigationBarBackgroundColor": "#4CD964",96);">// 设置默认导航栏背景颜色及状态栏背景颜色，仅支持十六进制颜色值
"navigationStyle": "default",96);">// 支持defaul和custom两种，设置custom(自定义)后，默认导航栏将消失，微信小程序上只保持右上角胶囊按钮
"backgroundColor":"#ADFF2F",96);">// 设置窗口背景颜色，开启下拉刷新之后，下拉后可见该背景颜色(黄色)，仅小程序端生效
"enablePullDownRefresh": true,96);">// 是否开启页面下拉刷新功能
// 上拉刷新不需要开启，页面提供了一个触底事件onReachBottom，只要页面存在滚动条，滚动条触底后就可以触发触底事件，从而进行下拉刷新
"onReachBottomDistance": 0,96);">// 当滚动条距离底部的距离为指定值的时候则判定为触底
"disableScroll": false,96);">// 页面能否滚动，如果为true则禁用页面滚动功能，及时页面设置的高度超过了屏幕高度也不会发生滚动，仅小程序端生效
"usingComponents": { // 配置是否使用小程序提供的自定义组件，这里的小程序组件不是.vue组件，而是小程序提供的原生组件，App端也支持
"custom": "/wxcomponents/custom/index"
},96);">// "backgroundTextStyle":"dark",96);">// 设置下拉 loading 的样式，仅支持dark和light,无明显用处
}
}
]
}
需要注意的就是usingComponents的配置，其配置的是使用?小程序提供的原生组件(如包含.wxml、.wxss、.js、.json的组件)?，而不是.vue组件。同时?状态栏上文字颜色仅支持black和white，即非黑即白，状态栏背景色同导航栏背景颜色 二、原生导航栏uni-app运行在app端的时候，还提供了原生导航栏，其在注册页面的时候，style还提供了一个?app-plus?属性用于?配置app端?页面窗口、导航栏样式的配置，导航栏的配置通过titleNView属性，如: 开头
"fontSize":"22px",0);">"color":"#FF9619",0);">"colorPressed":"#BBBBBB",0);">"select": false,96);">// 是否显示右侧向下箭头图标常用于城市选择
"float":"left" // 按钮放在导航栏左侧
},{
"favorite",0);">"ue653",0);">"#000000",0);">"right" // 按钮放在导航栏右侧
}
],0);">"searchInput": { // 是否在原生导航栏上添加搜索框，一旦添加搜索框，那么导航栏标题内容将无法显示，因为搜索框是放在标题的位置，对标题进行了替换
"align":"center",0);">"#F7F7F7",0);">"borderRadius":"4px",0);">"placeholder":"搜索",0);">"disabled": true
}
}
}
}
}
]
}
三、自定义导航栏要想自定义导航栏，我们必须先让默认导航栏或者原生导航栏隐藏，在小程序端可以通过?"navigationStyle":"custom"?隐藏，app端则可以通过?"titleNView": false?进行隐藏，如: 使用自定义导航栏导航后，由于默认导航栏和原生导航栏都消失了，所以原先导航栏的位置就被空出来了，我们可以?通过自定义一个导航视图组件占据原先导航栏的位置即可实现?，但是下拉刷新会有问题，因为页面的下拉刷新是从顶部开始的，之前?有默认导航和原生导航的时候?，?页面的顶部就是导航栏底部?，但是默认导航和原生导航隐藏后，?顶部就变成了原先导航栏的顶部了?，所以?页面下拉刷新的位置向上移了?，使用自定义导航栏后最好不要在页面中使用下拉刷新功能了。如果非要使用下拉刷新功能的话，我们可以通过<scroll-view>组件来模拟下拉刷新。即?监听<scroll-view>组件的@scrolltoupper事件判断是否到达顶部，然后监听@scroll事件，判断下拉的位置，然后动态改变下拉刷新的样式、动画?从而模拟出下拉刷新效果。
|
