看看这里控制内容高度的是那一段

Question

用swipr做一个手机tab，可变化的内容区域无法根据内容的多少自动改变高度，咋办？

$(function(){
    //暂时设计每个slide大小需要一致
    barwidth = 36 //导航粉色条的长度px
    tSpeed = 300 //切换速度300ms
var navSwiper = new Swiper('#nav', {
    slidesPerView: 6,
    freeMode: true,
    on: {
        init: function() {
            navSlideWidth = this.slides.eq(0).css('width'); //导航字数需要统一,每个导航宽度一致
            bar = this.$el.find('.bar')
            bar.css('width', navSlideWidth)
            bar.transition(tSpeed)
            navSum = this.slides[this.slides.length - 1].offsetLeft //最后一个slide的位置

            clientWidth = parseInt(this.$wrapperEl.css('width')) //Nav的可视宽度
            navWidth = 0
            for (i = 0; i < this.slides.length; i++) {
                navWidth += parseInt(this.slides.eq(i).css('width'))
            }

            topBar = this.$el.parents('body').find('#top') //页头

        },

    },
});

var pageSwiper = new Swiper('#page', {
    watchSlidesProgress: true,
    resistanceRatio: 0,
    on: {
        touchMove: function() {
            progress = this.progress
            bar.transition(0)
            bar.transform('translateX(' + navSum * progress + 'px)')
                //粉色255,72,145灰色51,51,51
            for (i = 0; i < this.slides.length; i++) {
                slideProgress = this.slides[i].progress
                if (Math.abs(slideProgress) < 1) {
                    r = Math.floor((255 - 51) * (1 - Math.pow(Math.abs(slideProgress), 2)) + 51)
                    g = Math.floor((72 - 51) * (1 - Math.pow(Math.abs(slideProgress), 2)) + 51)
                    b = Math.floor((145 - 51) * (1 - Math.pow(Math.abs(slideProgress), 2)) + 51)
                    navSwiper.slides.eq(i).find('span').css('color', 'rgba(' + r + ',' + g + ',' + b + ',1)')
                }
            }
        },
        transitionStart: function() {
            activeIndex = this.activeIndex
            activeSlidePosition = navSwiper.slides[activeIndex].offsetLeft
                //释放时导航粉色条移动过渡
            bar.transition(tSpeed)
            bar.transform('translateX(' + activeSlidePosition + 'px)')
                //释放时文字变色过渡
            navSwiper.slides.eq(activeIndex).find('span').transition(tSpeed)
            navSwiper.slides.eq(activeIndex).find('span').css('color', 'rgba(255,72,145,1)')
            if (activeIndex > 0) {
                navSwiper.slides.eq(activeIndex - 1).find('span').transition(tSpeed)
                navSwiper.slides.eq(activeIndex - 1).find('span').css('color', 'rgba(51,51,51,1)')
            }
            if (activeIndex < this.slides.length) {
                navSwiper.slides.eq(activeIndex + 1).find('span').transition(tSpeed)
                navSwiper.slides.eq(activeIndex + 1).find('span').css('color', 'rgba(51,51,51,1)')
            }
            //导航居中
            navActiveSlideLeft = navSwiper.slides[activeIndex].offsetLeft //activeSlide距左边的距离

            navSwiper.setTransition(tSpeed)
            if (navActiveSlideLeft < (clientWidth - parseInt(navSlideWidth)) / 2) {
                navSwiper.setTranslate(0)
            } else if (navActiveSlideLeft > navWidth - (parseInt(navSlideWidth) + clientWidth) / 2) {
                navSwiper.setTranslate(clientWidth - navWidth)
            } else {
                navSwiper.setTranslate((clientWidth - parseInt(navSlideWidth)) / 2 - navActiveSlideLeft)
            }

        },
    }
});

navSwiper.$el.on('touchstart', function(e) {
    e.preventDefault() //去掉按压阴影
})
navSwiper.on('tap', function(e) {

    clickIndex = this.clickedIndex
    clickSlide = this.slides.eq(clickIndex)
    pageSwiper.slideTo(clickIndex, 0);
    this.slides.find('span').css('color', 'rgba(51,51,51,1)');
    clickSlide.find('span').css('color', 'rgba(255,72,145,1)');
})

//内容滚动            
var scrollSwiper = new Swiper('.scroll', {

    //65是头部的高
    //36是top地址和搜索的高

    slidesOffsetBefore: 72,
    direction: 'vertical',
    freeMode: true,
    slidesPerView: 'auto',

    mousewheel: {
        releaseOnEdges: true,
    },
    on: {
        touchMove: function() {

            if (this.translate > 72 - 36 && this.translate < 72) {
                topBar.transform('translateY(' + (this.translate - 72) + 'px)');
            }

        },
        touchStart: function() {
            startPosition = this.translate
        },
        touchEnd: function() {
            topBar.transition(tSpeed)
            if (this.translate > 36 && this.translate < 72 && this.translate < startPosition) {
                topBar.transform('translateY(-36px)');
                for (sc = 0; sc < scrollSwiper.length; sc++) {
                    if (scrollSwiper[sc].translate > 36) {
                        scrollSwiper[sc].setTransition(tSpeed);
                        scrollSwiper[sc].setTranslate(36)
                    }
                }
            }
            if (this.translate > 36 && this.translate < 72 && this.translate > startPosition) {
                topBar.transform('translateY(0px)');
                for (sc = 0; sc < scrollSwiper.length; sc++) {
                    if (scrollSwiper[sc].translate < 72 && scrollSwiper[sc].translate > 0) {
                        scrollSwiper[sc].setTransition(tSpeed);
                        scrollSwiper[sc].setTranslate(72)
                    }
                }
            }
        },

        transitionStart: function() {

            topBar.transition(tSpeed)
            if (this.translate < 72 - 36) {
                topBar.transform('translateY(-36px)');
                if (scrollSwiper) {
                    for (sc = 0; sc < scrollSwiper.length; sc++) {
                        if (scrollSwiper[sc].translate > 36) {
                            scrollSwiper[sc].setTransition(tSpeed);
                            scrollSwiper[sc].setTranslate(36)
                        }
                    }
                }

            } else {
                topBar.transform('translateY(0px)');

                if (scrollSwiper) {
                    for (sc = 0; sc < scrollSwiper.length; sc++) {
                        if (scrollSwiper[sc].translate < 72 && scrollSwiper[sc].translate > 0) {
                            scrollSwiper[sc].setTransition(tSpeed);
                            scrollSwiper[sc].setTranslate(72)
                        }
                    }
                }
            }
        },
    }

    })
    //热卖        
    var bannerSwiper = new Swiper('.banner', {
        loop: true,
        pagination: {
            el: '.swiper-pagination',
            type: 'fraction',
            renderFraction: function(currentClass, totalClass) {
                return ''">' + '/' + ''">';
            },
        },
    });
});

