一 、基本跳转
1.使用组件<navigator>
标签来实现。
特点:点击有按下的效果
<navigator url="../job_detail/job_detail?isShowCompanyDetail=true&iscollect={{item.iscollect}}"> 跳转 </navigator>
2.给页面布局加监听时间bindtap事件。然后在方法里面。通过wx.navigatorTo
来实现跳转。
特点:点击无按下的效果。
gotoPage: function () {
wx.navigateTo({
url: '../list/list',
success: function (res) {
// success
},
fail: function () {
// fail
},
complete: function () {
// complete
}
})
},
3.通过wx.redirectTo
实现跳转。
特点:关闭当前页面,跳转到应用内某个页面
toList: function (event) {
var provinceName = event.currentTarget.id;
wx.redirectTo({
url: '../city/city?province='+provinceName,
success: function (res) {
// success
},
fail: function () {
// fail
},
complete: function () {
// complete
}
})
}
4.wx.navigateBack
方法
关闭当前页面。返回上一页面或多级页面
wx.navigateBack({
delta: 1, // 回退前 delta(默认为1) 页面
success: function (res) {
// success
},
fail: function () {
// fail
},
complete: function () {
// complete
}
})
给上一个页面赋值
var pages = getCurrentPages();
var prevPage = pages[pages.length - 2];//上一个页面。
prevPage.setData({
bank_cn: bank_cn,
bank: bank
})
重点:
tabBar
里一般就是四个主页面,这些主页面之间的跳转就像tab切换,这几个页面需要在tabBar
里另外配置,普通页面向这四个主页面跳转的时候,不能使用navigator
,需用switchTab
。
实例:从首页跳到tabBar页,并且要带上参数.首先我是这样做的:
在index.js中:
toCategory:function(event){
var cate_id = event.currentTarget.dataset.cate_id;
wx.switchTab({
url: '../category/category?cate_id='+cate_id,
});
},
按照上面写的在category.js里得不到数据;
onLoad:function(options){
console.log(options);
}
然后查看了下官方文档.
wx.switchTab(OBJECT)
跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面
OBJECT 参数说明:
参数 | 类型 | 必填 | 说明 |
---|---|---|---|
url | String | 是 | 需要跳转的 tabBar 页面的路径(需在 app.json 的 tabBar 字段定义的页面),路径后不能带参数 |
success | Function | 否 | 接口调用成功的回调函数 |
fail | Function | 否 | 接口调用失败的回调函数 |
complete | Function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
可以看到url路径后不能带参数.这下就尴尬了.因为我必须要带一个参数过去才能满足业务的需求;走了一个捷径.思路:跳转的时候在全局变量里设置一个变量cate_id,调到category.js中后.调取全局变量里的cate_id,用完后,再把扎个变量清除掉.具体实施如下:
首页index.js中:
toCategory:function(event){
var cate_id = event.currentTarget.dataset.cate_id;
app.globalData.cate_id=cate_id;//设置全局变量(app已经定义 var app=getApp())
wx.switchTab({
url: '../category/category'
});
},
分类页category.js中:
onLoad:function(options){
var that = this
var cate_id=app.globalData.cate_id
wx.request({
url: app.globalData.httpsurl +'public/index.php?s=product/index',
data:{
cate_id:cate_id,
},
success:function(res){
//清除全局变量cate_id
app.globalData.cate_id=""
that.setData({
alldata:res.data,
})
}
})
},
微信小程序wx.switchTab跳转到tab页面后onLoad里面的方法不执行
解决这种问题的方法页有很多中,最简单的就是在启动页添加跳转成功的方法
wx.switchTab({
url: '/pages/index/index',
success: function (e) {
var page = getCurrentPages().pop();
if (page == undefined || page == null) return;
page.onLoad();
}
})
上面的转化就可以完成业务逻辑的需要了.