移动开发平台 mPaaS 导航栏

By | 2021年4月23日
0 Comment

my.getTitleColor

该接口用于获取导航栏背景色。

版本要求：基础库 1.13.0 或更高版本，若版本较低，建议做 兼容处理。

代码示例

  
    
   
  1. // API-DEMO page/API/get-title-color/get-title-color.json
    2. 
   
  2. {
    3. 
   
  3.  "defaultTitle": "获取导航栏背景颜色"
    4. 
   
  4. }
    5. 
  
  
    
   
  1. <!-- API-DEMO page/API/get-title-color/get-title-color.axml-->
    2. 
   
  2. <view>
    3. 
   
  3.  <view class="page-section-demo">
    4. 
   
  4.  <text>目前导航栏的背景色:
    5. 
   
  5.  </text>
    6. 
   
  6.  <input type="text" disabled="{{true}}" value="{{titleColor.color}}">
    7. 
   
  7.  </input>
    8. 
   
  8.  </view>
    9. 
   
  9.  <view class="page-section-btns">
    10. 
   
  10.  <view onTap="getTitleColor">获取导航栏背景颜色
    11. 
   
  11.  </view>
    12. 
   
  12.  </view>
    13. 
   
  13. </view>
    14. 
  
  
    
   
  1. // API-DEMO page/API/get-title-color/get-title-color.js
    2. 
   
  2. Page({
    3. 
   
  3.  data: {
    4. 
   
  4.  titleColor: {},
    5. 
   
  5.  },
    6. 
   
  6.  getTitleColor() {
    7. 
   
  7.  my.getTitleColor({
    8. 
   
  8.  success: (res) => {
    9. 
   
  9.  this.setData({
    10. 
   
  10.  titleColor: res
    11. 
   
  11.  })
    12. 
   
  12.  }
    13. 
   
  13.  })
    14. 
   
  14.  }
    15. 
   
  15. });
    16.

入参

Object 类型，属性如下：

属性 类型 必填 描述
success Function 否 调用成功的回调函数。
fail Function 否 调用失败的回调函数。
complete Function 否 调用结束的回调函数（调用成功、失败都会执行）。

success 回调函数

Object 类型，属性如下：

属性 类型 描述
color HexColor 返回当前导航栏背景色，ARGB 格式的十六进制颜色值，如 #323239FF。

常见问题

  • Q：可以设置小程序右上角 分享与收藏 的颜色吗？
    A：该颜色是默认的，无法设置。

my.hideBackHome

该接口用于隐藏标题栏上的返回首页图标（如下图所示）和右上角通用菜单中的返回首页功能。

版本要求：基础库 1.16.4 或更高版本，若版本较低，建议做 兼容处理。

说明：

  • 若您在启动小程序时，若进入的页面不是小程序首页，则会在左上角出现返回首页图标。
  • 如果 app.json 中配置了 tabbar 跳转 pages/index/index 时，不会出现 返回首页 功能。

代码示例

  
    
   
  1. //.js
    2. 
   
  2. Page({
    3. 
   
  3.  onReady() {
    4. 
   
  4.  if (my.canIUse('hideBackHome')) {
    5. 
   
  5.  my.hideBackHome();
    6. 
   
  6.  }
    7. 
   
  7.  },
    8. 
   
  8. });
    9. 
  
  
    
   
  1. //.js
    2. 
   
  2. onLoad(){
    3. 
   
  3.  my.reLaunch()({
    4. 
   
  4.  url:'../swiper/swiper'// 在页面中添加的非首页
    5. 
   
  5.  })
    6. 
   
    7. 
   
  7.  setTimeout(() => {
    8. 
   
  8.  //5秒后隐藏返回首页按钮
    9. 
   
  9.  my.hideBackHome()
    10. 
   
  10.  }, 5000)
    11. 
   
  11. }
    12.

my.hideNavigationBarLoading

该接口用于在当前页面隐藏导航条的加载动画。

