小程序---navigator

最新推荐文章于 2025-06-26 16:40:45 发布

Ariel_ckr

最新推荐文章于 2025-06-26 16:40:45 发布

阅读量2.6k

点赞数

CC 4.0 BY-SA版权

分类专栏：微信小程序开发文章标签： navigator 小程序 url url传参

本文链接：https://blog.youkuaiyun.com/Ariel_201311/article/details/81322154

微信小程序开发专栏收录该内容

16 篇文章

订阅专栏

本文介绍了在小程序中如何利用navigator组件实现列表点击跳转，并通过url传参传递不同标识，以便在目标页面动态显示相应内容。详细讲述了在test和test2页面间如何利用navigator和onload函数处理传参，实现更优雅的列表跳转效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在小程序里面，实现一个点击跳转事件，通常会用上bindtap，再在事件里使用wx.navigateTo指定跳转页面。但如果我们的原页面是一个渲染的列表，每个项都有一个跳转事件，而且跳转进去的页面大体相同，除了给它们一个个加上bindtap以外，还有什么更好的办法呢？navigator这时就派上用场了。
模拟效果
这里用到两个页面：test/test和test2/test2

test

test.wxml
在navigator里设置循环内容，注意navigator的url一定要设置路径，为了给每个列表添加一个标识，好让点击跳转时显示不同内容，我们可以通过路径传参itemId={{item.id}}把id传到子页面。

<navigator wx:for='{{imgUrl}}' wx:key="id" url="../test2/test2?itemId={{item.id}}">
  <image src='{{item.img}}' style='width:100%'></image>
</navigator>

test.js
在js里给每个项设置一个标识符id

Page({
  data: {
    imgUrl: [{
        id: '1',
        img: '../img/banner.png'
      },
      {
        id: '2',
        img: '../img/banner1.png'
      },
      {
        id: '3',
        img: '../img/banner2.png'
      },
      {
        id: '4',
        img: '../img/banner.png'
      }
    ]
  }
})

test2

在test.wxml点击列表跳转到test2.wxml时，我们首先可以在test2.js的onload函数里监听test.wxml点击的是哪一项：

    console.log(options);

在这里插入图片描述
我们可以在data数据里，定义一个变量：

 data: {
    itemId:''
  }

然后将onload函数里监听到的参数动态地赋值给itemId，用于test2.wxml页面做不同的显示。

test2.js

Page({
  /**
   * 页面的初始数据
   */
  data: {
    itemId:''
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    console.log(options);
    var that=this;
    that.setData({
        itemId:options.itemId
    })
    console.log(that.data.itemId);
  }
})

test2.wxml

<view wx:if="{{itemId==1}}">
  <text>哈哈，今天心情好吗？</text>
</view>

<view wx:if="{{itemId==2}}">
  <text>一起出去玩啊</text>
</view>

<view wx:if="{{itemId==3}}">
  <text>今天天气好好哦</text>
</view>

<view wx:if="{{itemId==4}}">
  <text>快冬天啦</text>
</view>