要点:
使用竖向滚动时,需要给 <scroll-view>
一个固定高度,通过 css 设置 height。
使用横向滚动时,需要给 <scroll-view>
一个固定宽度,通过 css 设置 width。
<template> <view class="tab"> <scroll-view class="tab-scroll-view" :scroll-x="true"> <view class="tab-item" v-for="(item, index) in tabList" :key="index"> {{item.name}} </view> </scroll-view> </view> </template>
<style lang="less"> .tab-scroll-view { width: 750rpx; height: 84rpx; flex-direction: row; white-space: nowrap; .tab-item { display: inline-block; width: 150rpx; height: 284rpx; font-size: 16px; color: #555; border: 1px solid yellow; } } </style>