uniapp分类scroll-view

效果图：

这个主要是使用锚点来解决的，通过scroll-into-view这个属性来解决

上代码：html

<template>
	<view class="box">
		<scroll-view class="scroll" scroll-y>
			<view v-for="(item, index) in p_arr" :key="item" @click="scroll(index)"
				:style="{ 'background-color': active == index ? 'aquamarine' : 'pink' }">
				{{item.className}}
			</view>
		</scroll-view>

		<scroll-view class="content" scroll-y :scroll-into-view="intoindex" scroll-with-animation>
			<view class="contentView" v-for="(item, index) in p_arr" :key="item" :id="`text${index}`">
				<view class="">{{item.className}}</view>
				<view v-for="(value, i) in item.goods" :key="value" class="goodsList">
					<image :src="value.img" mode=""></image>
					<view class="detail">
						<text>{{value.title}}</text>
						<text>{{value.price}}</text>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

 javascript

data() {
			return {
				intoindex: '',
				p_arr: [{
						className: '1',
						goods: [{
							img: 'https://img1.baidu.com/it/u=1546227440,2897989905&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500',
							title: '山1',
							price: '100'
						}, {
							img: 'https://img1.baidu.com/it/u=1546227440,2897989905&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500',
							title: '山1',
							price: '100'
						}, {
							img: 'https://img1.baidu.com/it/u=1546227440,2897989905&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500',
							title: '山1',
							price: '100'
						}, {
							img: 'https://img1.baidu.com/it/u=1546227440,2897989905&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500',
							title: '山1',
							price: '100'
						}, {
							img: 'https://img1.baidu.com/it/u=1546227440,2897989905&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500',
							title: '山1',
							price: '100'
						}, {
							img: 'https://img1.baidu.com/it/u=1546227440,2897989905&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500',
							title: '山1',
							price: '100'
						}, {
							img: 'https://img1.baidu.com/it/u=1546227440,2897989905&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500',
							title: '山1',
							price: '100'
						}]
					},
					{
						className: '2',
						goods: [{
							img: 'https://img1.baidu.com/it/u=1546227440,2897989905&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500',
							title: '山2',
							price: '100'
						}, {
							img: 'https://img1.baidu.com/it/u=1546227440,2897989905&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500',
							title: '山2',
							price: '100'
						}, {
							img: 'https://img1.baidu.com/it/u=1546227440,2897989905&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500',
							title: '山2',
							price: '100'
						}, {
							img: 'https://img1.baidu.com/it/u=1546227440,2897989905&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500',
							title: '山2',
							price: '100'
						}, {
							img: 'https://img1.baidu.com/it/u=1546227440,2897989905&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500',
							title: '山2',
							price: '100'
						}]
					},
					{
						className: '3',
						goods: [{
							img: 'https://img1.baidu.com/it/u=1546227440,2897989905&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500',
							title: '山3',
							price: '100'
						}]
					},
					{
						className: '4',
						goods: [{
							img: 'https://img1.baidu.com/it/u=1546227440,2897989905&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500',
							title: '山4',
							price: '100'
						}]
					},
					{
						className: '5',
						goods: [{
							img: 'https://img1.baidu.com/it/u=1546227440,2897989905&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500',
							title: '山4',
							price: '100'
						}]
					},
					{
						className: '6',
						goods: [{
							img: 'https://img1.baidu.com/it/u=1546227440,2897989905&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500',
							title: '山4',
							price: '100'
						}]
					},
					{
						className: '7',
						goods: [{
							img: 'https://img1.baidu.com/it/u=1546227440,2897989905&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500',
							title: '山4',
							price: '100'
						}]
					},
					{
						className: '8',
						goods: [{
							img: 'https://img1.baidu.com/it/u=1546227440,2897989905&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500',
							title: '山4',
							price: '100'
						}]
					}
				],

				active: null
			}
		},
		methods: {
			scroll(index) {
				this.active = index;
				this.intoindex = `text${index}`;
				console.log(this.intoindex);
			},
		}

 css

<style lang="scss" scoped>
	.box {
		margin-top: 300rpx;
	}

	.scroll {
		width: 20%;
		height: 800rpx;
		text-align: center;
	}

	.scroll view {
		height: 100rpx;
		line-height: 100rpx;
	}

	.content {
		width: 75%;
		height: 800rpx;
		position: absolute;
		right: 0px;
		top: 300rpx;
		margin: 0 20rpx 0 20rpx;
		box-sizing: border-box;

		image {
			width: 200rpx;
			height: 200rpx;
			margin: 0 25rpx;
			border-radius: 16rpx;
		}

		.detail {
			display: flex;
			flex-direction: column;
			justify-content: space-around;
		}

		.goodsList {
			display: flex;
			align-items: center;

			border-radius: 20rpx;
			margin-top: 8px;
		}
	}

	.contentView {
		padding: 20rpx 0;
		display: flex;
		flex-direction: column;
	}
</style>