微信小程序--实现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:
80rpx;
background-color:white;
}
.swiper-tab-list {
font-size: 30rpx;
display: inline-block;
width: 50%;
color: #777;
border-bottom:
0rpx;
}
.on {
color: #336699;
border-bottom:
2rpx solid#336699;
}
/* 表格的 */
.table {
margin-top: 20rpx;
}
.tr{
display: flex;
width: 100%;
justify-content:
center;
align-items:
center;
height: 2rem;
border-bottom:1rpxsolid#ccc;
}
.th,.td{
width: 50%;
justify-content:
center;
align-content:
center;
display: flex;
}
.td{
font-size: 26rpx;
}
/* 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;} */
// 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 () {
}
})