小程序--带参数跳转页面,包括跳转到tabbar页面

1.能跳到tabbar页面的方法

wx.switchTab(Object object)
跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面。不能带参数

wx.reLaunch(Object object)
关闭所有页面,打开到应用内的某个页面。可以带参数,不同参数用&分隔

2.只能跳转到非tabbar页面的方法

wx.navigateTo(Object object)
保留当前页面,跳转到应用内的某个页面。可以带参数,不同参数用&分隔
使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层。

wx.redirectTo(Object object)
关闭当前页面,跳转到应用内的某个页面。可以带参数,不同参数用&分隔

3.页面带参跳转代码示例

从index页面跳转到cate页面
效果:点击水果类,跳到分类页面,并显示水果类商品

在这里插入图片描述在这里插入图片描述

(1)index.wxml代码

当前页面的参数,传到下一个页面。当前视图中view里要写入传递值。如下,通过bindtap绑定gotocate事件,并且把要传递的参数key,以 “data-” 的格式传递。
关键代码:bindtap=“gotocate” data-index="{{index}}"

<!--推荐分类列表-->
    <view class="section cates">
      <block wx:key="1" wx:for="{{cateList}}" wx:for-index="index" wx:for-item="cate" >
        <view class="cate" bindtap="gotocate" data-index="{{index}}" >
          <image src="{{cate.url}}" class="img" mode="aspectFit" />
          <text class="name">{{cate.name}}</text>
        </view>
      </block>
    </view>

(2)index.js代码

/*点击分类推荐列表 */
  gotocate:function(e){
    var key = e.currentTarget.dataset.index
    wx.reLaunch({
      url: "/pages/cate/cate?key=" + key
    })
  },

(3)cate.js代码

在跳转到的页面接收数据:数据存在options中,直接以 “options.参数名”的形式获取

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

(4)补充:

上面示例只传一个参数 data-index="{{index}}",参数也可以是多个 ,比如多加一个data-time="{{time}}"
那么index.js代码改为

   var key = e.currentTarget.dataset.index
   var time= e.currentTarget.dataset.time
    wx.reLaunch({
      url: "/pages/cate/cate?key=" + key+"&time="+time
    })

cate.js代码改为

onLoad: function (options) {
    var key = options.key;
    var time=options.time
    this.setData({
      key:key
      time:time
    })
  }
发布了45 篇原创文章 · 获赞 6 · 访问量 1196

猜你喜欢

转载自blog.csdn.net/qq_41219586/article/details/103367850