滚动tab导航开发(上)

		<!-- 顶部选项卡 -->
		<view class="uni-tab-bar">
			<scroll-view scroll-x class="uni-swiper-tab">
				<block v-for="(tab, index) in tabBars" :key="tab.id">
					<view class="swiper-tab-list" :class="{'active':tabIndex===index}" @tap="tabtap(index)">
						{{tab.name}}
						<view class="swiper-tab-line">

						</view>
					</view>
				</block>
			</scroll-view>
		</view>

<script>
	export default {
		data() {
			return {
				// 内容列表
              	.....
				tabIndex: 0,
				tabBars: [{
						name: "关注",
						id: "guanzhu"
					},
					{
						name: "推荐",
						id: "tuijian"
					},
					{
						name: "体育",
						id: "tiyu"
					},
					{
						name: "热点",
						id: "redian"
					},
					{
						name: "财经",
						id: "caijing"
					},
					{
						name: "娱乐",
						id: "yule"
					},
				]
			}
		},
		methods: {
			tabtap(index) {
				this.tabIndex = index
			}
		}
	}
</script>