小程序開發中關於選項卡高度自適應和選項卡內按鈕位置固定的實現

首先大家都知道小程序自帶的swiper工具是有默認高度的，所以在實際開發中高度自適應的實現是必修課，比較簡單的實現高度自適應的方法是利用scroll-view工具。

選項卡工具swiper高度自適應和按鈕位置固定的時候，會導致按鈕即便設置了fixed屬性也會跟隨scroll-view的滑動改變位置；

解決思路：讓按鈕既在swiper-item中，又不能隨scroll-view變化，同時讓選項卡標題fixed在頁面頂部
方法：在swiper-item中嵌套一個scroll-view
改進：單純的嵌套一個scroll-view會導致選項卡內容無無法顯示，在scroll-view和他上層的swiper中添加style="height: {{clientHeight?clientHeight+'px':'auto'}}"高度屬性

1、wxml部分：

<view class='ticket-container'>
<!--選項卡Tab布局-->
<view class='title'>
      <view class="{{0 == currentIndex ? 'title-sel-selected' : 'title-sel'}}" bindtap='titleClick' data-idx='0'>
      <text>tab1</text>
      <hr class="line-style" />
      </view>
      <view class="{{1 == currentIndex ? 'title-sel-selected' : 'title-sel'}}" bindtap='titleClick' data-idx='1'>
      <text>tab2</text>
      <hr class="line-style" />
      </view>
</view>
<!--內容布局-->
<swiper style="height: {{clientHeight?clientHeight+'px':'auto'}}"   class='swiper' bindchange='pagechange' current='{{currentIndex}}'>
    <swiper-item class='swiper'>
    <scroll-view scroll-y style="height: {{clientHeight?clientHeight+'px':'auto'}}" >
    <view style="text-align:center">tab1內容</view>
    <image src="/pages/index/1.jpg" mode="aspectFit"></image>
    <image src="/pages/index/1.jpg" mode="aspectFit"></image>
    <image src="/pages/index/1.jpg" mode="aspectFit"></image>
    </scroll-view>
<view class="image_detail">
    <button class="btn">
    <text>tab1的按鈕</text>
    </button>
</view>
</swiper-item>
<swiper-item class='swiper'>
<scroll-view scroll-y style="height: {{clientHeight?clientHeight+'px':'auto'}}" >
    <view>tab2內容</view>
</scroll-view>
<view class="image_detail">
    <button  class="btn">
    <text>tab2的按鈕</text>
    </button>
</view>
</swiper-item>
</swiper>
</view>

2.wxss部分：

.table {
  border: 0px solid darkgray;
  padding-bottom: 230rpx;
}

.title {
  width: 100%;
  height: 88rpx;
  background: white;
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin-top: 20rpx;
}
.title-sel {
  color: #24272c;
  font-size: 32rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.title-sel  .line-style {
  background: #fff;
  height: 6rpx;
  width: 40rpx;
  position: relative;
  margin-top: 10rpx;
}
.title-sel-selected {
  color: #006bff;
  font-size: 32rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.title-sel-selected .line-style {
  background: #006bff;
  height: 6rpx;
  width: 90rpx;
  position: relative;
  margin-top: 10rpx;
}
.swiper {
  width: 100%;
  height: 100%;
  flex: 1;
  overflow: scroll;
  margin: 0 auto;
  /* position: relative; */
}
.ticket-container{
  position:fixed;
  top:0;
  width:100%;
}
.image_detail {
  display: flex;
  flex-direction: column;
  width: 100%;
  text-align: center;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  margin-top: 10rpx;
  margin-bottom: 10rpx;
  background-color: #f1f1f1;
}
/*按鈕設計*/
.btn {
  margin-top: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  border-radius: 30px;
  background: #006bff;
  color: white;
  padding: 20rpx 50rpx;
  position: fixed;
  bottom: 130rpx;
}

3.js部分：

//logs.js
// const app = getApp()
// const util = require('../../utils/util.js')

Page({
  data: {
  currentIndex:0
},
//swiper切換時會調用
pagechange: function(e) {
  // console.log(e)
  this.setData({
    currentIndex: e.detail.current
  })
},

//用戶點擊tab時調用
titleClick: function(e) {
  this.setData({
    //拿到當前索引並動態改變
    currentIndex: e.currentTarget.dataset.idx
  })
},
onLoad: function(options) {
  var that=this
  //獲取高度
  wx.getSystemInfo({ 
    success: function (res) { 
        that.setData({ 
            clientHeight: res.windowHeight 
        }); 
    } 
}) 
wx.showShareMenu({
  withShareTicket: true
})
wx.setNavigationBarTitle({ title: '選項卡制作' })  

}
})

4.成果展示：

好啦，到此就差不多完成啦，大家還有別的好方法的話歡迎來提~~~~