设置导航条API

本文编辑: 心城 心城浏览 4451 版权所有,严禁转载

接口说明:

这是对页面的标题的一些基本的设置API

接口 说明
wx.setNavigationBarTitle() 动态设置当前页面的标题。
wx.showNavigationBarLoading() 在当前页面显示导航条加载动画
wx.hideNavigationBarLoading() 隐藏导航条加载动画

接口用法:

三种效果一起的效果图
【图片】

【代码】

wxml

<!--index.wxml-->
<view class="container">
    <button bindtap="updadateTitle">设置标题</button>
    <button bindtap="showLoaddingTitle">显示动态加载动画</button>
    <button bindtap="hiddeLoaddingTitle">隐藏动态加载动画</button>
</view>

js

Page({
  data:{
  },
  onLoad:function(options){

  },
  onReady:function(){
    // 生命周期函数--监听页面初次渲染完成
  },
  onShow:function(){
    // 生命周期函数--监听页面显示
  },
  onHide:function(){
    // 生命周期函数--监听页面隐藏
  },
  onUnload:function(){
    // 生命周期函数--监听页面卸载
  },
  onPullDownRefresh: function() {
    // 页面相关事件处理函数--监听用户下拉动作
  },
  onReachBottom: function() {
    // 页面上拉触底事件的处理函数
  },updadateTitle:function(){
  wx.setNavigationBarTitle({
      title: '我的标题',
      success:function(){
        console.info("成功");
      }
    })
  },
  showLoaddingTitle:function(){
    wx.showNavigationBarLoading();
  },
  hiddeLoaddingTitle:function(){
    wx.hideNavigationBarLoading();
  }
})

主要方法:

【wx.setNavigationBarTitle()】:【设置页面的提交方法】

【方法内容描述】

参数 类型 必填 描述
title String 要设置的方法名
success Function 接口调用成功的回调函数
fail Function 接口调用失败的回调函数
complete Function 接口调用结束的回调函数(调用成功、失败都会执行)

调用代码:

wx.setNavigationBarTitle({
  title: '当前页面'
})

【wx.showNavigationBarLoading()】:【在当前页面显示导航条加载动画】

调用代码:

 wx.showNavigationBarLoading();

【wx.hideNavigationBarLoading()】:【隐藏导航条加载动画】

调用代码:

 wx.showNavigationBarLoading();
如有技术问题或对本文有反馈,请加入QQ群:
微信小程序实战5营: 微信小程序Club实战5营