微信小程序tab栏切换高度自适应-代码模板（直接复制即可）

 

有搜索栏 （不要搜索框的话删除wxml文件中的搜索view板块即可）

效果图

 

wxml文件代码：

<!--pages/index/index.wxml-->
<view class="header">
    <view class="com-search">
        <input type="text" placeholder="酒席名称查询" confirm-type="search" bindconfirm="bindconfirm"
            bindinput='searchInput' />
        <button>
            <text bindtap="bindconfirm"></text>
        </button>
    </view>
    <view class="mun">
        <span class="{{munStyle[0]}}" bindtap="clickMun" data-num="1">全部酒席</span>
        <span class="{{munStyle[1]}}" bindtap="clickMun" data-num="2">待办酒席</span>
        <span class="{{munStyle[2]}}" bindtap="clickMun" data-num="3">已办酒席</span>
    </view>
</view>

<scroll-view scroll-y style="height: {{height}}rpx;" class="content">

    <view class="content-info">
        的撒旦水水1
    </view>
    
    <view>
        <view class="content-info">
            的撒旦水水
        </view>
        <view class="content-info">
            的撒旦水水
        </view>

        <view class="content-info">
            的撒旦水水
        </view>
        <view class="content-info">
            的撒旦水水
        </view>
        <view class="content-info">
            的撒旦水水
        </view>
        <view class="content-info">
            的撒旦水水
        </view>
        <view class="content-info">
            的撒旦水水
        </view>
        <view class="content-info">
            的撒旦水水
        </view>
        <view class="content-info">
            的撒旦水水
        </view>
        <view class="content-info">
            的撒旦水水
        </view>
        <view class="content-info">
            的撒旦水水
        </view>
        <view class="content-info">
            的撒旦水水
        </view>
        <view class="content-info">
            的撒旦水水
        </view>
        <view class="content-info">
            的撒旦水水
        </view>
        <view class="content-info">
            的撒旦水水
        </view>
        <view class="content-info">
            的撒旦水水
        </view>
    </view>

</scroll-view>

wxss文件代码：

/* pages/index/index.wxss */
page {
  background: #fafafa;
}

.header{
  padding-top: 10rpx;
}

.mun {
  border-top: 1px solid #fafafa;
  background: #fff;
  display: flex;
  justify-content: space-around;
}

.mun>span {
  width: 100%;
  text-align: center;
  padding: 18rpx;
  padding-bottom: 27rpx;
  font-size: 32rpx;
  position: relative;
}

.bor {
  color: #fc6e12;
}

.bor::after {
  content: "";
  height: 9rpx;
  background: #fc6e12;
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
}

/* 搜索框 */
.com-search {
  width: 680rpx;
  height: 90rpx;
  /* border: 3rpx solid #eee; */
  background: rgba(215, 213, 215, 0.8);
  margin: 0 auto 10rpx;
  position: relative;
  border-radius: 34rpx;
}

.com-search input {
  width: 540rpx;
  height: 80rpx;
  font-size: 26rpx;
  position: absolute;
  outline: none;
  /* border: 1px solid blue; */
  padding-left: 40rpx;
  top: 0;
  bottom: 0;
  margin: auto 0;
}

.com-search button {
  width: 110rpx !important;
  height: 100%;
  background: #fc6e12;
  font-size: 25rpx;
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto 0;
  border-radius: 0 34rpx 34rpx 0;
  overflow: hidden;
}

