铁雪资源网 Design By www.gsvan.com

微信小程序 navigation API实例详解

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

主要属性:

导航条一些方法

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

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

微信小程序 navigation API实例详解

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

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

导航视图的一些方法

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

微信小程序 navigation API实例详解

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

微信小程序 navigation API实例详解

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(){
  // 页面关闭
 }
})

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

标签:
微信小程序,navigation,API,微信小程序,navigation,API详细介绍

铁雪资源网 Design By www.gsvan.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
铁雪资源网 Design By www.gsvan.com

评论“微信小程序 navigation API实例详解”

暂无微信小程序 navigation API实例详解的评论...

稳了!魔兽国服回归的3条重磅消息!官宣时间再确认!

昨天有一位朋友在大神群里分享,自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址,com.cn和后面的zh都非常明白地表明这就是国服战网。

而他在复制这个网址并且进行登录之后,确实是网易的网址,也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情,因为以前都没有出现这样的情况,现在突然提示跳转到国服战网的网址,是不是说明了简体中文客户端已经开始进行更新了呢?