当前位置:网站首页>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" //透明渐变导航栏
}
}
}
}
],
效果如下:
边栏推荐
猜你喜欢
ClickHouse学习(八)物化视图
365 day challenge leetcode 1000 questions - day 039 full binary tree inserter + find peak II + snapshot array
Flask 报错 RuntimeError: The session is unavailable because no secret key was set.
Alibaba cloud architect details nine trends in the game industry
Together with digital people, digital space and XR platform, Alibaba cloud and its partners jointly build a "new vision"
【C语言系列】—深度解剖数据在内存中的存储(一) 暑假开篇
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
【剑指offer】— 详解库函数atoi以及模拟实现atoi函数
重定向和文件
AR虚拟增强与现实
随机推荐
【C语言系列】—三种方法模拟实现strlen库函数的方法
Day 5
ClickHouse学习(一)ClickHouse?
Summary of the first week
Preemptive appointment | Alibaba cloud shadowless cloud application online conference appointment opens
Cryengine5 shader debugging
H5语义化标签
ClickHouse学习(十一)clickhouseAPI操作
ClickHouse学习(七)表查询优化
Clickhouse learning (VI) grammar optimization
重绘与回流的关系
link与@import导入外部样式的区别
ClickHouse学习(二)ClickHouse单机安装
ClickHouse学习(八)物化视图
【活动预告】云上数字工厂与中小企业数字化转型创新论坛
数组学习之入门简单题 两数之和
个人学习笔记
Camunda 1. Camunda workflow - Introduction
Global components component registration
C语言 一级指针