.com-search text {
  border-radius: 0 34rpx 34rpx 0;
  display: block;
  width: 100%;
  height: 90rpx;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAACWklEQVRYR7VWy1VVQRCsikCIQIlAiADcuEUiUCIQIhAjUCMQIhDWLJQI1AjECIQI2lMw806/fvO793D7nLu6M9PV1dUfYsDM7A2AQwAvAOwC2AJwB+AXgFsAlySvBp7aOMLWJTM7A/A+Oey9L0AnJC96B/3/IgAzU5TfUsRT3tNZsXJEUsx0bQNAovvrYNQ1B2LjFUmBadoagBT594LzvwA+p1yvIjMzaUL6OAHwPHgaArECYGYS1p+C848kpYWmJb18CIfEgJgQmKJ5AIpQgvN2TPK85zz/N7N3AJQ+b80AHgAkKhW9t1OSAjXJzEzp+OQuKfqdGgsZQLz0m6QqYZaZmXTiNVFlMgNQrl46byqjy1neHxmNqbgiKbFuWAZg7s89SQlytiVB//MPkCz2HBYO35A8mO09XYxpaAGQM9V+tqcC8APAvnt3uyREMSCx/VwAwJquqgzIsZl5DdyS3HmCFPg30QMQy2ZvpI/XQKZ5omGWrVrWuQpiF/xCUr1hlpmZuudbd7naDTOAKETdncWCmU16y8+CqNruIIn0VAZatQnpvgdQQj68XDSWGM2B6nIS94E4EwRSw0QakS42xmoaZMp3aWR3p2lpI4oC8kyLkbyIqn/kJbUk1muSr3sqru2EiiYuF723Sv+nM5BfSWoW9X5K9kDcA3gWDjVBNNfy1CU1WjVKJdL4uI7IqUa3PlWSvgi6vQ/0wgqs+ON3sWOmUhwG0WVgFJw/NwXEIgBS6rTUdJlYDMAoiEUBNEBIO9trrXhOrkfvFDSx2jsXZ8BVUNaEuudBrp7/qsANMJ9z0bcAAAAASUVORK5CYII=) 50% 50% no-repeat;
  background-size: 34%;
  position: absolute;
  top: 0;
  left: 0;
}



/* 主体内容 */
.content {
  height: 600rpx;
  background: #fafafa;
  position: fixed;
}

.content-info {
  height: 220rpx;
  background: rgb(87, 87, 87);
  margin-top: 34rpx;
}

js文件代码：

// pages/index/index.js
Page({

    data: {
        height: "",
        munStyle: ['bor', '', ''],
        searchContent: ""
    },

    /**
     * 点击键盘上的搜索
     */
    bindconfirm: function (e) {
        console.log("搜索内容 " + this.data.searchContent)
    },

    /**
     * 点击菜单操作
     */
    getContentData: function () {
        console.log("点击了菜单") // 发送请求获取数据
    },

    /**
     * 记录搜索框输入的数据
     */
    searchInput: function (e) {
        console.log(e.detail.value)
        this.setData({
            searchContent: e.detail.value
        })
    },

    /**
     * 点击头部tab选项卡
     */
    clickMun: function (e) {
        var mun = e.currentTarget.dataset.num;

        var munStyleList = this.data.munStyle;
        for (let index in munStyleList) {
            if ((mun - 1) == index) munStyleList[index] = 'bor';
            else munStyleList[index] = '';
        }
        this.setData({
            munStyle: munStyleList
        })

        switch (mun) {
            case '1':
                this.getContentData();
                break;
            case '2':
                this.getContentData();
                break;
            case '3':
                this.getContentData();
                break;
            default:
                console.log('菜单不存在');
        }
    },



    /**
     * 设置内容区域高度自适应
     */
    setHeightContent: function () {
        var that = this
        var query = wx.createSelectorQuery()
        query.select('.header').boundingClientRect(function (res) { // 获取头部view的高度
            var resHeight = res.height
            wx.getSystemInfo({ // 获取网页高度
                success: function (res) {
                    let windowHeight = (res.windowHeight * (750 / res.windowWidth));
                    resHeight = (resHeight * (750 / res.windowWidth));
                    console.log("屏幕高度可用:" + windowHeight + "rpx");
                    console.log("内容区域可用高度" + (windowHeight - resHeight) + "rpx")
                    console.log("内容区域距离顶部高度" + resHeight + "rpx")

                    that.setData({
                        height: windowHeight - resHeight //网页高度 - 头部高度
                    })
                }
            })
        }).exec();
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {

    },

    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {
        this.setHeightContent();
    },

    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {

    },

    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {

    },

    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {

    },

    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {

    },

    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {

    },

    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {

    }
})

json文件代码：

{
    "usingComponents": {},
    "navigationBarTitleText": "酒席单"
}