微信小程序--实现swiper切换

在写微信小程序的过程中，或许页面会有类似tab切换的功能。如下是我的tab切换效果，在tab的切换里放入了表格。

其中有一点需要注意的是，swiper标签会有一个固定的高度，要是超出这个高度就hidden了，解决方法就是---在wxss中，添加这两个样式：

page{

height: 100%;

}

swiper{

height: 100%;

}

代码如下

wxml:

<viewclass="swiper-tab">

<viewclass="swiper-tab-list {{currentTab==0 ? 'on' : ''}}"data-current="0"bindtap="tabNav">1</view>

<viewclass="swiper-tab-list {{currentTab==1 ? 'on' : ''}}"data-current="1"bindtap="tabNav">2</view>

</view>

<swipercurrent="{{currentTab}}"duration="800"

bindchange= 'bindChange'

>

<swiper-item>

<formbindsubmit="formSubmit">

<view>

<block>

<viewclass="table">

<viewclass="tr bg-w">

<viewclass="th">描述</view>

<viewclass="th">数据</view>

</view>

<block>

<viewclass="tr">

<viewclass="td">1</view>

<viewclass="td">

<input type='text'value="{{listDataAssets.AssetsName}}"name='AssetsName'/>

</view>

</view>

<block>

<viewclass="tr">

<viewclass="td">2</view>

<viewclass="td">

<pickerbindchange="bindCasPickerChange"value="{{casIndex}}"range="{{assetsTypeArray}}"name="AssetsType">

<text>{{assetsTypeArray[casIndex-1]}}</text>

</picker>

</view>

</view>

</block>

<block>

<viewclass="tr">

<viewclass="td">3</view>

<viewclass="td">

<pickermode="date"bindchange="bindDateChange">

<textclass='picker'>{{dates}}</text>

<inputclass="picker"value="{{dates}}"name='BuyAt'/>

</picker>

</view>

</view>

</block>

</block>

</view>

</block>

</view>

</form>

</swiper-item>

<swiper-item>

<formbindsubmit="formSubmitee">

<view>

<block>

<viewclass="table">

<viewclass="tr bg-w">

<viewclass="th">描述</view>

<viewclass="th">数据</view>

</view>

<block>

<viewclass="tr">

<viewclass="td">1</view>

<viewclass="td">

</view>

</view>

<block>

<viewclass="tr">

<viewclass="td">2</view>

<viewclass="td">

</view>

</view>

</block>

</block>

</view>

</block>

</view>

</form>

</swiper-item>

</swiper>

wxss:

/* pages/qurry1/query1.wxss */

/* 下面是table */

page{

height: 100%;

}

swiper{

height: 100%;

}

.swiper-tab {

width: 100%;

text-align: center;

line-height: 80 rpx;

background-color: white;

}

.swiper-tab-list {

font-size: 30 rpx;

display: inline-block;

width: 50%;

color: #777;

border-bottom: 0 rpx;

}

.on {

color: #336699;

border-bottom: 2 rpx solid #336699;

}

/* 表格的 */

.table {

margin-top: 20 rpx;

}

.tr{

display: flex;

width: 100%;

justify-content: center;

align-items: center;

height: 2rem;

border-bottom: 1 rpx solid #ccc;

}

.th, .td{

width: 50%;

justify-content: center;

align-content: center;

display: flex;

}

.td{

font-size: 26 rpx;

}

/* input框的设置 */

.td input{

width: 100%;

text-align: center;

}

.esp-btn{

background: none !important;

}

button::after{

border: none;

}

input[ name= id], input[ name= QrId], input[ name= DepId], input[ name= AssetsId], input[ name= JoinAt], input[ name= EmployeeId]{

display: none;

}

/*奇数行*/

/* .table .tr:nth-of-type(even){background:#ccc;} */

js:

// pages/qurry1/query1.js

var util = require( '../../utils/util.js');

Page({

/**

* 页面的初始数据

*/

data: {

currentTab: 0,

active: false,

},

// tab的切换

tabNav: function (e) {

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

return false;

} else {

this.setData({

currentTab: e.target.dataset.current,

})

}

},

bindChange: function (e) {

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

},

/**

* 生命周期函数--监听页面加载

*/

onLoad: function (options) {

},

/**

* 生命周期函数--监听页面初次渲染完成

*/

onReady: function () {

},

/**

* 生命周期函数--监听页面显示

*/

onShow: function () {

},

/**

* 生命周期函数--监听页面隐藏

*/

onHide: function () {

},

/**

* 生命周期函数--监听页面卸载

*/

onUnload: function () {

},

/**

* 页面相关事件处理函数--监听用户下拉动作

*/

onPullDownRefresh: function () {

},

/**

* 页面上拉触底事件的处理函数

*/

onReachBottom: function () {

},

/**

* 用户点击右上角分享

*/

onShareAppMessage: function () {

}

})