uniapp自研组件库：巧用自适应数据展示模块，开发更高效！

2023-10-10 04:07:42

在uniapp开发中，为了满足不同设备和屏幕尺寸的兼容性，自适应数据展示模块至关重要。本文将指导您使用uniapp封装自研组件库，创建自适应数据展示模块，帮助您轻松应对各种屏幕尺寸，提升开发效率。

封装自适应数据展示模块

1. 组件初始化

<template>
  <view class="data-display">
    <view class="data-item" v-for="item in data" :key="item.id">
      <text>{{ item.label }}:</text>
      <text>{{ item.value }}</text>
    </view>
  </view>
</template>

<script>
export default {
  props: ['data'],
};
</script>

2. 样式定义

.data-display {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.data-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

3. 使用组件

<template>
  <data-display :data="data"></data-display>
</template>

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

export default {
  components: { DataDisplay },
  data() {
    return {
      data: [
        { id: 1, label: '姓名', value: '张三' },
        { id: 2, label: '年龄', value: '25' },
        { id: 3, label: '城市', value: '北京' },
      ],
    };
  },
};
</script>