微客导航 » 文章资讯 » 微信小程序中顶部导航栏的实现代码

微信小程序中顶部导航栏的实现代码

2024-02-26 12:49:02 161

微信小程序中顶部导航栏的实现

实例代码：


11
22
33
44
55





我是哈哈



我是呵呵



我是嘿嘿


我是嘿嘿


我是嘿嘿

.swiper-tab{
width:100%;
border-bottom:2rpxsolid#777777;
text-align:center;
line-height:80rpx;
}
.swiper-tab-list{font-size:30rpx;
display:inline-block;
width:20%;
color:#777777;
}
.on{color:#da7c0c;
border-bottom:5rpxsolid#da7c0c;}
.swiper-box{display:block;height:100%;width:100%;overflow:hidden;}
.swiper-boxview{
text-align:center;
}

varapp=getApp()
Page({
data:{
/**
*页面配置
*/
winWidth:0,
winHeight:0,
//tab切换
currentTab:0,
},
onLoad:function(){
varthat=this;

/**
*获取系统信息
*/
wx.getSystemInfo({

success:function(res){
that.setData({
winWidth:res.windowWidth,
winHeight:res.windowHeight
});
}

});
},
/**
*滑动切换tab
*/
bindChange:function(e){

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

},
/**
*点击tab切换
*/
swichNav:function(e){

varthat=this;

if(this.data.currentTab===e.target.dataset.current){
returnfalse;
}else{
that.setData({
currentTab:e.target.dataset.current
})
}
},
/**
*点击分享
*/
onShareAppMessage:function(){
return{
title:'装逼小程序',
path:'/page/user?id=123'
}
}
})

感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

返回顶部
3162201930
czq8825@qq.com

微信小程序中顶部导航栏的实现代码

热门推荐

随机推荐