当前位置:网站首页>uniapp页面标题显示效果
uniapp页面标题显示效果
2022-07-29 05:10:00 【薇森】
一、标题显示与不显示
页面默认是显示标题的,不显示标题的话,只需添加 " navigationStyle":"custom "
"globalStyle": {
// 页面顶部标题显示
// "navigationStyle":"custom",
"navigationBarTextStyle": "white",
"navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#ff0000",
"backgroundColor": "#0055ff"
}
二、标题动态改变显示
需要动态改变页面的标题,只需添加以下方法,变量title里的内容可以改为后端取来的动态变量,从而实现标题的动态改变。
uni.setNavigationBarTitle({
title:"uniapp学习"
});
三、标题透明渐变显示效果
实现页面上滑动一定距离后,页面标题渐变显示的效果,只需在pages.json文件中,做如下的配置:
"pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "标题显示",
"app-plus":{
"bounce":"none" ,
"titleNView": {
"backgroundColor": "#ff0000",//显现的背景色
"type": "transparent" //透明渐变导航栏
}
}
}
}
],
效果如下:
边栏推荐
- Provincial and urban three-level linkage (simple and perfect)
- 游戏行业弹性计算最佳实践
- 关于局部变量
- 数据库操作 Day 6
- Cryengine5 shader debugging
- Wechat applet video upload component is directly uploaded to Alibaba cloud OSS
- The function of using wechat applet to scan code to log in to the PC web of the system
- Three handshakes and four waves for the interview summary
- 全局components组件注册
- C language file operation
猜你喜欢
Flask 报错 RuntimeError: The session is unavailable because no secret key was set.
ClickHouse学习(十)监控运行指标
一维数组练习
365 day challenge leetcode1000 question - distance between bus stops on day 038 + time-based key value storage + array closest to the target value after transforming the array and + maximum value at t
Day 1
【JS题解】牛客网JS篇1-10题
[event preview] cloud digital factory and digital transformation and innovation forum for small and medium-sized enterprises
eggjs 创建应用知识点
Clickhouse learning (V) cluster operation
Detailed explanation of serial port communication
随机推荐
Together with digital people, digital space and XR platform, Alibaba cloud and its partners jointly build a "new vision"
实现简单的数据库查询(不完整)
C language file operation
Clickhouse learning (VII) table query optimization
【无标题】
【C语言系列】— 一道递归小题目
ClickHouse学习(一)ClickHouse?
Clickhouse learning (VIII) materialized view
ClickHouse学习(七)表查询优化
抢先预约 | 阿里云无影云应用线上发布会预约开启
C language first level pointer
C language one-dimensional array
Detailed explanation of serial port communication
Day 5
Cryengine Technology
JS deep copy - Notes
一维数组练习
H5语义化标签
paddle.fluild常量计算报错‘NoneType‘ object has no attribute ‘get_fetch_list‘
ClickHouse学习(八)物化视图