1. 程式人生 > >小程式tab切換,內容高度自適應

小程式tab切換,內容高度自適應

<view class='aboutusContainer'>
    <image src='/assets/images/company.png' class='companyLogo'></image>
    <view class='tabContainer'> 
          <text class="tab-item {{currentTab==0?'active':''}}" data-current="0" bindtap="clickTab">公司介紹</text>
          <text class="tab-item {{currentTab==1?'active':''}}" data-current="1" bindtap="clickTab">企業資質</text>
          <text class="tab-item {{currentTab==2?'active':''}}" data-current="2" bindtap="clickTab">發展歷程</text>
          <text class="tab-item {{currentTab==3?'active':''}}" data-current="3" bindtap="clickTab">分支機構</text>
    </view>
    <view class='line'></view>
    <view class='detailContainer'>
    <swiper current="{{currentTab}}" class="swiper-box" duration="300" style="height: {{winHeight?winHeight+'px':'auto'}}"  bindchange="bindChange">  
     <!-- 公司介紹頁面 -->
     <swiper-item>  
      <scroll-view scroll-y="true" style="height: {{winHeight?winHeight+'px':'auto'}}">
      <view class='companyProfile'>
        公司介紹
      </view>
      </scroll-view>
      </swiper-item>  
      <swiper-item> 
        <scroll-view> 
          <view class='qualification'>企業資質</view>
        </scroll-view>
      </swiper-item>  
      <swiper-item> 
        <scroll-view> 
         <view class='devHistory '>發展歷程</view>
        </scroll-view>
      </swiper-item>  
      <swiper-item> 
        <scroll-view> 
          <view class='branchGroup '>分支機構</view>
        </scroll-view>
      </swiper-item>  
      </swiper>
  </view>
</view>
<--css樣式-->
.detailContainer{
  width: 90%;
  height: 100%;
  margin: 40rpx auto;
  overflow-y: scroll;
}
/* 隱藏滾動條 */
::-webkit-scrollbar {
  display: none;
}
<--js-->
// pages/aboutus/aboutus.js
Page({
  data: {
    // tab切換  
    currentTab: 0,
     winWidth:0,
    winHeight:0
  },

  /**
   * 生命週期函式--監聽頁面載入
   */
  onLoad: function (options) {
    var that = this;
    wx.getSystemInfo({
      success: function (res) {
        that.setData({
          winWidth: res.windowWidth,
         winHeight: res.windowHeight
        });
      }
    });

  },
  bindChange: function (e) {
    var that = this;
    that.setData({ currentTab: e.detail.current });
  },
  clickTab: function (e) {
    var that = this;
    if (this.data.currentTab === e.target.dataset.current) {
      return false;
    } else {
      that.setData({
        currentTab: e.target.dataset.current
      })
    }
  },
})