本文介绍如何在uni-app中创建一个tabs组件，实现点击切换页面内容的效果。通过编写公共tabs模板、在页面中引入并注册组件、设置数据和点击事件，实现了导航栏的切换，并给出了具体代码实现和页面数据的处理方法。
效果如图，点击时切换页面内容
代码实现：
1、创建公共tabs模板
<template>
<view class="uni-tab-bar">
<view class="scrollClass" v-for="(tab,index) in tabBars" :key="tab.id" :style="scrollStyle">
<view class="swiper-tab-list" :class="{'active' : tabIndex==index}" @tap="tabtap(index)"
:style="scrollItemStyle">
{
{tab.name}} {
{tab.num?tab.num:""}}
<view class="swiper-tab-line"></view>
最低0.47元/天 解锁文章
扫一扫
975
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
