uni-app DBschema 自动生成代码中包含file-picker组件时，在列表中file-picker组件的图片不能居中。

uni-app DBschema 自动生成代码中包含file-picker组件时，在列表中file-picker组件的图片不能居中。

操作步骤：

1

预期结果：

1

实际结果：

1

bug描述：

在后台使用dbschema生成页面后，运行到chorm浏览器中，跳转到list.vue界面。发现列表中的file-picker组件图片无法居中.但是add.vue和edit.vue是正常的。

开发环境 版本号 项目创建方式
Windows 20H2 HBuilderX
HBuilderX 3.4.7

image


更多关于uni-app DBschema 自动生成代码中包含file-picker组件时，在列表中file-picker组件的图片不能居中。的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app DBschema 自动生成代码中包含file-picker组件时，在列表中file-picker组件的图片不能居中。的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在 uni-app 中使用 DBschema 自动生成代码时，如果包含 file-picker 组件，并且在列表中 file-picker 组件的图片不能居中，可能是由于样式问题导致的。你可以通过以下几种方式来解决这个问题：

1. 使用 flex 布局

确保 file-picker 组件的父容器使用了 flex 布局，并且设置了 justify-content 和 align-items 为 center，这样可以使图片在容器中居中。

<view class="container">
  <file-picker class="file-picker"></file-picker>
</view>

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%; /* 确保容器有高度 */
}

.file-picker {
  /* 其他样式 */
}

2. 使用 text-align 和 vertical-align

如果 file-picker 组件内部使用了 img 标签，你可以通过 text-align 和 vertical-align 来使图片居中。

<view class="container">
  <file-picker class="file-picker">
    <img src="your-image-url" class="image" />
  </file-picker>
</view>

.container {
  text-align: center;
  height: 100%; /* 确保容器有高度 */
}

.file-picker {
  display: inline-block;
  vertical-align: middle;
}

.image {
  vertical-align: middle;
}

3. 使用 position 和 transform

你也可以使用 position 和 transform 来使图片居中。

<view class="container">
  <file-picker class="file-picker">
    <img src="your-image-url" class="image" />
  </file-picker>
</view>

.container {
  position: relative;
  height: 100%; /* 确保容器有高度 */
}

.file-picker {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

4. 检查 file-picker 组件的默认样式

有时 file-picker 组件可能自带一些默认样式，导致图片无法居中。你可以通过开发者工具检查 file-picker 组件的默认样式，并根据需要进行覆盖。

5. 使用 uni-app 提供的样式类

uni-app 提供了一些内置的样式类，如 uni-center，你可以直接使用这些类来使内容居中。

<view class="uni-center">
  <file-picker class="file-picker"></file-picker>
</view>

6. 动态调整样式

如果图片的尺寸不固定，你可以通过动态计算图片的尺寸来调整样式，确保图片居中。

<view class="container">
  <file-picker class="file-picker" @change="onFileChange">
    <img :src="imageUrl" :style="imageStyle" />
  </file-picker>
</view>

export default {
  data() {
    return {
      imageUrl: '',
      imageStyle: {}
    };
  },
  methods: {
    onFileChange(e) {
      const file = e.detail.file;
      const imageUrl = URL.createObjectURL(file);
      const img = new Image();
      img.src = imageUrl;
      img.onload = () => {
        this.imageUrl = imageUrl;
        this.imageStyle = {
          width: `${img.width}px`,
          height: `${img.height}px`,
          marginLeft: `-${img.width / 2}px`,
          marginTop: `-${img.height / 2}px`
        };
      };
    }
  }
};

.container {
  position: relative;
  height: 100%; /* 确保容器有高度 */
}

.file-picker {
  position: absolute;
  top: 50%;
  left: 50%;
}
回到顶部