uniapp实现横向点击滑动菜单

html代码

<scroll-view class="scroll-view" scroll-x="true">
		<block v-for="(item,index) in list" :key="item">
			<view class="scroll-content">
				<view class="list-item" @click="getCollectList(item.type)" :data-type='item.type'>
					<text :style="nowType==item.type?selectedStyle.text:''">{{item.name}}</text>
					<view :style="nowType==item.type?selectedStyle.border:''"></view>
				</view>
			</view>
		</block>
</scroll-view>

js代码

<script>
	import {
		reactive,
		ref,
		getCurrentInstance,
		onMounted
	} from "vue"
	export default {
		setup() {
			let nowType = ref("");
			//选中时的样式设计
			const selectedStyle = reactive({
				border: {
					borderBottom: "6rpx solid #FF5D37"
				},
				text: {
					color: '#FF5D37',
					fontWeight: 'bold'
				}
			})

			const {
				proxy
			} = getCurrentInstance();
			const list = reactive([{
				name: '房源信息',
				type: 'house'
			}, {
				name: '招聘信息',
				type: 'job'
			}, {
				name: '人才信息',
				type: 'resume'
			}, {
				name: '物品信息',
				type: 'commodity'
			}, {
				name: '农林牧渔',
				type: 'farming'
			}, {
				name: '生意转让',
				type: 'transfer'
			}, {
				name: '需求打听',
				type: 'ask'
			}, {
				name: '本地推广',
				type: 'promote'
			}, {
				name: '商家店铺',
				type: 'store'
			}]);

			function getCollectList(type) {
				nowType.value = type;

			}
			return {
				list	
			}
		}
	}
</script>

css样式

	.scroll-view {
		margin: 20rpx 0;
		display: flex;
		white-space: nowrap;

		.scroll-content {
			display: inline-block;
			width: 25%;
		}
	}