微信小程序开发——navigator组件

原创已于 2025-08-28 18:00:43 修改 · 5.7k 阅读

6 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

微信小程序学习

当前文章被收录于：

微信小程序学习

53 篇文章 10 人学习

订阅专栏查看详情

当前文章被以下社区和专栏收录：

于 2018-04-02 17:12:55 首次发布

本文介绍了微信小程序中navigator组件的使用，包括在.wxml和.wxjs中的代码示例，以及如何进行页面间的跳转，特别是带参数的跳转操作。详细讲解了从一个页面无参数跳转到另一个页面，以及带参数的跳转方法。

效果图

代码示例

1、xxx.wxml

<navigator open-type='navigate' url='../Navigator/navigatorSec'>navigatorSec</navigator>

<navigator open-type='navigateBack'>返回</navigator>
<navigator open-type='navigate' url='../Navigator/navigatorThi?title=带参数导航栏&count=1001'>navigatorThi</navigator>

<navigator open-type='navigateBack'>返回</navigator>

2、xxx.wxjs

Page({

  /**
   * 页面的初始数据
   */
  data: {

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    wx.setNavigationBarTitle({
      title: options.title,
    });

    console.log(options);
  }
}

使用注意

1、从A页面跳转到B页面，不带参数

<navigator open-type='navigate' url='../Navigator/navigatorSec'>navigatorSec</navigator>

2、从A页面跳转到B页面，带有参数

<navigator open-type='navigate' url='../Navigator/navigatorThi?title=带参数导航栏&count=1001'>navigatorThi</navigator>

3、从B页面跳转回到B页面