注意点:
scroll-into-view绑定scroll-view子元素id
scroll-view容器高度设置height: 100vh;
<template>
<view class="container">
<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y left_box" @scrolltoupper="upper"
@scrolltolower="lower" @scroll="scroll">
<view id="demo1" class="scroll-view-item uni-bg-red type-item" v-for="(item,index) in list" :key="index"
@click="selectEd(index)" :class="{active:index===currentIndex}">{{item.title}}</view>
</scroll-view>
<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y right_box" @scrolltoupper="upper"
@scrolltolower="lower" @scroll="scroll" :scroll-into-view="subItemId" :scroll-with-animation="true"
scroll-top="0">
<view class="" v-for="(item,index) in list" :key="index" :id="'subItem'+index">
<view class="item-title">
{{item.title}}
</view>
<view class="sub-item-box">
<view id="demo1" class="sub-item " v-for="(item1,index) in item.subList">{{item.name}}</view>
</view>
</view>
</scroll-view>
</view>
</template>
<script>
export default {
data() {
return {
scrollTop: 0,
old: {
scrollTop: 0
},
currentIndex: '',
selectIndex: '',
subItemId: '',
list: [{
title: '类别1',
subList: [{
id: 1,
name: '商品'
},
{
id: 2,
name: '商品'
},
{
id: 3,
name: '商品'
},
{
id: 4,
name: '商品'
},
{
id: 5,
name: '商品'
}
]
},
{
title: '类别2',
subList: [{
id: 1,
name: '商品'
},
{
id: 2,
name: '商品'
},
{
id: 3,
name: '商品'
},
{
id: 4,
name: '商品'
},
{
id: 5,
name: '商品'
}
]
},
{
title: '类别3',
subList: [{
id: 1,
name: '商品'
},
{
id: 2,
name: '商品'
},
{
id: 3,
name: '商品'
},
{
id: 4,
name: '商品'
},
{
id: 5,
name: '商品'
}
]
}, {
title: '类别4',
subList: [{
id: 1,
name: '商品'
},
{
id: 2,
name: '商品'
},
{
id: 3,
name: '商品'
},
{
id: 4,
name: '商品'
}
]
},
{
title: '类别5',
subList: [{
id: 1,
name: '商品'
},
{
id: 2,
name: '商品'
}
]
}
]
}
},
methods: {
upper: function(e) {
// console.log(e)
},
lower: function(e) {
// console.log(e)
},
scroll: function(e) {
// console.log(e)
this.old.scrollTop = e.detail.scrollTop
},
selectEd(index) {
this.subItemId = 'subItem' + index
this.currentIndex = index
}
}
}
</script>
<style>
.container {
display: flex;
}
.left_box {
width: 20%;
height: 100%;
position: fixed;
top: 0;
left: 0;
}
.type-item {
height: 80rpx;
line-height: 80rpx;
text-align: center;
}
.active {
background-color: pink;
}
.right_box {
margin-left: 20%;
width: 80%;
height: 100vh;
}
.sub-item-box {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.item-title {
text-align: center;
margin: 50rpx;
}
.sub-item {
width: 150rpx;
height: 150rpx;
margin-right: 20rpx;
margin-bottom: 50rpx;
background-color: pink;
}
</style>