微信小程序开发-导航条

最新推荐文章于 2024-09-13 15:05:17 发布

原创最新推荐文章于 2024-09-13 15:05:17 发布 · 645 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序

微信小程序专栏收录该内容

14 篇文章

订阅专栏

本文介绍了微信小程序中导航条的设置方法，包括在app.js全局设置、页面json单独设置和使用API动态设置。特别提到API动态设置适用于多步注册和查看详细页，并讨论了动态设置置顶栏文字内容的特性和限制。

在小程序开发中，导航条的设置方法有几种。

One：

在app.js的window中设置，如果其他地方没有单独设置的话，这里的设置会运用到所有页面。

"window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff", 
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black",  
    "backgroundColor":"#f3f5f7",      
    "enablePullDownRefresh":true,    
    "onReachBottomDistance":50       
  }

Two：

每个页面的json当中单独设置，只能应用到本页面。

{
  "navigationBarBackgroundColor":"#ffff00",      
  "navigationBarTextStyle":"black",             
  "navigationBarTitleText":"api demo",           
  "backgroundColor":"#ccc",                  
  "backgroundTextStyle":"light",                 
  "enablePullDownRefresh":true,                 
  "disableScroll":false,                         
  "onReachBottomDistance":50                     
}

Three：

API动态设置，多应用于多步注册、查看详细页等情况。

wx.setNavigationBarTitle({       //动态设置当前页面的标题
      title: '改变后的title',
      success:function(){
        console.log("改变后的title");
      }
    })
    wx.showNavigationBarLoading()   //在当前页面显示导航条加载动画
    wx.hideNavigationBarLoading()   //隐藏导航条加载动画
    wx.setNavigationBarColor({      //动态设置当前页面的字体颜色、背景色和动画
      frontColor: '#ffffff',
      backgroundColor: '#ff0000',
      animation: {
        duration: 400,
        timingFunc: 'easeIn'
      }
    })

还有一个就是设置置顶信息API：

动态设置置顶栏文字内容，只有当前小程序被置顶时能生效，如果当前小程序没有被置顶，也能调用成功，但是不会立即生效，只有在用户将这个小程序置顶后才换上设置的文字内容。注意：调用成功后，需间隔 5s 才能再次调用此接口，如果在 5s 内再次调用此接口，会回调 fail，errMsg："setTopBarText: fail invoke too frequently"

wx.setTopBarText({
  text: 'hello, world!'
})