uni-app的scroll-view组件实现横向滚条导航切换功能（类似选项卡的效果）

功能实现：
1.横向可以滚动，不换行。
2.可以选中效果效果。
3.借助scroll-view组件，改变方向：scroll-x="true"
效果预览

<template>
    <view class="content">
        <view>
            <scroll-view scroll-x="true" class="scroll">
                <view class="scroll-item" 
                v-for="(item,index) in scrollTitle" 
                :key="index" 
                @tap="handleSelected(index)" 
                :class="{'on':item.selected}"
                >
                    <view class="">
                        {{item.title}}
                    </view>
                </view>
            </scroll-view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                scrollTitle: [{
                        title: '推荐',
                        selected: true,
                    },
                    {
                        title: '娱乐',
                        selected: false,
                    },
                    {
                        title: '体育',
                        selected: false,
                    },
                    {
                        title: '科技',
                        selected: false,
                    },
                    {
                        title: '社会',
                        selected: false,
                    },
                    {
                        title: '财经',
                        selected: false,
                    },
                    {
                        title: '军事',
                        selected: false,
                    },
                    {
                        title: '时政',
                        selected: false,
                    }
                ]
            }
        },
        methods: {
            handleSelected(index) {
                this.scrollTitle[index].selected = true
                for (let i = 0; i < this.scrollTitle.length; i++) {
                    if (i != index) {
                        this.scrollTitle[i].selected = false
                    }
                }
            }
        }
    }
</script>

<style>
    .container {
        height: 100vh;
    }

    .scroll {
        background-color: #EED8AE;
        border-bottom: 1upx solid #999999;
        white-space: nowrap;/*必须要有，规定段落中的文本不进行换行*/
    }

    .scroll-item {
        color: #333333;
        width: 150upx;
        text-align: center;
        height: 60upx;
        line-height: 60upx;
        display: inline-block;/*必须要有*/
    }

    .on {
        border-bottom: 2px solid orange;
        color: orange;
        border-radius: 40upx;
        font-size: 24px;
        font-weight: bolder;
    }
</style>