UniApp top of the tab

Like uniapp want to be a plug-in application templates as a function of information, with the official component swiper, not a rolling start, and later saw the official website that they have to add scroll-view label can

App to be the first to do it notes with uniapp

First, the first to be tab tab at the top, because I only have two so directly written in the tag view

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

Then write the contents of the bottom, click on the slide and can switch tab, and add the selected style

: Current = "current" attribute must be added

<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>

Uni.css introduced in the app.vue

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

js

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