uniapp 设置导航栏（NavigationBar）

uniapp 设置导航栏（NavigationBar）

 1 <template>
 2     <view>
 3         <button type="primary" @click="setTitle">设置标题</button>
 4         <button type="primary" @click="setColor">设置颜色（关闭加载条）</button>
 5     </view>
 6 </template>
 7 
 8 <script>
 9     export default {
10         data() {
11             return {
12                 
13             }
14         },
15         methods: {
16             // 对标题内容进行设置
17             setTitle(){
18                 uni.setNavigationBarTitle({
19                     title: '设置的新的标题'
20                 });
21             },
22             
23             // 对颜色和进场动画进行设置
24             setColor(){
25                 uni.setNavigationBarColor({
26                     // 字体颜色 仅支持 #ffffff 和 #000000
27                     frontColor: '#000000',
28                     //     背景颜色值，有效值为十六进制颜色
29                     backgroundColor: '#ff0000',
30                     // animation 结构
31                     animation: {
32                         // duration: 动画时间
33                         duration: 2000,
34                         // timingFunc:动画效果
35                             // linear    动画从头到尾的速度是相同的。
36                             // easeIn    动画以低速开始
37                             // easeOut    动画以低速结束。
38                             // easeInOut    动画以低速开始和结束
39                         timingFunc: 'easeIn'
40                     }
41                 });
42                 
43             // 关闭加载条
44             uni.hideNavigationBarLoading() 
45             },
46             onLoad(){
47                 // 显示加载条
48                 uni.showNavigationBarLoading()
49             }
50         }
51     }
52 </script>
53 
54 <style>
55 
56 </style>

效果图

转载于:https://www.cnblogs.com/wo1ow1ow1/p/11137226.html