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

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

.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);
}

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

}

})