微信小程序-导航

 

 

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; }

标签：winWidth,微信,app,程序,winHeight,data,导航,page,currentTab
来源： https://www.cnblogs.com/wen-/p/12148184.html