筆記3：uni-app可拖動頂部選項卡切換導航欄scroll-view可滾動視圖區域

1，創建uni-app，選擇hello模板，

 

2，找到文件/pages/template/tabbar/tabbar.nvue，查看class

3，在現項目下創建index.vue編寫，也可內置模板一樣

<view class="tabs">
    <scroll-view scroll-x class="scroll-h" >
    <block v-for="(tab,index) in tabBars" :key="tab.id">
    <view class="uni-tab-item" :class="{'uni-tab-item-title-active' :tabIndex==index}" @tap="tabtap(index)">
    <!--1 {{tab.name}} -->
    <!--2 <text class="uni-tab-item-title" :class="tabIndex==index ? 'uni-tab-item-title-active' : ''">{{tab.name}}</text> -->
    </view>
    </block>            
    </scroll-view>
</view>

4，在data(){}寫上切換數據文字

return {
    tabIndex:0,
    tabBars:[
        { name:"關注",id:"guanzhu"},
        { name:"推薦",id:"tuijian"},
        { name:"體育",id:"tiyu"},
        { name:"熱點",id:"redian"},
        { name:"財經",id:"caijing"},
        { name:"娛樂",id:"yule"},
        { name:"軍事",id:"junshi"},
        { name:"歷史",id:"lishi"},
        { name:"本地",id:"bendi"},
    ]
｝

5，在文件tabbar.nvue找到style下class的css

.tabs {
    flex: 1;
    flex-direction: column;
    overflow: hidden;
    background-color: #ffffff;
    /* #ifdef MP-ALIPAY || MP-BAIDU */
    height: 100vh;
    /* #endif */
}

.scroll-h {
    width: 750upx;
    height: 80upx;
    flex-direction: row;
    /* #ifndef APP-PLUS */
    white-space: nowrap;
    /* #endif */
    /* flex-wrap: nowrap; */
    /* border-color: #cccccc;
    border-bottom-style: solid;
    border-bottom-width: 1px; */
}

.line-h {
    height: 1upx;
    background-color: #cccccc;
}

.uni-tab-item {
    /* #ifndef APP-PLUS */
    display: inline-block;
    /* #endif */
    flex-wrap: nowrap;
    padding-left: 34upx;
    padding-right: 34upx;
}

.uni-tab-item-title {
    color: #555;
    font-size: 30upx;
    height: 80upx;
    line-height: 80upx;
    flex-wrap: nowrap;
    /* #ifndef APP-PLUS */
    white-space: nowrap;
    /* #endif */
}

.uni-tab-item-title-active {
    color: #007AFF;
}

6，點擊顯示當前卡片按鈕導航

methods: {
    tabtap(index){
        this.tabIndex=index;
    }
},

7，效果

8，可以添加修改樣式。

9，相關內置組件scroll-view屬性可滾動視圖區域。