当前位置:编程学习 > JS >>

微信小程序 带参数跳转页面 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 }) }


CopyRight © 2022 站长资源库 编程知识问答 zzzyk.com All Rights Reserved
部分文章来自网络,