小程序开发中关于选项卡高度自适应和选项卡内按钮位置固定的实现

首先大家都知道小程序自带的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'>

<view class='title'>
      <view class="{{0 == currentIndex ? 'title-sel-selected' : 'title-sel'}}" bindtap='titleClick' data-idx='0'>
      <text>tab1text>
      <hr class="line-style" />
      view>
      <view class="{{1 == currentIndex ? 'title-sel-selected' : 'title-sel'}}" bindtap='titleClick' data-idx='1'>
      <text>tab2text>
      <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.成果展示：

好啦，到此就差不多完成啦，大家还有别的好方法的话欢迎来提~~~~