微信小程序-导航
Posted 记录-分享
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了微信小程序-导航相关的知识，希望对你有一定的参考价值。
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;
}
以上是关于微信小程序-导航的主要内容，如果未能解决你的问题，请参考以下文章