小程序API（1.18）利用API函数设置导航栏标题、颜色和 动画效果，显示和隐藏导航栏加载动画

 

 

<!--pages/index.wxml-->
<view class='box'>
  <view class='title'>导航条</view>
  <input placeholder='请输入导航条新标题' bindblur='inputTitle'></input>
  <view class='btnLayout'>
    <button type='primary' bindtap='setNavigationBarTitle'>设置标题</button>
    <button type='primary' bindtap='setNavigationBarColor'>设置颜色</button>
  </view>
  <view class='btnLayout'>
    <button type='primary' bindtap='showNavigationBarLoading'>加载动画</button>
    <button type='primary' bindtap='hideNavigationBarLoding'>停止动画</button>
  </view>
</view>

/* pages/index.wxss */

input {
  border-bottom: 1px solid blue; /* 设置input组件下边框线1px，实线、蓝色 */
  margin: 30rpx 20rpx; /* 设置上下外边距30rpx，左右外边距20rpx */
}

.btnLayout {
  /* 设置button组件的布局 */
  display: flex; /* 设置布局方式为flex */
  flex-direction: row; /* 设置水平方向为主轴方向 */
  justify-content: space-around; /* 设置组件沿主轴方向平均分布，两边留有一半的间隔空间 */
  margin-bottom: 20rpx; /* 设置下边距为20rpx */
}

button {
  width: 45%; /* 组件宽度为45% */
}

// pages/index.js
Page({
  data: {
    title: '' //初始化title
  },
  inputTitle: function(e) {
    this.setData({
      title: e.detail.value //将input组件的value值赋值给title
    })
  },
  setNavigationBarTitle: function() {
    let title = this.data.title;
    wx.setNavigationBarTitle({ //设置导航栏标题文本
      title: title //将局部变量title赋值给函数参数title（导航条标题，api函数对象参数的属性）
    })
  },
  
  setNavigationBarColor: function() {
    wx.setNavigationBarColor({ //设置导航条颜色，一个对象类型参数，三个属性
      frontColor: '#ffffff', //前景色
      backgroundColor: '#ff0000', //背景色
      animation: {
        duration: 4000, //动画时长
        timingFunc: 'easeInOut' //动画方式，慢进慢退
      }
    })
  },
  showNavigationBarLoading: function() {
    wx.showNavigationBarLoading() //显示加载动画
  },
  hideNavigationBarLoding: function() {
    wx.hideNavigationBarLoading() //隐藏加载动画
  }
})

设置导航栏标题

　　wx.setNavigationBarTitle(Object object) 用于动态设置当前页面导航栏标题文字。参 数属性除了success、fail和complete外，还包 含了页面标题title。

设置导航栏颜色和动画

　　wx.setNavigationBarColor(Object object)用于设置当前 页面导航栏颜色和动画效果。其参数属性除success、fail和 complete外，还包含：

　　

　　animation 的属性

　　　　

显示导航栏加载动画

　　wx.showNavigationBarLoading(Object object)用于 在当前页面显示导航条加载动画。参数属性只包含 success、fail、complete三个回调函数。

隐藏导航栏加载动画

　　wx.hideNavigationBarLoading(Object object)用于隐 藏导航栏加载动画。参数属性只包含success、fail、 complete三个回调函数。