代码示例

  
    
   
  1. // API-DEMO page/API/navigation-bar-loading/navigation-bar-loading.json
    2. 
   
  2. {
    3. 
   
  3.  "defaultTitle": "标题栏加载动画"
    4. 
   
  4. }
    5. 
  
  
    
   
  1. <!-- API-DEMO page/API/navigation-bar-loading/navigation-bar-loading.axml-->
    2. 
   
  2. <view class="page">
    3. 
   
  3.  <view class="page-section">
    4. 
   
  4.  <button type="primary" onTap="showNavigationBarLoading">显示加载动画</button>
    5. 
   
  5.  <button onTap="hideNavigationBarLoading">隐藏加载动画</button>
    6. 
   
  6.  </view>
    7. 
   
  7. </view>
    8. 
  
  
    
   
  1. // API-DEMO page/API/navigation-bar-loading/navigation-bar-loading.js
    2. 
   
  2. Page({
    3. 
   
  3.  showNavigationBarLoading() {
    4. 
   
  4.  my.showNavigationBarLoading()
    5. 
   
  5.  },
    6. 
   
  6.  hideNavigationBarLoading() {
    7. 
   
  7.  my.hideNavigationBarLoading()
    8. 
   
  8.  }
    9. 
   
  9. })
    10. 
  
  
    
   
  1. /* API-DEMO page/API/navigation-bar-loading/navigation-bar-loading.acss */
    2. 
   
  2. button + button {
    3. 
   
  3.  margin-top: 20rpx;
    4. 
   
  4. }
    5.

my.showNavigationBarLoading

该接口用于在当前页面显示导航条的加载动画。

效果示例

hide&show

代码示例

  
    
   
  1. // API-DEMO page/API/navigation-bar-loading/navigation-bar-loading.json
    2. 
   
  2. {
    3. 
   
  3.  "defaultTitle": "标题栏加载动画"
    4. 
   
  4. }
    5. 
  
  
    
   
  1. <!-- API-DEMO page/API/navigation-bar-loading/navigation-bar-loading.axml-->
    2. 
   
  2. <view class="page">
    3. 
   
  3.  <view class="page-section">
    4. 
   
  4.  <button type="primary" onTap="showNavigationBarLoading">显示加载动画</button>
    5. 
   
  5.  <button onTap="hideNavigationBarLoading">隐藏加载动画</button>
    6. 
   
  6.  </view>
    7. 
   
  7. </view>
    8. 
  
  
    
   
  1. // API-DEMO page/API/navigation-bar-loading/navigation-bar-loading.js
    2. 
   
  2. Page({
    3. 
   
  3.  showNavigationBarLoading() {
    4. 
   
  4.  my.showNavigationBarLoading()
    5. 
   
  5.  },
    6. 
   
  6.  hideNavigationBarLoading() {
    7. 
   
  7.  my.hideNavigationBarLoading()
    8. 
   
  8.  }
    9. 
   
  9. })
    10. 
  
  
    
   
  1. /* API-DEMO page/API/navigation-bar-loading/navigation-bar-loading.acss */
    2. 
   
  2. button + button {
    3. 
   
  3.  margin-top: 20rpx;
    4. 
   
  4. }
    5.

my.setNavigationBar

该接口用于设置导航栏样式：导航栏标题、导航栏背景色、导航栏底部边框颜色、导航栏左上角 logo 图片。

说明：

  • 导航栏左上角 logo 图片支持 gif 格式，必须使用 HTTPS 图片链接。
  • 若设置了导航栏背景色 backgroundColor，则导航栏底部边颜色 borderBottomColor 不会生效，默认会和 backgroundColor 颜色一样。
  • 导航栏背景色不支持渐变色。

效果示例

navigation bar

