微信小程序选项卡切换怎么开发？

　　小程序切换的方式有很多种，小编今天要为大家具体介绍的是微信小程序选项卡切换，以下是操作流程和开发所需要的小程序代码，希望能够帮助到大家。

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

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

　　先看效果:

　　再上代码:

　　1.index.wxml

　　[html] view plain copy

　　哈哈

　　呵呵

　　嘿嘿

　　我是哈哈

　　我是呵呵

　　我是嘿嘿

　　2.index.wxss

　　[css] view plain copy/**index.wxss**/

　　.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.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

　　[javascript] view plain copy//index.js

　　//获取小程序应用实例

　　var app = getApp()

　　Page( {

　　data: {

　　/**

　　* 页面配置

　　*/

　　winWidth: 0,

　　winHeight: 0,

　　// tab切换

　　currentTab: 0,

　　},

　　onLoad: function() {

　　var that = this;

　　/**

　　* 获取系统信息

　　*/

　　wx.getSystemInfo( {

　　success: function( res ) {

　　that.setData( {

　　winWidth: res.windowWidth,

　　winHeight: res.windowHeight

　　});

　　}

　　});

　　},

　　/**

　　* 滑动切换tab

　　*/

　　bindChange: function( e ) {

　　var that = this;

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

　　},

　　/**

　　* 点击tab切换

　　*/

　　swichNav: function( e ) {

　　var that = this;

　　if( this.data.currentTab === e.target.dataset.current ) {

　　return false;

　　} else {

　　that.setData( {

　　currentTab: e.target.dataset.current

　　})

　　}

　　}

　　})

　　之前没有上传代码.这是下图的代码

　　demo下载地址

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

　　复制上述小程序码，参照具体开发过程，你就可以进行微信小程序选项卡切换的开发了，希望大家都能开发成功，更多相关资料请关注微信小程序素材网。

　　微信小程序tab切换开发步骤

　　小程序点击切换样式怎么操作

　　怎样实现小程序点击切换样式