uniapp左侧分类右侧内容，滑动右侧到底部再次滑动切换下个分类代码

以下是一个简单的实现，仅供参考：

<template>
<view class="container">
<view class="left">
<scroll-view scroll-y="true" class="left-scroll" :scroll-into-view="activeIndex" :scroll-with-animation="true">
<view v-for="(item, index) in categoryList" :key="index" :class="['left-item', activeIndex === index ? 'active' : '']" @click="changeActive(index)">
{{ item }}
</view>
</scroll-view>
</view>
<view class="right">
<scroll-view scroll-y="true" class="right-scroll" :scroll-into-view="activeContentId" :scroll-with-animation="true" @scrolltolower="loadMore">
<view v-for="(item, index) in currentContentList" :key="item.id" class="right-item">
{{ item.title }}
</view>
<view v-if="loading" class="loading">加载中...</view>
<view v-if="!loading && noMore" class="no-more">已经到底了</view>
</scroll-view>
</view>
</view>
</template>

<script>
export default {
data() {
return {
categoryList: ['分类1', '分类2', '分类3'],
contentList: [
{ id: 1, title: '内容1', category: '分类1' },
{ id: 2, title: '内容2', category: '分类1' },
{ id: 3, title: '内容3', category: '分类2' },
{ id: 4, title: '内容4', category: '分类2' },
{ id: 5, title: '内容5', category: '分类3' },
{ id: 6, title: '内容6', category: '分类3' },
],
activeIndex: 0,
activeContentId: '',
currentContentList: [],
loading: false,
noMore: false,
pageSize: 10,
pageIndex: 0,
}
},
mounted() {
this.loadMore()
},
methods: {
changeActive(index) {
this.activeIndex = index
this.pageIndex = 0
this.activeContentId = ''
this.currentContentList = this.getContentList()
this.loadMore()
},
getContentList() {
const category = this.categoryList[this.activeIndex]
return this.contentList.filter(item => item.category === category)
},
loadMore() {
if (this.loading || this.noMore) {
return
}
this.loading = true
setTimeout(() => {
const contentList = this.getContentList()
const startIndex = this.pageIndex * this.pageSize
const endIndex = startIndex + this.pageSize
const newData = contentList.slice(startIndex, endIndex)
this.currentContentList = this.currentContentList.concat(newData)
this.pageIndex += 1
this.loading = false
if (endIndex >= contentList.length) {
this.noMore = true
}
if (this.currentContentList.length > this.pageSize * 3) {
// 如果当前显示的内容太多了，可以通过滚动到底部自动切换到下一个分类
uni.pageScrollTo({
scrollTop: 9999,
duration: 300,
complete: () => {
this.changeActive(this.activeIndex + 1 >= this.categoryList.length ? 0 : this.activeIndex + 1)
},
})
}
}, 1000)
},
},
}
</script>

<style>
.container {
display: flex;
flex-direction: row;
height: 100vh;
}

.left {
width: 120rpx;
background-color: #eee;
}

.left-scroll {
height: 100%;
}

.left-item {
height: 80rpx;
line-height: 80rpx;
text-align: center;
}

.left-item.active {
background-color: #fff;
}

.right {
flex: 1;
background-color: #fff;
}

.right-scroll {
height: 100%;
padding: 20rpx;
}

.right-item {
height: 80rpx;
line-height: 80rpx;
text-align: center;
border-bottom: 1px solid #eee;
}

.loading, .no-more {
height: 80rpx;
line-height: 80rpx;
text-align: center;
color: #999;
}
</style>