微客导航 » 文章资讯 » 微信小程序实现选项卡效果

微信小程序实现选项卡效果

2023-09-06 03:56:06 325

本文实例为大家分享了微信小程序实现选项卡效果展示的具体代码，供大家参考，具体内容如下

demo.wxss

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

.swiper-box{display:block;height:100%;width:100%;overflow:hidden;}
.swiper-boxview{
text-align:center;
}

demo.wxml


哈哈
呵呵
嘿嘿





我是哈哈



我是呵呵



我是嘿嘿

demo.js

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
3162201930
czq8825@qq.com

微信小程序实现选项卡效果

热门推荐

随机推荐