uniapp中使用scroll-view实现初横向滚动，初始化时将选中的子元素展示在

代码如下

<template>
	<view class="scroll_main" style="height:300rpx;margin-top:300rpx">
		<view class="date-text">
			<p class="d_date">{{c_tabDate}}</p>
			<p class="d_week">星期一</p>
		</view>
		<scroll-view class="scroll-view_H" scroll-x="true" :scroll-with-animation="true" :scroll-left="c_scrollLeft">
			<view @click="checkTab(item)" class="scroll-view-item_H" :class="c_tabDate == item.date ? 'pitchOn':''" v-for="(item,index) in c_tab">
				<view class="_c">
					<p class="_week">{{item.week}}</p>
					<p class="_date">{{item.date.split('-')[2]}}</p>
					<view class="deco"></view>
				</view>
			</view>
		</scroll-view>
		
	</view>
</template>

<script>
	export default {
		name:'scrollCalendar',
		data() {
			return {
				c_scrollLeft:0,
				// scroll大盒子的宽度
				c_scrollBoxWidth:0,
				// 切换
				c_tab: [{
					week:'一',
					date:'2024-01-08'
				},{
					week:'二',
					date:'2024-01-09'
				},{
					week:'二',
					date:'2024-01-09'
				},
				{
					week:'三',
					date:'2024-01-10'
				},{
					week:'四',
					date:'2024-01-11'
				},
				{
					week:'六',
					date:'2024-01-12'
				},
				{
					week:'六',
					date:'2024-01-13'
				},
				{
					week:'六',
					date:'2024-01-14'
				},
				{
					week:'六',
					date:'2024-01-15'
				},
				{
					week:'六',
					date:'2024-01-16'
				},
				{
					week:'六',
					date:'2024-01-17'
				},
				{
					week:'六',
					date:'2024-01-18'
				},
				{
					week:'六',
					date:'2024-01-19'
				},
				{
					week:'六',
					date:'2024-01-20'
				},
				{
					week:'六',
					date:'2024-01-21'
				},
				],
				c_tabDate: '2024-01-16',
			}
		},
		mounted(){
			this.getWidthHeight()
		},
		watch:{
			c_scrollBoxWidth(val,NewVal){
				this.c_tab.forEach((item,index)=>{
					if(this.c_tabDate == item.date){
						this.c_scrollLeft = this.c_scrollBoxWidth * (index -2)
					}
				})
			}
		},
		methods: {
			getWidthHeight(){
				const query = uni.createSelectorQuery().in(this);
				query.select('.scroll-view-item_H').boundingClientRect(data => {
				  this.c_scrollBoxWidth = data.width
				}).exec();
			},
			checkTab(item){
				this.c_tabDate = item.date
			}
		}
	}
</script>

<style lang="scss">
	page {
		width: 100%;
		height:100%;
		background-color: #49a4c1;
		.scroll_main {
			width: 100%;
			background-color: white;
			.date-text{
				color:#9aa5c0;
				padding-left: 40rpx;
				.d_date{
					
					font-size: 44rpx;
					font-weight: 600;
				}
				.d_week{
					color:#9aa5c0;
					font-size: 28rpx;
				}
			}
			.scroll-view_H {
				white-space: nowrap;
				width: 100%;
				padding: 15rpx 0;
				height:100%;
			}
			.scroll-view-item_H {
				display: inline-block;
				width: 50px;
				height:auto;
				text-align: center;
				font-size: 36rpx;
				padding:10rpx;
				margin:10rpx 0;
				overflow: hidden;
				._c{
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					line-height: 2;
					
					._week{
						font-size: 32rpx;
						color:#b3bdce;
					}
					._date{
						font-size: 28rpx;
						color:#223870;
					}
					.deco{
						width: 10rpx;
						height:10rpx;
						border-radius: 50%;
						border: 1px solid rgba(232, 230, 237,1);
					}
				}
				
			}
			.pitchOn{
				position: relative;
				border-radius: 10rpx;
				box-shadow: 1px 4px 10px 4px #e9eaf0;
				.deco{
					background-color: #49a4c1;
				}
				&::before{
					position: absolute;
					top:0;
					right:0;
					content:'';
					width:0;
					height:0;
					border:20rpx solid transparent;
					border-color: transparent #49a4c1 #49a4c1 transparent; 
					transform: rotate(-90deg);
				}

			}
		}
	}
</style>

效果如下图

补充：不过选中的是第一个元素还是最后一个元素，都能在可视区域看到。

原理：初始化设置盒子宽度属性为0，获取到每一个item盒子的宽度，将盒子宽度赋值给属性，

同时监听这个属性的属性值的变化，一旦改变就将这个值给scroll-view的scrollLeft值，只要scrollLeft改变，组件会自动滚动到对应位置。