hello,首先,我是一个菜鸟,不足之处指点批评!
需求:我需要在index页面点击一个按钮跳转到另一个页面(是一个底部tab)的顶部tab的特定某个选项卡。额,没说清楚,看图展示:
当我点击装饰公司进入 装饰公司的tab。 index页面跳转至 find页面。
思路:在app.js设置变量,通过点击按钮设置变量的值,然后在find.js获取变量值,判断是谁点击而做出相应的动作。
话不多说,上代码 :
首先设置 app.js的全局变量
globalData:{
currentLocation: '',
userInfo:null
}
index.wxml
<view class="middle1">
<view class="middle1-1">
<!--<navigator url="../buy/buy">-->
<view class="middle1-1-1" bindtap="view1">
<view class="middle1-1-1-1">
<view class="m1">建材店</view>
<view class="m2">买建材不绕路</view>
</view>
<view class="middle1-1-1-2">
<image class="m3" src="resources/m1.png"></image>
</view>
</view>
<!--</navigator>-->
<view class="middle1-1-2" bindtap="view2">
<view class="middle1-1-2-1">
<view class="m4">装饰公司</view>
<view class="m5">省心省力之选</view>
</view>
<view class="middle1-1-2-2">
<image class="m6" src="resources/m2.png"></image>
</view>
</view>
</view>
<view class="middle1-2">
<view class="middle1-2-1" bindtap="view3">
<view class="middle1-2-1-1">
<view class="m7">设计师</view>
<view class="m8">开工先请个设技师</view>
</view>
<view class="middle1-2-1-2">
<image class="c1" src="resources/m3.png"></image>
</view>
</view>
<view class="middle1-2-2" bindtap="view4">
<view class="middle1-2-2-1">
<view class="m7">装修工</view>
<view class="m8">找工人有保障</view>
</view>
<view class="middle1-2-2-2">
<image class="c1" src="resources/m4.png"></image>
</view>
</view>
<view class="middle1-2-3" bindtap="view5">
<view class="middle1-2-3-1">
<view class="m7">运输工</view>
<view class="m8">同城送货不难找</view>
</view>
<view class="middle1-2-3-2">
<image class="c1" src="resources/m5.png"></image>
</view>
</view>
</view>
</view>
index.wxss:
.middle1 {
width: 100%;
height: 400rpx;
background: black;
display: flex;
}
.middle1-1 {
width: 50%;
height: 100%;
background: white;
}
.middle1-1-1 {
width: 100%;
height: 50%;
background: white;
display: flex;
border: 0.1px solid #ccced0;
margin-bottom: -1px;
margin-left: -1px;
margin-top: -1px;
}
.middle1-1-1-1 {
width: 50%;
height: 100%;
}
.m1 {
width: 100%;
height: 50rpx;
background: white;
margin-top: 65rpx;
padding-left: 15rpx;
}
.m2 {
width: 100%;
font-size: 28rpx;
height: 50rpx;
background: white;
padding-left: 15rpx;
}
.middle1-1-1-2 {
width: 50%;
height: 100%;
}
.m3 {
width: 130rpx;
height: 130rpx;
margin-left: 15rpx;
margin-top: 15rpx;
}
.middle1-1-2 {
width: 100%;
height: 50%;
display: flex;
border: 0.1px solid #ccced0;
margin-left: -1px;
margin-bottom: -1px;
}
.middle1-1-2-1 {
width: 50%;
height: 100%;
}
.m4 {
height: 50rpx;
background: white;
padding-left: 15rpx;
padding-top: 60rpx;
}
.m5 {
font-size: 28rpx;
height: 50rpx;
background: white;
padding-left: 15rpx;
}
.middle1-1-2-2 {
width: 50%;
height: 100%;
}
.m6 {
width: 130rpx;
height: 130rpx;
margin-left: 15rpx;
margin-top: 30rpx;
}
.middle1-2 {
width: 50%;
height: 100%;
background: white;
}
.middle1-2-1 {
border: 0.1px solid #ccced0;
width: 100%;
height: 33.1%;
display: flex;
margin-bottom: -1px;
margin-top: -1px;
}
.middle1-2-1-1 {
width: 60%;
height: 100%;
}
.m7 {
width: 100%;
height: 50rpx;
background: white;
margin-top: 17rpx;
margin-left: 10rpx;
}
.m8 {
width: 100%;
height: 50rpx;
background: white;
font-size: 28rpx;
margin-left: 10rpx;
}
.middle1-2-1-2 {
width: 40%;
height: 100%;
}
.c1 {
width: 100rpx;
height: 100rpx;
margin-top: 15rpx;
margin-left: 5rpx;
}
.middle1-2-2 {
width: 100%;
height: 33.1%;
display: flex;
border: 0.1px solid #ccced0;
margin-bottom: -1px;
}
.middle1-2-2-1 {
width: 60%;
height: 100%;
}
.middle1-2-2-2 {
width: 40%;
height: 100%;
}
.middle1-2-3 {
width: 100%;
height: 33.1%;
display: flex;
border: 1px solid #ccced0;
margin-bottom: -1px;
}
.middle1-2-3-1 {
width: 60%;
height: 100%;
}
.middle1-2-3-2 {
width: 40%;
height: 100%;
}
index.js 其实就是对不同的按钮设置不同的全局变量
view2: function () {
app.globalData.currentLocation = 1,
console.log(app.globalData.currentLocation);
wx.switchTab({ url: '../find/find' })
},
view3: function () {
app.globalData.currentLocation = 3,
console.log(app.globalData.currentLocation);
wx.switchTab({ url: '../find/find' })
},
view4: function () {
app.globalData.currentLocation = 0,
console.log(app.globalData.currentLocation);
wx.switchTab({ url: '../find/find' })
},
view5: function () {
app.globalData.currentLocation = 2,
console.log(app.globalData.currentLocation);
wx.switchTab({ url: '../find/find' })
}
在find 页面先实现tab顶部选项卡
find.wxml
<view class="swiper-tab">
<view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav">装修工</view>
<view class="swiper-tab-list {{currentTab==1 ? 'on' : ''}}" data-current="1" bindtap="swichNav">装饰公司</view>
<view class="swiper-tab-list {{currentTab==2 ? 'on' : ''}}" data-current="2" bindtap="swichNav">运输工</view>
<view class="swiper-tab-list {{currentTab==3 ? 'on' : ''}}" data-current="3" bindtap="swichNav">设计师</view>
</view>
<swiper current="{{currentTab}}" class="swiper-box" duration="300" style="height:{{winHeight - 31}}px" bindchange="bindChange">
<swiper-item>
装修工
</swiper-item>
<swiper-item>
<view>装饰公司</view>
</swiper-item>
<swiper-item>
<view>运输工</view>
</swiper-item>
<swiper-item>
<view>设计师</view>
</swiper-item>
</swiper>
find.wxss:
.swiper-tab {
width: 100%;
border-bottom: 2rpx solid #777;
text-align: center;
line-height: 80rpx;
}
.swiper-tab-list {
font-size: 30rpx;
display: inline-block;
width: 25%;
color: #777;
}
.on {
color: #da7c0c;
border-bottom: 5rpx solid #da7c0c;
}
.swiper-box {
display: block;
height: 100%;
width: 100%;
overflow: hidden;
}
.swiper-box view {
text-align: center;
}
find.js
// find.js
var app = getApp();
Page({
/**
* 页面的初始数据
*/
data: {
winWidth: 0,
winHeight: 0,
// tab切换
currentTab: 0,
city: '南昌市',
},
/**
* 生命周期函数--监听页面加载
*/
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 () {
},
}
})
嗯,到这应该完成。