我用的是医疗小程序挂号的例子，示例如图所示
页面代码，其中的变量这些东西需要的自己替换一下即可：
代码语言：javascript复制<view>
<view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav">挂号预约</view>
<view class="swiper-tab-list {{currentTab==1 ? 'on' : ''}}" data-current="1" bindtap="swichNav">医生资料</view>
</view>
<swiper current="{{currentTab}}" class="swiper-box" duration="300" style="height:{{winHeight}}px" bindchange="bindChange">
<swiper-item class="swiper0">
<view class="zjtd_line"></view>
<view style="padding: 20rpx;">
<view class="yuyue_left"></view>
<text>{{doctor_time}}{{week}}</text>
<view class="yuyue_right"></view>
</view>
<view class="zjtd_line"></view>
<view class="gh_list">
<view class="item" wx:for="{{get_doctor_time}}" key="index">
<view class="gh_left">
<view>{{item.start_time}}</view><view>{{item.end_time}}</view>
</view>
<view class="gh_money">￥{{item.doctor_price}}</view>
<view class="gh_num">{{item.see_num}}号</view>
<button class="zjtd_btn" style="width:110rpx;">预约</button>
<view class="zjtd_line" style="margin-bottom:10rpx;"></view>
</view>
</view>
</swiper-item>
<swiper-item class="swiper1">
<view class="doctor_content" style="text-align:left;">
简介：{{doctor_info.doctor_note}}
</view>
</swiper-item>
</swiper>js代码：
代码语言：javascript复制data: {
currentTab: 0,
}
//切换代码
swichNav: function( e ) {
var that = this;
if( this.data.currentTab === e.target.dataset.current ) {
return false;
} else {
that.setData( {
currentTab: e.target.dataset.current
})
this.getElementHeight(e.target.dataset.current)
}
},
//动态获取高度
getElementHeight(element) {
//创建节点选择器
var query = wx.createSelectorQuery();
//选择id
var that = this;
if(element==0){
query.select(".gh_list").boundingClientRect(function (rect) {
that.setData({
winHeight: rect.height 50//这里加的50是日期位置的高度，没有这个位置的可忽略
})
}).exec();
}else{
query.select(".doctor_content").boundingClientRect(function (rect) {
that.setData({
winHeight: rect.height
})
}).exec();
}
},
bindChange: function( e ) {
var that = this;
that.setData( { currentTab: e.detail.current });
},
onLoad: function (options) {
//这里利用setdata的回调函数获取已经渲染的当前切换栏目的高度
this.setData({get_doctor_time:res.data},function(){
this.getElementHeight(this.data.currentTab);
});
}对于css，一个一个挑，太麻烦了，所以这里我直接全部晒出来
代码语言：javascript复制/* pages/doctor/index.wxss */
.doctor{
padding: 30rpx;
overflow: hidden;
background-color: #fdfdfd;
}
.doctor_img{ width: 120rpx;height: 120rpx; margin: 10rpx 4rpx 0rpx; border-radius: 5rpx; overflow: hidden;}
.doctor_img img{width:100%;height:100%;object-fit:cover;}
.doctor_word{width:75%;color:#267377;margin-left:10rpx;}
.doctor_p{line-height: 48rpx; float: left;}
.b_gray{background:#ccc;}
.doctor_dir {
margin: 15rpx 0rpx 0rpx 0rpx;
line-height: 43rpx;
text-indent: 20rpx;
float: left;
word-break: break-all;
}
.dir_height{line-height:43rpx;}
.doctor_left{width:94%;float:left;}
/* tab样式开始 */
.main{
padding: 20rpx;
}
.swiper-tab{
display: flex;
margin-bottom: 10rpx;
}
.swiper-tab-list{
display: inline-block;
width: 49.5%;
color: #777777;
text-align: center;
margin-bottom: 10px;
color: #ffffff;
border-bottom: 1px solid #395f64;
padding: 20rpx;
background-color: #395f64;
border-radius: 10rpx;
margin-right: 3rpx;
}
.on{
color: #ffffff;
border-bottom: 1px solid #c70000;
padding: 20rpx;
background-color: #c70000;
}
.swiper-box{
width: 100%;
height: auto;
}
.swiper-box view{
text-align: center;
}
/* tab样式结束 */
.yuyue_left{
float:left;
}
.yuyue_right{
float:right;
}
.gh_list{
margin-top:20rpx;
}
.gh_left{
float: left;
width:25%;
}
.gh_left view {
background-color: #fbfbfb;
color: #000;
padding: 8rpx;
margin-bottom: 8rpx;
border: 1px solid #e6e6e6;
border-radius: 10rpx;
}
.gh_money{
float:left;
width:25%;
text-align:center;
margin-top: 35rpx;
}
.gh_num{
float:left;
width:25%;
text-align:center;
margin-top: 35rpx;
}
.zjtd_btn {
font-size: 28rpx;
color: white;
padding: 2rpx;
font-weight: unset;
background-color: #d20303;
top: 25rpx;
}
.spfl{
padding: 25rpx;
font-size: 28rpx;
color:#ffffff;
background-color: #395f64;
border-bottom:1rpx solid #d4d4d4;
overflow: hidden;
}
.zkfl_lj{
float: right;
}
.doctor_list{
text-align: center;
overflow: hidden;
}
.doc_one{
width:25%;
float: left;
}
.doctor_imgs{
width:100%;
height: 120rpx;
margin: 30rpx 0rpx 13rpx;
border-radius: 5rpx;
overflow: hidden;
}
.doctor_txt{
text-align:center;
}
.doctor_content{
color:#333333;
text-align: left;
line-height: 40rpx;
float: left;
padding: 15rpx;
}
