uniapp中如何使用容器组件开发

1. 什么是容器组件

在Uniapp中，容器组件指的是具有容器特性的组件，可以将多个子组件组合起来形成一个完整的功能模块，常见的容器组件有列表组件、滑动组件、分段器组件等。

容器组件通常有两个重要的属性：数据源和模板。数据源用来存储组件需要展示的数据，模板则是组件内部的渲染逻辑，根据数据源的变化来动态更新组件的显示内容。

容器组件的作用在于提高代码复用性和可维护性，把功能划分为独立的组件，便于组合和调用。

2. 如何使用容器组件开发

2.1 列表组件的使用

列表组件可以将大量的数据按照一定的规则展示在页面上，是移动端开发中常用的容器组件之一。

列表组件的使用分为以下几个步骤：

新建一个vue文件，定义列表组件的结构和样式，以及数据源和模板。

在主页面中引入列表组件，并传递数据源和模板。

在列表组件中使用v-for指令遍历数据源，根据模板动态渲染列表项。

以下是一个简单的列表组件实现示例：

//List.vue
<template>
  <div class="list">
    <ul>
      <li v-for="(item,index) in listData" :key="index">
        {{ item.name }} : {{ item.age }}
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  name: "List",
  props: {
    listData: Array,
  },
}
</script>
<style scoped>
.list {
  padding: 0;
  margin: 0;
}
.list ul {
  list-style: none;
}
.list li {
  border: 1px solid #ddd;
  padding: 10px;
}
</style>
//index.vue
<template>
  <div class="home">
    <List :listData="dataList"></List>
  </div>
</template>
<script>
import List from "@/components/List.vue";
export default {
  name: "Home",
  components: {
    List,
  },
  data() {
    return {
      dataList: [
        { name: "张三", age: 18 },
        { name: "李四", age: 20 },
        { name: "王五", age: 22 },
      ],
    };
  },
};
</script>

以上示例中，List.vue就是一个列表组件，它根据传入的props.listData遍历生成多个li元素。在index.vue中，通过<List>标签传递数据源和模板，即可渲染一个简单的列表。

2.2 滑动组件的使用

滑动组件可以将多个子组件按照一定的规则进行排列，实现类似于轮播图、选项卡等常见的交互效果。

绝大多数情况下，我们会选用第三方库中的滑动组件（例如swiper），这里以swiper为例进行说明。

以下是一个swiper组件实现示例：

//Swiper.vue
<template>
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide" v-for="(item,index) in swiperList" :key="index">
        {{ item.text }}
      </div>
    </div>
    <div class="swiper-pagination"></div>
  </div>
</template>
<script>
import Swiper from "swiper";
import "swiper/css/swiper.css";
export default {
  name: "Swiper",
  props: {
    swiperList: Array,
  },
  mounted() {
    const swiper = new Swiper(".swiper-container", {
      pagination: {
        el: ".swiper-pagination",
      },
    });
  },
};
</script>
<style scoped>
.swiper-container {
  width: 100%;
  height: 100%;
}
.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  height: 150px;
  line-height: 150px;
}
</style>
//index.vue
<template>
  <div class="home">
    <Swiper :swiperList="swiperList"></Swiper>
  </div>
</template>
<script>
import Swiper from "@/components/Swiper.vue";
export default {
  name: "Home",
  components: {
    Swiper,
  },
  data() {
    return {
      swiperList: [
        { text: "1" },
        { text: "2" },
        { text: "3" },
        { text: "4" },
        { text: "5" },
      ],
    };
  },
};
</script>

以上示例中，Swiper.vue是一个使用swiper库实现的滑动组件，它可以根据传入的swiperList遍历生成多个swiper-slide元素，并实现了分页器的功能。在index.vue中，通过<Swiper>标签传递数据源，即可渲染一个简单的swiper组件。

2.3 分段器组件的使用

分段器组件可以将多个子组件按照一定的规则进行划分，实现类似于页签、分类等常见的交互效果。

以下是一个分段器组件实现示例：

//SegmentedControl.vue
<template>
  <div class="segmented-control">
    <div
      class="segmented-control-item"
      v-for="(item,index) in controlList"
      :key="index"
      :class="{active:index===currentIndex}"
      @click="handleClick(index)"
    >
      {{ item.title }}
    </div>
  </div>
</template>
<script>
export default {
  name: "SegmentedControl",
  props: {
    controlList: Array,
    currentIndex: Number || String,
  },
  methods: {
    handleClick(index) {
      this.$emit("change", index);
    },
  },
};
</script>
<style scoped>
.segmented-control {
  display: flex;
  width: 100%;
}
.segmented-control-item {
  flex-grow: 1;
  text-align: center;
  padding: 10px 0;
  background-color: #eee;
  cursor: pointer;
}
.segmented-control-item.active {
  background-color: #fff;
}
</style>
//index.vue
<template>
  <div class="home">
    <SegmentedControl
      :controlList="controlList"
      :currentIndex="currentIndex"
      @change="handleChange"
    />
    <div class="content">
      {{ controlList[currentIndex].content }}
    </div>
  </div>
</template>
<script>
import SegmentedControl from "@/components/SegmentedControl.vue";
export default {
  name: "Home",
  components: {
    SegmentedControl,
  },
  data() {
    return {
      controlList: [
        { title: "选项一", content: "选项一的内容" },
        { title: "选项二", content: "选项二的内容" },
        { title: "选项三", content: "选项三的内容" },
      ],
      currentIndex: 0,
    };
  },
  methods: {
    handleChange(index) {
      this.currentIndex = index;
    },
  },
};
</script>

以上示例中，SegmentedControl.vue是一个分段器组件，它可以根据传入的controlList遍历生成多个segmented-control-item元素，并根据currentIndex属性控制当前选中的项。在index.vue中，通过<SegmentedControl>标签传递数据源和currentIndex属性，并监听change事件调整currentIndex，即可渲染一个简单的分段器组件。