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

效果图：

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

代码语言：javascript复制

下面是代码

代码语言：javascript复制

html

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



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

webview 前端性能监控uniapp 前端高级 scroll-view swiper tab

0 人点赞