小程序页面跳转、传参及参数获取

最新推荐文章于 2024-09-04 11:45:58 发布

原创最新推荐文章于 2024-09-04 11:45:58 发布 · 2.7k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#小程序 #页面跳转 #传参 #route

小程序笔记专栏收录该内容

24 篇文章

订阅专栏

本文详细介绍了在微信小程序中如何实现动态路由跳转，通过使用wxml中的bindtap事件和js中的navigateTo方法，结合数据传递，实现从一个页面跳转到另一个页面并携带参数的功能。此方法适用于需要根据不同条件跳转到不同页面或同一页面不同状态的场景。

//wxml
<text wx:for="{{titles}}" wx:key="{{index}}" bindtap='changeClassify' data-id="{{index}}">{{item.name}}</text>

//js
function changeClassify(e) {
  //
  let id = e.currentTarget.dataset.id;

  //跳转到classify 页面
  wx.navigateTo({
    url: '../classify/classify?id=' + id
  })
}

//classify 页面 获取参数
onLoad: function (opts) {
  console.log(opts.id)
  console.log(this.options.id)
}