本篇文章为大家介绍微信小程序开发之选项卡，看完这篇文章会让你对微信开发的知识点有更加清晰的理解和运用。

选项卡是web开发中经常使用到的一个模块，在小程序中竟然没有，这里参考别人的文章自己做了一个双选项卡

实现思路：

通过绑定swichNav事件来控制currentTab(当前选项卡)和isShow(是否显示)，达到切换展示电影和游戏的目的

代码：

1.index.wxml

<!--index.wxml-->

<view class="swiper-tab">

    <view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav">电影</view>

    <view class="swiper-tab-list {{currentTab==1 ? 'on' : ''}}" data-current="1" bindtap="swichNav">游戏</view>

</view>

<view class="weui-cells__title" hidden="{{!isShow}}">电影列表</view>

<view class="weui-cells__title" hidden="{{isShow}}">游戏列表</view>

2.index.wxss

.swiper-tab {

  width: 100%;

  text-align: center;

  line-height: 80rpx;

  background-color:white;

}

.swiper-tab-list {

  font-size: 30rpx;

  display: inline-block;

  width: 50%;

  color: #777;

  border-bottom: 0rpx;

}

.on {

  color: #da7c0c;

  border-bottom: 2rpx 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 = getApp()

Page( {

  data: {

    isShow: true,

    currentTab: 0,

  },

    swichNav: function (e) {

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

            return false;

        } else {

            var showMode = e.target.dataset.current == 0;

            this.setData({

                currentTab: e.target.dataset.current,

                isShow: showMode

            })

        }

    },

})

参考文章：//blog.csdn.net/qq_31383345/article/details/52900835

希望这篇微信开发文章可以帮助到你。总之，同学们，你想要的职坐标微信开发频道都能找到!