首页 > 移动平台 > 详细

uniapp 设置导航栏(NavigationBar)

时间:2019-07-05 12:29:05      阅读:1360      评论:0      收藏:0      [点我收藏+]

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>

效果图

技术分享图片

技术分享图片

uniapp 设置导航栏(NavigationBar)

原文:https://www.cnblogs.com/wo1ow1ow1/p/11137226.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!