uniApp之 顶部选项卡

想做一个像uniapp插件里资讯应用模板那样的功能，用了官方组件swiper，一开始不能滚动，后来看了官网，说要加scroll-view 这个标签才可以

第一次用uniapp做app做个笔记吧

首先先做个顶部的tab选项卡，因为我只有两项 所以就直接写在view标签里了

<view class="navs">
            <view :class="{ active: current == i }" v-for="(item, i) in navs" @click="navsHandleClick(i)">{{ item.lable }}</view>
 </view>

接着写底下的内容，点击和滑动都可以切换tab，并且加上选中样式

:current="current" 属性一定要加上

<view class="uni-tab-bar">
            <swiper class="swiper-box" @change="intervalChange" :current="current">
                <swiper-item>
                <scroll-view scroll-y class="list" >
                    <view style="height: 2000px;">1</view>
                </scroll-view>
                <scroll-view scroll-y class="list" >
                    <view style="height: 2000px;">2</view>
                </scroll-view>
                </swiper-item>
            </swiper>
        </view>

在app.vue里 引入uni.css

@import './common/uni.css';

js

methods: {
        navsHandleClick(i) {
            console.log(i);
            this.current = i;
        },
        intervalChange(e) {
            this.current = e.detail.current;
        }
    }