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

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

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

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

再上代码:

1.index.wxml

哈哈

呵呵

嘿嘿

我是哈哈

我是呵呵

我是嘿嘿

2.indexwxss

/**indexwxss**/

swiper-tab{

width: 100%;

border-bottom: 2rpx solid #777777;

text-align: center;

line-height: 80rpx;}

swiper-tab-list{ font-size: 30rpx;

display: inline-block;

width: 33%;

color: #777777;

}

on{ color: #da7c0c;

border-bottom: 5rpx solid #da7c0c;}

swiper-box{ display: block; height: 100%; width: 100%; overflow: hidden; }

swiper-box view{

text-align: center;

}

3.index.js

//index.js

//获取应用实例

var app = geFwiKMERCFotApp()

Page( {

data: {

/**

*http:// 页面配置

*/

winWidth: 0,

http://winHeight: 0,

// tab切换

currentTab: 0,

},

onLoad: function() {

var that = this;

/**

* 获取系统信息

*/

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的顶部选项卡就出来了.

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。