代码示例

  
    
   
  1. // API-DEMO page/API/set-navigation-bar/set-navigation-bar.json
    2. 
   
  2. {
    3. 
   
  3.  "defaultTitle": "设置页面导航栏"
    4. 
   
  4. }
    5. 
  
  
    
   
  1. <!-- API-DEMO page/API/set-navigation-bar/set-navigation-bar.axml-->
    2. 
   
  2. <view class="page">
    3. 
   
  3.  <view class="page-description">设置导航栏 API</view>
    4. 
   
  4.  <form onSubmit="setNavigationBar" style="align-self:stretch">
    5. 
   
  5.  <view class="page-section">
    6. 
   
  6.  <view class="page-section-demo">
    7. 
   
  7.  <input class="page-body-form-value" type="text" placeholder="标题" name="title"></input>
    8. 
   
  8.  <input class="page-body-form-value" type="text" placeholder="导航栏背景色" name="backgroundColor"></input>
    9. 
   
  9.  <input class="page-body-form-value" type="text" placeholder="导航栏底部边框颜色" name="borderBottomColor"></input>
    10. 
   
  10.  <input class="page-body-form-value" type="text" placeholder="导航栏图片地址" name="image"></input>
    11. 
   
  11.  </view>
    12. 
   
  12.  <view class="page-section-btns">
    13. 
   
  13.  <button type="primary" size="mini" formType="submit">设置</button>
    14. 
   
  14.  <button type="primary" size="mini" onTap="resetNavigationBar">重置</button>
    15. 
   
  15.  </view>
    16. 
   
  16.  </view>
    17. 
   
  17.  </form>
    18. 
   
  18.  <view class="tips">
    19. 
   
  19.  tips:
    20. 
   
  20.  <view class="item">1. image：图片链接地址，必须是 HTTPS 地址，请使用一张3x高清图。若设置了 image，则 title 参数失效</view>
    21. 
   
  21.  <view class="item">2. backgroundColor：导航栏背景色，支持 16 进制颜色值</view>
    22. 
   
  22.  <view class="item">3. borderBottomColor：导航栏底部边框颜色，支持 16 进制颜色值。若设置了 backgroundColor，borderBottomColor 会不生效，默认会和 backgroundColor 颜色一样。</view>
    23. 
   
  23.  </view>
    24. 
   
  24. </view>
    25. 
  
  
    
   
  1. // API-DEMO page/API/set-navigation-bar/set-navigation-bar.js
    2. 
   
  2. Page({
    3. 
   
  3.  setNavigationBar(e) {
    4. 
   
  4.  var title = e.detail.value.title;
    5. 
   
  5.  var backgroundColor = e.detail.value.backgroundColor;
    6. 
   
  6.  var borderBottomColor = e.detail.value.borderBottomColor;
    7. 
   
  7.  var image = e.detail.value.image;
    8. 
   
  8.  console.log(title)
    9. 
   
  9.  my.setNavigationBar({
    10. 
   
  10.  title,
    11. 
   
  11.  backgroundColor,
    12. 
   
  12.  borderBottomColor,
    13. 
   
  13.  image,
    14. 
   
  14.  })
    15. 
   
  15.  },
    16. 
   
  16.  resetNavigationBar() {
    17. 
   
  17.  my.setNavigationBar({
    18. 
   
  18.  reset: true,
    19. 
   
  19.  title: '重置导航栏样式',
    20. 
   
  20.  });
    21. 
   
  21.  }
    22. 
   
  22. })
    23. 
  
  
    
   
  1. /* API-DEMO page/API/set-navigation-bar/set-navigation-bar.acss */
    2. 
   
  2. .page-section-btns {
    3. 
   
  3.  padding: 26rpx;
    4. 
   
  4. }
    5.

入参

入参为 Object 类型，属性如下：

属性 类型 必填 描述
title String 否 导航栏标题。
image String 否 图片链接地址（支持 gif 格式图片），必须是 HTTPS 地址，请使用 iOS @3x 分辨率标准的高清图片。若设置了 image 则 title 参数失效。
backgroundColor String 否 导航栏背景色，支持十六进制颜色值。
borderBottomColor String 否 导航栏底部边框颜色，支持十六进制颜色值。若设置了 backgroundColor，则 borderBottomColor 不会生效，默认会和 backgroundColor 颜色一样。
reset Boolean 否 是否重置导航栏为应用默认配色，默认为 false。
success Function 否 调用成功的回调函数。
fail Function 否 调用失败的回调函数。
complete Function 否 调用结束的回调函数（调用成功、失败都会执行）。

常见问题

  • Q：可以设置小程序右上角 分享与收藏 的颜色吗？
    A：该颜色是默认的，无法设置。

相关信息

更多关于 iOS @3x 分辨率标准的信息，参见 Image Size and Resolution。

导航栏常见问题

  • Q：可以设置小程序右上角 分享与收藏 的颜色吗？
    A：该颜色是默认的，无法设置。

  • Q：小程序胶囊按钮内的菜单页是否可以支持自定义修改？
    1
    A：目前小程序胶囊按钮内的菜单页暂不支持自定义修改。

  • Q：导航栏的字体颜色可以自定义修改吗？
    A：导航栏字体颜色无法自定义修改，但是可以通过修改背景颜色，自动调整变成黑色或白色的导航栏字体颜色。

请关注公众号获取更多资料

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注