wxml
<view class="content">
<view class="loginTitle" style=‘height:80rpx‘>
<view class="{{currentTab==0?‘select‘:‘default‘}}" data-current="0" bindtap="switchNav">登录</view>
<view class="{{currentTab==1?‘select‘:‘default‘}}" data-current="1" bindtap="switchNav">注册</view>
</view>
<view class=‘hr‘></view>
<swiper current="{{currentTab}}" style=‘height:{{winHeight}}rpx‘>
<swiper-item>1
</swiper-item>
<swiper-item>2
</swiper-item>
</swiper>
js
const app=getApp();
Page({
/**
* 页面的初始数据
*/
data: {
// 当前标签 登录/注册
currentTab: 0,
// 宽高
winWidth: 0,
winHeight: 0
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
this.setData({
winWidth: app.globalData.winWidth,
winHeight: app.globalData.winHeight,
});
console.log("h:" + this.data.winHeight + " w:" + this.data.winWidth) ;
},
// 导航
switchNav: function (e) {
var page = this;
if (this.data.currentTab == e.target.dataset.current) {
return false;
} else {
page.setData({ currentTab: e.target.dataset.current });
}
console.log(page.data.currentTab)
},
css
.loginTitle {
display: flex;
flex-direction: row;
width: 100%;
height: 130rpx;
top: 0rpx;
z-index: 1;
}
.select {
font-size: 35rpx;
color: rgb(51, 165, 38);
width: 50%;
text-align: center;
height: 45px;
line-height: 45px;
border-bottom: 5rpx solid rgb(51, 165, 38);
}
.default {
font-size: 35rpx;
margin: 0 auto;
padding: 15px;
}
.hr {
border: lpx solid#cccccc;
opacity: 0.2;
}
原文地址：https://www.cnblogs.com/wen-/p/12148184.html