笔记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属性可滚动视图区域。