uniapp使用scroll-view与swiper组件实现tab滑动切换页面需要注意的问题

效果图：

tab栏可以滑动，切换页面跟随tab栏同步滑动。这里需要注意的是使用swiper组件时，它会有一个默认的高度，你必须动态的获取数据列表的高度覆盖原来的默认高度。

下面是代码

html

>
    >
                    class="scroll1" scroll-x="true">
                        :class="currentTab==index ? 'select' : ''" :data-current="index" @click="swichNav" v-for="(item,index) in scoll"
                         :key='index'>{{item.txt}}
                        >
                    >
                    :current="currentTab" @change="bindChange" class='swp'  :style="{height:aheight?aheight+'px':'auto'}">
                        >
                            class="list-item">
                                class="list" v-for="(item,index) in list" :key='index'>
                                    class="list-img">
                                        :src="item.imgb" mode="">>
                                    >
                                    class="list-con">
                                        >{{item.tit}}>
                                        class="list-foot">
                                            >
                                                src="../../static/images/user.png" mode="" class="user">>
                                                class="username">{{item.user}}>
                                            >
                                            >
                                                src="../../static/images/love.png" mode="" class="like">>
                                                class="likenum">{{item.like}}>
                                            >
                                        >
                                    >
                                >
                            >
                        >
                        >玻尿酸>
                        >水光针>
                        >眼部>
                        >鼻部>
                        >瘦身塑型>
                    >
                >
>



js

<script>
export default {
data() {
    return {
            currentTab: 0,
            aheight: '',
            scoll: [{
                    txt: '精选'
                }, {
                    txt: '玻尿酸'
                }, {
                    txt: '水光针'
                }, {
                    txt: '眼部'
                }, {
                    txt: '鼻部'
                }, {
                    txt: '瘦身塑型'
                }],
    }
}
onShow(){
            // 动态获取滑动页面高度

更多内容请见原文，原文转载自：https://blog.csdn.net/weixin_44519496/article/details/119251201