文档章节

微信小程序把玩(三十九)navigation API

Mr韦淋
 Mr韦淋
发布于 2017/05/07 20:22
字数 500
阅读 25
收藏 0

精选30+云产品,助力企业轻松上云!>>>

这里写图片描述

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

主要属性:

导航条一些方法

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

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

  • 这里写图片描述

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

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

导航视图的一些方法

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

  • 这里写图片描述

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

  • 这里写图片描述

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

wxml

<button type="primary" bindtap="setNavigationBarTitle">设置navigationBarTitle</button>
<button type="primary" bindtap="showNavigationBarLoading">设置navigationBarLoading加载状态</button>
<button type="primary" bindtap="hiddenNavigationBarLoading">隐藏navigationBarLoading加载状态</button>
<button type="warn" bindtap="navigateTo"> 保留当前页跳转</button>
<button type="warn" bindtap="redirectTo"> 不保留当前页面跳转</button>
<button type="warn" bindtap="navigateBack">退回到上一个页面</button>

json

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

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(){
    // 页面关闭
  }
})
Mr韦淋
粉丝 2
博文 80
码字总数 23114
作品 0
江门
高级程序员
私信 提问
加载中
请先登录后再评论。
微信小程序开发 | 把玩系列:各种组件和API实用详解

新手向!微信小程序把玩系列: 微信小程序把玩《一》:window配置,tabBar底部导航,应用生命周期 微信小程序把玩《二》:页面生命周期,模块化,数据绑定,view组件 各类组件 微信小程序把玩...

极乐小程序
2019/04/04
10
0
微信小程序教程、微信小程序开发资源下载汇总(6.16日更新,持续更新中……)

摘要:微信小程序教程合集、微信小程序开发资源合集、微信小程序DEMO合集、微信小程序商店合集、微信小程序经验合集、微信小程序技巧合集 微信小程序开发工具 5款微信小程序开发工具使用报告...

极乐小程序
2019/04/04
9
0
微信小程序教程、微信小程序开发资源下载汇总(6.16日更新,持续更新中……)

摘要:微信小程序教程合集、微信小程序开发资源合集、微信小程序DEMO合集、微信小程序商店合集、微信小程序经验合集、微信小程序技巧合集 微信小程序开发工具 5款微信小程序开发工具使用报告...

极乐小程序
2019/04/04
14
0
微信小程序组件探究和应用

1111.jpg 把玩微信小程序组件 微信小程序把玩《二》:页面生命周期,模块化,数据绑定,view组件 微信小程序把玩《三》:scroll-view组件,swiper组件,icon组件 微信小程序把玩《四》:tex...

极乐小程序
2019/04/04
2
0
微信小游戏开发Canvas资源汇总

Demo: 微信小程序demo组件:股票分时图 微信小程序小组件:仿直播点赞气泡效果,基于Canvas 优质demo推荐:二维码生成器;使用canvas与纯JS版二维码生成 微信小程序学习用完整demo:canvas涂...

osc_jxumvtli
2018/05/04
4
0

没有更多内容

加载失败,请刷新页面

加载更多

IntelliJ IDEA 默认快捷键大全

Remember these Shortcuts 常用 功能 快捷键 备注 ● Smart code completion Ctrl + Shift + Space - ● Search everywhere Double Shift - ● Show intention actions and quick-fixes Alt......

巨輪
23分钟前
18
0
Hacker News 简讯 2020-07-14

更新时间: 2020-07-14 01:01 I Know What You Download on BitTorrent - (iknowwhatyoudownload.com) 我知道你在BitTorrent上下载了什么 得分:196 | 评论:159 Show HN: Primo – all-in-one......

FalconChen
今天
114
0
绕过移动端系统限制的 dlopen 库 byOpen

byOpen是一个绕过移动端系统限制的增强版dlfunctions库。 支持特性 Android 支持App中加载和使用Android系统库接口(即使maps中还没有被加载也支持)。 Android 7以上dlopen, System.load都是...

shzwork
昨天
25
0
Golang学习系列第二天:变量、常量、数据类型和流程语句

继golang第一天后,今天学习下golang的变量、常量、数据类型和控制流语句。 做过其他编程语言(比如JavaScript,java,python)项目的话,其实很好理解变量、常量、数据类型和控制流。 变量也...

董广明
昨天
48
0
redis系列之——一致性hash算法

一致性hash算法你了解吗?什么时候使用?解决什么问题?redis集群模式使用了一致性hash算法了吗? 数据分片(sharding) 分布式数据存储时,经常要考虑数据分片,避免将大量的数据放在单表或...

诸葛小猿
昨天
15
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部