此tab切換以登入頁面為參照。
1、WXMl

<view class="tab-title">
    <block wx:for="{{msg}}" wx:key="mykey">
        <view class="tab-name {{currentTab==item.mykey ? 'on' : ''}}" data-current="{{item.mykey}}" bindtap="switchNav">{{item.name}}</view>
    </block>
</view>
<view>
 

    <form bindsubmit="formSubmit" bindreset="formReset" class="formBox">
        <swiper class="swiper-box" current="{{currentTab}}" duration="300" bindchange="bindchange" style="height:{{winHeight - 148}}px">
            <swiper-item>
                <view class="lines">
                    <view
 
 class="lines_text">真實姓名</view>
                    <view class="lines_inp">                
                        <input type="text" />
                    </view>
                </view>
                <view class="lines">
                    <view class="lines_text"
 
>手機號碼</view>
                    <view class="lines_inp">                
                        <input type="text" />
                    </view>
                </view>
                <view class="lines">
                    <view class="lines_text">暱稱</view>
                    <view class="lines_inp">                
                        <input type="text" />
                    </view>
                </view>
                <view class="lines">
                    <view class="lines_text">密碼</view>
                    <view class="lines_inp">                
                        <input type="text" password="true" />
                    </view>
                </view>
                <view class="lines">
                    <view class="lines_text">確認密碼</view>
                    <view class="lines_inp">                
                        <input type="text" password="true" />
                    </view>
                </view>
                <button class="btns" bindconfirm="register">註冊</button>
            </swiper-item>
            <swiper-item>
                <view class="lines">
                    <view class="lines_text">使用者名稱</view>
                    <view class="lines_inp">                
                        <input type="text" placeholder="" />
                    </view>
                </view>
                <view class="lines">
                    <view class="lines_text">密碼</view>
                    <view class="lines_inp">                
                        <input type="text" password="true" />
                    </view>
                </view>
                <button class="btns" bindconfirm="logIn">登入</button>
            </swiper-item>
        </swiper>

    </form>
</view>

2、WXSS

.tab-title{
    display: flex;
    display: -webkit-flex;
    width: 86%;
    margin: 150rpx 7% 0;
    /*border-bottom: 1px solid #ccc;*/
}
.tab-name{
    width: 50%;
    height: 100rpx;
    line-height: 100rpx;
    text-align: center;
}
.on{
    color: blue;
    border-bottom: 2px solid blue;
}
.swiper-box{
    display: block;
    width: 86%;
    height: 600px;
    margin: 20rpx 7%;
}
.lines{
    display: flex;
    display: -webkit-flex;
    width: 100%;
    border-bottom: 1px solid #ccc;
}
.lines_text{
    width: 30%;
    height: 100rpx;
    line-height: 100rpx;
}
.lines_inp{width: 70%;}
.lines_inp input{
    width: 100%;
    height: 100rpx;
    line-height: 100rpx;
}
.btns{
    width: 98%;
    margin: 100rpx 1% 0;
    background: rgba(100,100,255,0.5);
}

3、JS

Page({
    data: {
        msg: [],
        currentTab: 0,
        winWidth: 0,  
        winHeight: 0

    },
    onLoad: function () {
        var that = this;
        wx.getSystemInfo( {  

          success: function( res ) {  
            that.setData( {  
              winWidth: res.windowWidth,  
              winHeight: res.windowHeight  
            });  
          }  

        });  
        that.setData({
            msg: [
                {
                    "name":"註冊",
                    "mykey":0
                    // "inputName":
                    //  ["真實姓名","手機號碼","暱稱","密碼","確認密碼"]
                },
                {
                    "name":"登入",
                    "mykey":1
                    // "inputName":["使用者名稱","密碼"]
                }
            ]

        });
    },
    switchNav: function (e) {
        var that = this;
        that.setData({
            currentTab: e.target.dataset.current
        })
    },
    bindchange: function (e) {
        var that = this;
        that.setData({
            currentTab: e.detail.current
        })
    },
    register: function () {

    }

})

溫馨提示：掃碼可以提問、交流。本人有各個行業的小程式前端程式碼，如有需要也可以掃碼留言哦。