微信小程序-页面跳转到对应的顶部tab-前端-E先生的博客

需求：我需要在index页面点击一个按钮跳转到另一个页面（是一个底部tab）的顶部tab的特定某个选项卡。

当我点击A公司进入 A公司的tab。 index页面跳转至 A页面。

思路：在app.js设置变量，通过点击按钮设置变量的值，然后在A.js获取变量值，判断是谁点击而做出相应的动作。

话不多说，上代码：

首先设置 app.js的全局变量

globalData:{

currentLocation:'',

userInfo:null

}

index.wxml

A

进入A

B

进入B

C

进入C

D

进入D

index.wxss: 这个就自己写吧 index.js 其实就是对不同的按钮设置不同的全局变量

view2: function () {

app.globalData.currentLocation = 1,

console.log(app.globalData.currentLocation);

wx.switchTab({ url: '../A/A' })

},

view3: function () {

app.globalData.currentLocation = 3,

console.log(app.globalData.currentLocation);

wx.switchTab({ url: '../B/B' })

},

view4: function () {

app.globalData.currentLocation = 0,

console.log(app.globalData.currentLocation);

wx.switchTab({ url: '../C/C' })

},

view5: function () {

app.globalData.currentLocation = 2,

console.log(app.globalData.currentLocation);

wx.switchTab({ url: '../D/D' })

}

在A页面先实现tab顶部选项卡 A.wxml

A

B

C

D

A

B

C

D

A.wxss：根据个人样式自己写吧 A.js 其实看到这里应该都会明白逻辑了剩下的核心继续看吧喜欢的点个♥♥

// A.js

var app = getApp();

Page({

/**

* 页面的初始数据

*/

data: {

winWidth: 0,

winHeight: 0,

// tab切换

currentTab: 0,

city: 'A市',

},

/**

* 生命周期函数--监听页面加载

*/

onLoad: function (options) {

// console.log('i='+i);

var that = this;

/**

* 获取系统信息

*/

wx.getSystemInfo({

success: function (res) {

that.setData({

winWidth: res.windowWidth,

winHeight: res.windowHeight

});

}

});

},

//滑动或点击都触发

bindChange: function (e) {

var that = this;

that.setData({ currentTab: e.detail.current });

},

/**

* 点击tab切换

*/

swichNav: function (e) {

var that = this;

if (this.data.currentTab === e.target.dataset.current) {

return false;

} else {

that.setData({

currentTab: e.target.dataset.current

})

}

},

/**

* 生命周期函数--监听页面显示

*/

onShow: function () {

if (app.globalData.currentLocation == '') {

this.setData({

currentTab: 0

});

} else {

var i = app.globalData.currentLocation;

console.log('onshow');

console.log('i=' + i);

this.setData({

currentTab: i

});

}

},

/**

* 生命周期函数--监听页面初次渲染完成

*/

onReady: function () {

},

/**

* 生命周期函数--监听页面隐藏

*/

onHide: function () {

},

/**

* 生命周期函数--监听页面卸载

*/

onUnload: function () {

},

/**

* 页面相关事件处理函数--监听用户下拉动作

*/

onPullDownRefresh: function () {

},

/**

* 页面上拉触底事件的处理函数

*/

onReachBottom: function () {

},

/**

* 用户点击右上角分享

*/

onShareAppMessage: function () {

},

}

})