記錄:小程式前端開發之tab選項卡與swiper高度自適應的問題與解決記錄
阿新 • • 發佈：2018-12-21
小白前端，記錄一下自己平時遇到的問題與解決方案，方便用到的時候檢視。
今天，自己弄了一個選項卡，選項卡內容沒有問題，可是到了選項卡下面的swiper的時候，就卡住了，我的需求是swiper裡面的內容可以根據資料來自適應高度。因為swiper小程式必須要有固定的高度，不然就得用小程式封裝的預設高度150rpx,而我裡面的內容高度是不固定的，是根據資料來適應高度的，前前後後查了好久，網上的前輩們的部落格也看了許多，可是都沒有解決這個高度自適應的問題，最後還是問了同為大神的同學，給了scroll-view動態計算的高度，就解決了我好久不能搞定的問題，果然，經驗無價啊。
效果圖如下：
下面來記錄功能程式碼：
wxml部分:
<view> <view class='swiper-tab'> <view class="swiper-tab-item {{currentTab==0?'active':''}}" data-current="0" bindtap="clickTab">待付款</view> <view class="swiper-tab-item {{currentTab==1?'active':''}}" data-current="1" bindtap="clickTab">待發貨</view> <view class="swiper-tab-item {{currentTab==2?'active':''}}" data-current="2" bindtap="clickTab">待收貨</view> <view class="swiper-tab-item {{currentTab==3?'active':''}}" data-current="3" bindtap="clickTab">已完成</view> </view> <swiper class='swiper' current='{{currentTab}}' duration="300" bindchange="bindchange"> <view > <swiper-item> <scroll-view scroll-y="true"> <view class='gaodu'>第一頁</view> <view class='gaodu'>第一頁</view> <view class='gaodu'>第一頁</view> <view class='gaodu'>第一頁</view> <view class='gaodu'>第一頁</view> <view class='gaodu'>第一頁</view> <view class='gaodu'>第一頁</view> <view class='gaodu'>第一頁</view> <view class='gaodu'>第一頁</view> <view class='gaodu'>第一頁</view> <view class='gaodu'>第一頁</view> <view class='gaodu'>第一頁</view> <view class='gaodu'>第一頁</view> <view class='gaodu'>顯示</view> </scroll-view> </swiper-item> </view> <swiper-item> <scroll-view scroll-y="true"> <view class='gaodu'>第二頁</view> <view class='gaodu'>第二頁</view> <view class='gaodu'>第二頁</view> <view class='gaodu'>第二頁</view> <view class='gaodu'>第二頁</view> <view class='gaodu'>第二頁</view> <view class='gaodu'>第二頁</view> <view class='gaodu'>第二頁</view> <view class='gaodu'>第二頁</view> <view class='gaodu'>第二頁</view> <view class='gaodu'>第二頁</view> </scroll-view> </swiper-item> <swiper-item> <scroll-view scroll-y="true"> <view class='gaodu'>第三頁</view> <view class='gaodu'>第三頁</view> <view class='gaodu'>第三頁</view> <view class='gaodu'>第三頁</view> <view class='gaodu'>第三頁</view> <view class='gaodu'>第三頁</view> <view class='gaodu'>第三頁</view> <view class='gaodu'>第三頁</view> <view class='gaodu'>第三頁</view> <view class='gaodu'>第三頁</view> <view class='gaodu'>第三頁</view> </scroll-view> </swiper-item> <swiper-item> <scroll-view scroll-y="true"> <view class='gaodu'>第四頁</view> <view class='gaodu'>第四頁</view> <view class='gaodu'>第四頁</view> <view class='gaodu'>第四頁</view> <view class='gaodu'>第四頁</view> <view class='gaodu'>第四頁</view> <view class='gaodu'>第四頁</view> <view class='gaodu'>第四頁</view> <view class='gaodu'>第四頁</view> <view class='gaodu'>第四頁</view> <view class='gaodu'>第四頁</view> <view class='gaodu'>第四頁</view> <view class='gaodu'>1第四頁</view> <view class='gaodu'>0</view> </scroll-view> </swiper-item> </swiper> </view>
wxss部分:
.swiper-tab{ display: flex; height: 80rpx; line-height: 80rpx; width: 100%; position:fixed; top:0; z-index: 100; background: #fff; } .swiper-tab-item{ flex: 1; text-align: center; border-bottom: 1rpx solid #eee; } .active{ color: blue; position: relative; } .swiper-tab-item.active:after{ content: ""; display: block; height: 6rpx; width: 60rpx; background: #4675F9; position: absolute; bottom: 0; left: 65rpx; border-radius: 16rpx; } .swiper{ width: 100%; height: 100%; display: flex; position: fixed; top:80rpx; } scroll-view{ width: 100%; height: 93%;/*動態高度*/ } .gaodu{ height: 100rpx; background: rgb(196, 248, 255); text-align: center; line-height: 100rpx; border-bottom: 1rpx solid #4675F9; }
js部分:
Page({
data: {
currentTab: 0 //預定的位置
},
//點選滑動
bindchange: function (e) {
let that = this;
that.setData({
currentTab: e.detail.current
})
},
//點選切換，滑塊index賦值
clickTab: function (e) {
let that = this;
if (that.data.currentTab === e.currentTarget.dataset.current) {
return false;
} else {
that.setData({
currentTab: e.currentTarget.dataset.current
})
}
}
})