uniapp 基于scroll-view商品分类锚点定位_uniapp使用scroll-into-view实现锚点定位和滚动监听功能

如上图、需要实现商品分类中切换商品类型，右边定位到对应分类中并且右边分类下滑加载更多。

其中利用到的是uniapp中的scroll-view组件，利用组件中 scroll-into-view 的属性绑定元素id。

页面分为左右部分，左边部分循环出分类列表，在每一个分类上定义自定义属性（唯一），点击分类的时候，将自定义属性，赋值给我们定义的viewid，并且将viewid和scroll-into-view绑定。

右边也是循环出来的不同分类列表，此时对应循环出来内容盒子也需要进行id的绑定！！！

const viewid = ref('cont0')
 
	function getType(e) {
		viewid.value = "cont" + e.currentTarget.dataset.index
		console.log(viewid.value);
	}

css
	.category-box {
		width: 97%;
		height: 68vh;
		display: flex;
		justify-content: space-between;
 
		.left-box {
			width: 25%;
			height: 100%;
			background-color: #fff;
 
			>view {
				height: 88rpx;
				line-height: 88rpx;
				text-align: center;
				font-weight: 400;
				font-size: 32rpx;
				color: #333333;
			}
 
			.ac-type {
				background: #FFF3F5;
				font-weight: 700;
				font-size: 32rpx;
				color: #C32019;
			}
		}
 
		.right-box {
			width: 72%;
			height: 100%;
		}
	}
 
	.scroll {
		height: 65vh;
	}
 
	.goods-items {
		.goods-items-img {
			width: 100%;
			height: 176rpx;
			background-color: pink;
		}
 
		.scroll-box {
			display: grid;
			grid-template-columns: repeat(2, 1fr); //表示分为2列  1fr表示平均分配   第二个参数可以给定一个确定的宽度值
			column-gap: 30rpx; //设置每列之间的间隔为30rpx
			row-gap: 30rpx; //设置行间隔为30rpx
			margin-top: 20rpx;
			width: 100%;
 
			.goods-item {
				background: #FFFFFF;
				box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(255, 231, 218, 0.4);
				border-radius: 16rpx;
				margin-bottom: 34rpx;
				>image {
					width: 250rpx;
					height: 220rpx;
				}
 
				.des-text {
					margin: 16rpx;
					font-weight: 400;
					font-size: 24rpx;
					color: #333333;
					overflow: hidden;
					-webkit-line-clamp: 2;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-box-orient: vertical;
 
				}
 
				.sell {
					padding: 0 16rpx;
					font-weight: 400;
					font-size: 18rpx;
					color: #666666;
				}
 
				.pro-count {
					color: #D90000;
					font-size: 32rpx;
					padding: 0 16rpx;
					margin-bottom: 24rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
 
					>image {
						width: 32rpx;
						height: 32rpx;
					}
				}
			}
		}
 
	}
 
	.select-box {
		display: flex;
		justify-content: space-between;
		padding: 0 24rpx;
		margin-bottom: 24rpx;
 
		.ac-item {
			width: 122rpx;
			height: 50rpx;
			text-align: center;
			line-height: 50rpx;
			background: linear-gradient(180deg, #FF9257 0%, #D71100 100%);
			border-radius: 8rpx;
			font-weight: 400;
			font-size: 24rpx;
			color: #FFFFFF;
		}
 
		.normal-item {
			width: 122rpx;
			height: 50rpx;
			text-align: center;
			line-height: 50rpx;
			background: #FFE7DA;
			border-radius: 8rpx;
			font-weight: 400;
			font-size: 24rpx;
			color: #666666;
		}
	}

html
<view class="category-box">
			<view class="left-box">
				<view class="" v-for="(item,index) in category" :key="index" :data-index="index" @click="getType">
					{{item.type}}
				</view>
			</view>
			<view class="right-box">
				<scroll-view scroll-y class="scroll" :scroll-into-view="viewid" scroll-with-animation>
					<view v-for="(item,index) in category" :key="index">
						<view id="cont{{index}}">
							<view class="goods-items">
								{{item.type}}
								<image src="" mode="" class="goods-items-img"></image>
								<u-tabs :activeStyle="{
								    color: '#BF0300',
								}" :inactiveStyle="{
								    color: '#333333',
								}" lineColor="#F5F5F5" lineWidth="0" :list="selectMenu" @click="click"></u-tabs>
								<view class="scroll-box">
									<view class="goods-item" v-for="number of 3">
										<image src="../../../static/icon/logo.png" mode=""></image>
										<view class="des-text">
											多数都是的的似的是的数都但是大多数都是的的似的是的数都是的的似的是的
										</view>
										<view class="sell">
											已售：5000+
										</view>
										<view class="pro-count">
											<view class="">
												<text>xxx</text>
												<text style="font-size: 20rpx;margin-left: 8rpx;">积分</text>
											</view>
											<image src="../../../static/mall/add.png" mode=""></image>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>