小程式tab切換,內容高度自適應
阿新 • • 發佈:2018-12-30
<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 }) } }, })