007-01、微信小程序---组件之swiper（tab切换）

此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 () {

    }

})

温馨提示：扫码可以提问、交流。本人有各个行业的小程序前端代码，如有需要也可以扫码留言哦。