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

这个功能可以通过以下步骤实现：

1. 在左侧分类列表中，绑定一个点击事件，当用户点击某个分类时，获取该分类对应的内容列表，并将其展示在右侧内容区域。

2. 在右侧内容区域中，监听滚动事件，当用户滑动到底部时触发一个回调函数。

3. 在回调函数中，判断当前显示的内容列表是否已经加载完毕，如果没有加载完毕，则继续加载下一页数据，并将新的数据追加到已有数据的末尾；如果已经加载完毕，则切换到下一个分类的内容列表。

相关问题

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>

uniapp左右滑动切换内容

在Uniapp中，可以使用`swiper`组件实现左右滑动切换内容的效果。具体实现步骤如下：

1. 在页面中引入`swiper`组件：

<swiper>
  <swiper-item>
    <!-- 第一页内容 -->
  </swiper-item>
  <swiper-item>
    <!-- 第二页内容 -->
  </swiper-item>
  ...
</swiper>

2. 在`swiper`组件中添加`indicator-dots`属性，使得可以显示分页指示器：

<swiper indicator-dots>
  <swiper-item>
    <!-- 第一页内容 -->
  </swiper-item>
  <swiper-item>
    <!-- 第二页内容 -->
  </swiper-item>
  ...
</swiper>

3. 可以使用`current`属性来控制当前显示的页数，通过左右滑动来改变`current`属性的值：

<swiper indicator-dots :current="current">
  <swiper-item>
    <!-- 第一页内容 -->
  </swiper-item>
  <swiper-item>
    <!-- 第二页内容 -->
  </swiper-item>
  ...
</swiper>

export default {
  data() {
    return {
      current: 0 // 当前显示的页数
    };
  },
  methods: {
    // 滑动切换页面时触发
    swiperChange(event) {
      this.current = event.detail.current;
    }
  }
};

完整代码示例：

<template>
  <view>
    <swiper indicator-dots :current="current" @change="swiperChange">
      <swiper-item>
        <view class="page1">
          <text>第一页</text>
        </view>
      </swiper-item>
      <swiper-item>
        <view class="page2">
          <text>第二页</text>
        </view>
      </swiper-item>
      <swiper-item>
        <view class="page3">
          <text>第三页</text>
        </view>
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
export default {
  data() {
    return {
      current: 0 // 当前显示的页数
    };
  },
  methods: {
    // 滑动切换页面时触发
    swiperChange(event) {
      this.current = event.detail.current;
    }
  }
};
</script>

<style scoped>
.page1 {
  background-color: #f00;
  height: 100vh;
}
.page2 {
  background-color: #0f0;
  height: 100vh;
}
.page3 {
  background-color: #00f;
  height: 100vh;
}
</style>