Uniapp realizes horizontal click and slide menu

html Code

<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 Code

<script>
	import {
		reactive,
		ref,
		getCurrentInstance,
		onMounted
	} from "vue"
	export default {
		setup() {
			let nowType = ref("");
			// Style design when selected 
			const selectedStyle = reactive({
				border: {
					borderBottom: "6rpx solid #FF5D37"
				},
				text: {
					color: '#FF5D37',
					fontWeight: 'bold'
				}
			})

			const {
				proxy
			} = getCurrentInstance();
			const list = reactive([{
				name: ' Room information ',
				type: 'house'
			}, {
				name: ' Recruitment information ',
				type: 'job'
			}, {
				name: ' Talent information ',
				type: 'resume'
			}, {
				name: ' Item information ',
				type: 'commodity'
			}, {
				name: ' Agriculture, forestry and fishing ',
				type: 'farming'
			}, {
				name: ' Transfer of business ',
				type: 'transfer'
			}, {
				name: ' Need to inquire ',
				type: 'ask'
			}, {
				name: ' Local promotion ',
				type: 'promote'
			}, {
				name: ' Merchant shop ',
				type: 'store'
			}]);

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

			}
			return {
				list	
			}
		}
	}
</script>

css style

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

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