uniapp 分类页面 左主目录 有子目录 两边滚动相关联类 其他页面进入会传参左主目录id 完整代码实现

UniApp构建分类页面时，如果需要实现左主目录有子目录并且左右内容可以联动滚动关联，通常会在Vue框架中使用组件化的方式进行设计。这里是一个简化的代码示例，假设我们已经有了一个`CategoryList`组件作为左侧的目录，`ArticleContent`组件展示右侧的内容：

<template>
  <view class="container">
    <!-- 左侧目录 -->
    <category-list :id="leftMenuId" @select="onSelect"></category-list>

    <!-- 右侧内容区域，动态加载 -->
    <article-content v-if="currentCategory" :category-id="currentCategory.id"></article-content>
  </view>
</template>

<script>
import CategoryList from '@/components/CategoryList.vue';
import ArticleContent from '@/components/ArticleContent.vue';

export default {
  components: {
    CategoryList,
    ArticleContent
  },
  data() {
    return {
      leftMenuId: '', // 从其他页面传过来的左主目录ID
      currentCategory: null
    };
  },
  methods: {
    onSelect(category) {
      this.leftMenuId = category.id; // 更新左侧菜单ID
      this.currentCategory = category; // 设置当前选中的子目录
      // 根据ID请求文章数据并更新右侧内容
      this.loadArticleData(category.id);
    },
    loadArticleData(categoryId) { /* 这里是异步获取文章列表的函数 */ }
  },
  created() {
    // 初始化状态，如果没有传入ID，则显示默认分类或首页内容
    if (!this.leftMenuId) {
      // 默认处理逻辑
      this.loadArticleData('defaultCategoryId');
    }
  }
};
</script>

<style scoped>
.container {
  display: flex;
  overflow-x: auto;
}
</style>

在这个例子中，`CategoryList`组件应该有一个`select`事件，当用户选择某个子目录时触发，将对应的ID传递给父组件。然后父组件根据这个ID切换右侧的`ArticleContent`组件，并更新其内容。