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

阿新 • • 發佈：2020-07-09

首先大家都知道小程式自帶的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: '選項卡製作' })  

}
})