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