uni-app 实现手机端滑动导航栏

创建项目

此步骤省略，不会的同学可以参看我的另外一篇文章：
创建项目

这里以一个微博首页为例，最终实现的页面效果图如下：

样式准备

1、在 pages/index/index.vue 文件中，添加如下代码：

<template>
    <view class="content">
        <scroll-view scroll-x>
            <view class="scroll">
                <view class="nav-item">
                    <text class="active">科技</text>
                </view>
                <view class="nav-item">
                    <text>武汉</text>
                </view>
                <view class="nav-item">
                    <text>股票</text>
                </view>
                <view class="nav-item">
                    <text>手机</text>
                </view>
                <view class="nav-item">
                    <text>游戏</text>
                </view>
                <view class="nav-item">
                    <text>体育</text>
                </view>
                <view class="nav-item">
                    <text>历史</text>
                </view>
                <view class="nav-item">
                    <text>二次元</text>
                </view>
            </view>
        &