uviewui+uni ui 实现tabs栏swiper切换效果

裂痕Anderson

已于 2022-06-13 00:40:30 修改

阅读量2.2k

点赞数

文章标签： vue.js 前端 javascript

于 2022-06-13 00:33:47 首次发布

本文链接：https://blog.csdn.net/m0_60414983/article/details/125252432

版权

本文介绍了如何利用uviewui和uni UI组件在前端项目中创建tabs栏与swiper轮播图的切换效果。关键点包括在tab切换时监听@change事件，通过设置:current属性来同步tabs和swiper的选中状态，并解决swiper默认高度导致的布局问题。务必详细阅读组件文档以避免踩坑。

摘要由CSDN通过智能技术生成

两个组件实现切换效果

有点麻烦仔细阅读文档！！！阅读文档！！

<view class="tabList">
   <u-tabs :list="tab" :is-scroll="false" :current="current" @change="tabchange"> tab栏目
<swiper :current="swiperCurrent" @change="transition" class="swipeHeiht"> 轮播图开始
	<swiper-item class="swiper-item" v-for="(item, index) in newslist" :key="index">
	<scroll-view scroll-y style="height:100%;width: 100%;" @scrolltolower="">滚动栏@scrolltolower触底事件
	<Item v-for="(itm,index) in 4" :key="index"></Item><!-- //引入组件 -->
	</scroll-view>
</swiper-item>
</swiper>
</view>

tab栏切换时触发@change事件回调函数里e保存当前idx

:current="current" 当前下标

:current&