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

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

效果图：

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

下面是代码

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(){ // 动态获取滑动页面高度