微信小程序开发之实现选项卡(窗口顶部TabBar)页面切换

发布时间：2020-12-14 22:12:46 所属栏目：资源来源：网络整理

导读：微信小程序开发中选项卡.在Android中选项卡一般用fragment,到了小程序这里瞬间懵逼了. 总算做出来了.分享出来看看. 先看效果: 再上代码: 1.index.wxml swiper current="{{currentTab}}" class="swiper-box" duration="300" style="height:{{winHeight - 31}}

微信小程序开发中选项卡.在Android中选项卡一般用fragment,到了小程序这里瞬间懵逼了.

总算做出来了.分享出来看看.

先看效果:

再上代码:

1.index.wxml

我是哈哈

我是呵呵

我是嘿嘿

2.indexwxss

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

3.index.js

/**

获取系统信息
*/
wxgetSystemInfo( {

success: function( res ) {
thatsetData( {
winWidth: reswindowWidth,winHeight: reswindowHeight
});
}

});
},/**

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

var that = this;
thatsetData( { currentTab: edetailcurrent });

},/**

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

var that = this;

if( thisdatacurrentTab === etargetdatasetcurrent ) {
return false;
} else {
thatsetData( {
currentTab: etargetdatasetcurrent
})
}
}
})

这样一个类似viewpage的顶部选项卡就出来了.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!