博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
微信小程序 navigation API
阅读量:4084 次
发布时间:2019-05-25

本文共 1875 字,大约阅读时间需要 6 分钟。

目录

这里写图片描述

演示效果也看到了小程序也就提供这几个处理导航控制。值得注意的是只能同时导航五个页面

主要属性:

导航条一些方法

wx.setNavigationBarTitle(object) 设置导航条的Title

导航标题可以通过三种方式设置,第一种是通过全局配置名字统一,第二种就是在page中新建个json文件配置它会覆盖全局配置的title,第三种就是通过API设置。

  • 这里写图片描述

wx.showNavigationBarLoading()设置在导航条上显示Loading加载状态

wx.hideNavigationBarLoading() 隐藏Loading加载状态

导航视图的一些方法

wx.navigateTo() 保留当前页面进行跳转,传参时就像拼接GET参数一样即可,代码中会有体现

  • 这里写图片描述

wx.redirectTo() 销毁当前页面进行跳转,

  • 这里写图片描述

wx.navigateBack() 返回上一个页面

wxml

   
1
2
3
4
5
6
1
2
3
4
5
6

json

{    "navigationBarTitleText": "我是通过json配置的title"}   
1
2
3
1
2
3

js

//导入另一个页面var file = '../audio/audio'Page({  data:{    text:"Page navigation"  },  onLoad:function(options){    // 页面初始化 options为页面跳转所带来的参数  },  /**   * 设置NavigationTitle   */  setNavigationBarTitle: function() {    wx.setNavigationBarTitle({      title: '我是通过API设置的NavigationBarTitle'    })  },  /**   * 设置加载状态   */  showNavigationBarLoading: function() {    wx.showNavigationBarLoading()  },  /**   * 隐藏加载状态   */  hiddenNavigationBarLoading: function() {    wx.hideNavigationBarLoading()  },  /**   * 保留当前Page跳转   */  navigateTo: function() {    wx.navigateTo({      //传递参数方式向get请求拼接参数一样      url: file + '?phone=18939571&password=1992',      success: function(res) {        console.log(res)      },      fail: function(err) {        console.log(err)      }    })  },  /**   * 关闭当前页面进行跳转当前页面会销毁   */  redirectTo: function() {    wx.redirectTo({       //传递参数方式向get请求拼接参数一样      url: file + '?phone=189395719&password=1992'    })  },  /**   * 退回到上一个页面   */  navigateBack: function() {    wx.navigateBack()  },  onReady:function(){    // 页面渲染完成  },  onShow:function(){    // 页面显示  },  onHide:function(){    // 页面隐藏  },  onUnload:function(){    // 页面关闭  }})
你可能感兴趣的文章
React Native 图片组件的一些常见问题汇总
查看>>
React Native性能优化
查看>>
CSS 实现隐藏滚动条同时又可以滚动
查看>>
webpack4.0各个击破(5)—— Module篇
查看>>
webpack4.0各个击破(6)—— Loader篇
查看>>
React性能优化
查看>>
vue.js将px转化为rem
查看>>
vue如何在手机中通过本机IP地址访问webApp
查看>>
fastClick的300ms延迟解决方案
查看>>
Rem.js 适配不同分辨率终端设置
查看>>
Vue自定义指令封装节流函数
查看>>
vue局部组建和全局组卷
查看>>
Vuex的使用
查看>>
webpack4.0各个击破(7)—— plugin篇
查看>>
关于Vue.js 使用v-cloak后仍显示变量的解决方法
查看>>
webpack4.0各个击破(10)—— Integration篇
查看>>
ReactNative页面跳转与事件监听
查看>>
Flutter布局基础
查看>>
从0开始写一个基于Flutter的开源中国客户端 系列文章
查看>>
flutter仿boss直聘,一个比较完整的例子
查看>>