效果图

html: `

<view class="right">
	<scroll-view scroll-x="true" class="content-scroll" scroll-with-animation
		:scroll-left="scrollLeft">
		<view v-for="(item, index) in category" :key="index" class="scroll-item"
			:class="curIndex == index? 'active' : ''" @click="changeTitle(index)">
			{
   
   {item.name}}
		</view>
	</scroll-view>
</view>`

js:

`category: [{
						id: 1,
						name: '大小合适'
					},
					{
						id: 2,
						name: '偏大'
					},
					{
						id: 3,
						name: '偏小'
					},
					{
						id: 4,
						name: '星期四'
					},
					{
						id: 5,
						name: '星期五'
					},
					{
						id: 6,
						name: '星期六'
					},
					{
						id: 7,
						name: '星期七'
					},
					{
						id: 8,
						name: '星期八'
					},
					{
						id: 9,
						name: '星期九'
					},
					{
						id: 10,
						name: '星期十'
					}
				],
				contentScrollW: 0, // 导航区宽度
				curIndex: -1, // 当前选中
				scrollLeft: 0 // 横向滚动条位置`

		mounted() {
    
    
			// 获取标题区域宽度，和每个子元素节点的宽度
			this.getScrollW()
		},
		methods: {
    
    
			// 获取标题区域宽度，和每个子元素节点的宽度以及元素距离左边栏的距离
			getScrollW() {
    
    
				const query = uni.createSelectorQuery().in(this);
				query.select('.content-scroll').boundingClientRect(data => {
    
    
					// 拿到 scroll-view 组件宽度
					this.contentScrollW = data.width
				}).exec();
				query.selectAll('.scroll-item').boundingClientRect(data => {
    
    
					let dataLen = data.length;
					for (let i = 0; i < dataLen; i++) {
    
    
						//  scroll-view 子元素组件距离左边栏的距离
						this.category[i].left = data[i].left;
						//  scroll-view 子元素组件宽度
						this.category[i].width = data[i].width
					}
				}).exec()
			},


			// 选择标题
			changeTitle(index) {
    
    
				this.curIndex = index;
				// 效果一(当前点击子元素靠左展示)  局限性：子元素宽度相同
				this.scrollLeft = index * this.category[index].width
			},

			.......
		}

css:

.right {
    
    
	flex: 1;
	display: flex;
	flex-direction: column;
	padding: 0 30upx 0 24upx;
	overflow: hidden;

	.title {
    
    
			font-size: $font-base + 2upx;
			color: $font-color-dark;
			line-height: 1;
		}

	.attr-box {
    
    
		font-size: $font-sm + 2upx;
		color: $font-color-light;
		padding: 10upx 12upx;
	}

	.price {
    
    
		font-size: $font-base + 2upx;
		color: $font-color-dark;

		&:before {
    
    
			content: '￥';
			font-size: $font-sm;
			margin: 0 2upx 0 8upx;
		}
	}
}