筆記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屬性可滾動視圖區域。