Answer 1

如果使用 swiper 实现移动端的 Tab 切换，但是内容区域高度不能自动改变，您可以使用 JavaScript 监听 Tab 切换事件，并动态设置内容区域的高度。

以下是一些示例代码，帮助您实现此功能：

HTML 代码：

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">Tab 1</div>
    <div class="swiper-slide">Tab 2</div>
    <div class="swiper-slide">Tab 3</div>
  </div>
</div>

<div class="content-wrap">
  <div class="content">Tab 1 Content</div>
  <div class="content">Tab 2 Content. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin auctor orci et tristique ultrices. Donec aliquam egestas urna, eu volutpat nisl suscipit vitae.</div>
  <div class="content">Tab 3 Content. Vivamus placerat vestibulum velit, a tincidunt orci congue ac. Nulla nec mauris vel tortor finibus finibus in et augue.</div>
</div>

CSS 代码：

.content-wrap {
  overflow: hidden;  /* 隐藏内容区域溢出部分 */
}

.content {
  height: auto;      /* 内容区域高度自适应 */
  padding: 20px;     /* 为内容区域添加一些内边距 */
}

JavaScript 代码：

var contentWrap = document.querySelector('.content-wrap');
var contents = document.querySelectorAll('.content');

var swiper = new Swiper('.swiper-container', {
  on: {
    slideChangeTransitionEnd: function () {
      var activeIndex = this.activeIndex;
      var activeContent = contents[activeIndex];
      var paddingBottom = contentWrap.offsetHeight - activeContent.offsetHeight;
      contentWrap.style.paddingBottom = paddingBottom + 'px';
    }
  }
});

在上述示例代码中，我们首先使用 HTML 和 CSS 创建了 swiper 和内容区域的基本结构，并将内容区域的 height 属性设置为 auto 以使其高度自适应。

然后，使用 JavaScript 获取内容区域和所有内容元素的引用，并使用 swiper 的 on 事件监听器函数监听 slideChangeTransitionEnd 事件。每次 Tab 切换事件发生时，获取当前活动的内容元素并计算内容区域底部的内边距（即内容区域高度减去活动内容元素的高度）。最后，使用计算出的内边距设置内容区域的底部内边距，使其高度动态适应内容元素的高度。

通过以上方法，您可以轻松地实现移动端 Tab 切换，并使内容区域高度自动适应不同内容。