【黄啊码】微信小程序swipe切换及自适应高度问题解决

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

我用的是医疗小程序挂号的例子，示例如图所示

<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代码：

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，一个一个挑，太麻烦了，所以这里我直接全部晒出来

/* pages/doctor/index.wxss */

1. .doctor{
2. padding: 30rpx;
3. overflow: hidden;
4. background-color: #fdfdfd;
5. }
6. .doctor_img{ width: 120rpx;height: 120rpx; margin: 10rpx 4rpx 0rpx; border-radius: 5rpx; overflow: hidden;}
7. .doctor_img img{width:100%;height:100%;object-fit:cover;}
8. .doctor_word{width:75%;color:#267377;margin-left:10rpx;}
9. .doctor_p{line-height: 48rpx; float: left;}
11. .b_gray{background:#ccc;}
12. .doctor_dir {
13. margin: 15rpx 0rpx 0rpx 0rpx;
14. line-height: 43rpx;
15. text-indent: 20rpx;
16. float: left;
17. word-break: break-all;
18. }
19. .dir_height{line-height:43rpx;}
20. .doctor_left{width:94%;float:left;}
21. /* tab样式开始 */
22. .main{
23. padding: 20rpx;
24. }
25. .swiper-tab{
26. display: flex;
27. margin-bottom: 10rpx;
28. }
29. .swiper-tab-list{
30. display: inline-block;
31. width: 49.5%;
32. color: #777777;
33. text-align: center;
34. margin-bottom: 10px;
35. color: #ffffff;
36. border-bottom: 1px solid #395f64;
37. padding: 20rpx;
38. background-color: #395f64;
39. border-radius: 10rpx;
40. margin-right: 3rpx;
41. }
42. .on{
43. color: #ffffff;
44. border-bottom: 1px solid #c70000;
45. padding: 20rpx;
46. background-color: #c70000;
47. }
49. .swiper-box{
50. width: 100%;
51. height: auto;
52. }
53. .swiper-box view{
54. text-align: center;
55. }
56. /* tab样式结束 */
57. .yuyue_left{
58. float:left;
59. }
60. .yuyue_right{
61. float:right;
62. }
63. .gh_list{
64. margin-top:20rpx;
65. }
66. .gh_left{
67. float: left;
68. width:25%;
69. }
70. .gh_left view {
71. background-color: #fbfbfb;
72. color: #000;
73. padding: 8rpx;
74. margin-bottom: 8rpx;
75. border: 1px solid #e6e6e6;
76. border-radius: 10rpx;
77. }
78. .gh_money{
79. float:left;
80. width:25%;
81. text-align:center;
82. margin-top: 35rpx;
83. }
84. .gh_num{
85. float:left;
86. width:25%;
87. text-align:center;
88. margin-top: 35rpx;
89. }
90. .zjtd_btn {
91. font-size: 28rpx;
92. color: white;
93. padding: 2rpx;
94. font-weight: unset;
95. background-color: #d20303;
96. top: 25rpx;
97. }
98. .spfl{
99. padding: 25rpx;
100. font-size: 28rpx;
101. color:#ffffff;
102. background-color: #395f64;
103. border-bottom:1rpx solid #d4d4d4;
104. overflow: hidden;
105. }
106. .zkfl_lj{
107. float: right;
108. }
109. .doctor_list{
110. text-align: center;
111. overflow: hidden;
112. }
113. .doc_one{
114. width:25%;
115. float: left;
116. }
117. .doctor_imgs{
118. width:100%;
119. height: 120rpx;
120. margin: 30rpx 0rpx 13rpx;
121. border-radius: 5rpx;
122. overflow: hidden;
123. }
124. .doctor_txt{
125. text-align:center;
126. }
127. .doctor_content{
128. color:#333333;
129. text-align: left;
130. line-height: 40rpx;
131. float: left;
132. padding: 15rpx;
133. } 啊码整理了一部分小程序的案例，比较适合入门的朋友入手，如果需要可以从该链接【1】、链接【2】进入