添加顶部选项卡

<template>
    <view>
        <!-- 顶部选项卡 -->
        <scroll-view scroll-x style="width: 100%;white-space: nowrap;
        border-bottom: 1px solid red;height: 100rpx;"
        :scroll-into-view="scrollinto" scroll-with-animation>
            <view v-for="(item,index) in tabBars" :key="index"
            style="display: inline-block;padding:30rpx;" :id=" 'tab'+index"
            :class="tabIndex === index ? 'active' :' ' " @click="changeTab(index)">             {{item.name}} </view>                 
        </scroll-view>
        <swiper :duration="150" :current="tabIndex" @change="onChangeTab"         :style="'height:'+scrollH+'px;'">
            <swiper-item v-for="(item,index) in newslist" :key="index">
                <scroll-view scroll-y="true" :style=" 'height:'+scrollH+'px;' ">
                    <block v-for="(item2,index2) in item.list" :key="index2">
                        <!-- 列表样式 -->
                        <common-list :item="item2" :index="index2" @follow="follow" 
                        @doSupport="doSupport"></common-list>
                        <!-- 全局分割线 -->
                        <divider></divider>
                    </block>
                </scroll-view>
            </swiper-item>
        </swiper>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                // 列表高度
                scrollH:600,
                // 顶部选项卡
                scrollinto:" ",     
                tabIndex:0,             
                tabBars: [{
                    name: '关注'
                },{
                    name: '推荐'
                },{
                    name: '体育'
                },{
                    name: '热点'
                },{
                    name: '财经'
                },{
                    name: '娱乐'
                },{
                    name: '军事'
                },{
                    name: '历史'
                }],
                newslist:[ ]    
            }
        },
        onLoad() {
            // 获取可视区域高度
                uni.getSystemInfo({
                    success: (res) => {
                        this.scrollH = res.windowHeight - uni.upx2px(102)
                    }
                })
                // 根据选项生成列表
                this.getData()
        },
        methods: {
            // 获取数据
            getData(){
                var arr = []
                    for (let i = 0; i < this.tabBars.length; i++) {
                        let obj ={
                            list:[{
                                username:"昵称",
                                userpic:"/static/touxiang.png",
                                newstime:"2019-10-20 下午04:30",
                                isFollow:false,
                                title:"我是标题",
                                titlepic:"",
                                support:{
                                     type:"support", //顶
                                    support_count:1,
                                    unsupport_count:2
                                },
                                comment_count:2,
                                share_count:2
                            },
                            {
                                username:"昵称",
                                userpic:"/static/touxiang.png",
                                newstime:"2019-10-20 下午04:30",
                                isFollow:false,
                                title:"我是标题",
                                titlepic:"/static/hua.png",
                                support:{
                                    type:"unsupport", //踩
                                    support_count:1,
                                    unsupport_count:2
                                },
                                comment_count:2,
                                share_count:2
                            },
                            {
                                username:"昵称",
                                userpic:"/static/touxiang.png",
                                newstime:"2019-10-20 下午04:30",
                                isFollow:false,
                                title:"我是标题",
                                titlepic:"/static/hua.png",
                                support:{
                                    type:"", //未操作
                                    support_count:1,
                                    unsupport_count:2
                                },
                                comment_count:2,
                                share_count:2
                            }]
                        }
                        arr.push(obj)
                    }
                    this.newslist = arr
            },
            // 监听滑动
            onChangeTab(e){
                this.changeTab(e.detail.current)
            },
            // 切换选项
            changeTab(index){
                if (this.tabIndex === index) {
                    return;
                }
                this.tabIndex = index
                this.scrollInto = 'tab'+index
            }
        }
    }

</script>

<style>
    .active{
        color: red;
    }
</style>