uni-app uni-grid 九宫格在华为nove7手机上显示串行

uni-app uni-grid 九宫格在华为nove7手机上显示串行

开发环境 版本号 项目创建方式
Mac 11.6.5 HBuilderX

示例代码：

<template> <view class="wrap"> <uni-section title="基础样式" type="line" padding> <uni-grid :column="4" :highlight="true" [@change](/user/change)="change"> <uni-grid-item v-for="(item, index) in 4" :index="index" :key="index"> <view class="grid-item-box" style="background-color: #fff;"> <uni-icons type="image" :size="30" color="#777" /> <text class="text">文本信息</text> </view> </uni-grid-item> </uni-grid> </uni-section> </view> </template> <script> export default { data() { return { } }, methods: { change() {}, } } </script> <style lang="scss"> .wrap { padding: 10px; } .image { width: 25px; height: 25px; } .text { font-size: 14px; margin-top: 5px; } .example-body { /* #ifndef APP-NVUE */ // display: block; /* #endif */ } .grid-dynamic-box { margin-bottom: 15px; } .grid-item-box { flex: 1; /* #ifndef APP-NVUE */ display: flex; /* #endif */ flex-direction: column; align-items: center; justify-content: center; padding: 15px 0; } .grid-item-box-row { flex: 1; /* #ifndef APP-NVUE */ display: flex; /* #endif */ flex-direction: row; align-items: center; justify-content: center; padding: 15px 0; } .grid-dot { position: absolute; top: 5px; right: 15px; } .swiper { height: 420px; } /* #ifdef H5 */ [@media](/user/media) screen and (min-width: 768px) and (max-width: 1425px) { .swiper { height: 630px; } } [@media](/user/media) screen and (min-width: 1425px) { .swiper { height: 830px; } } /* #endif */ </style>

更多关于uni-app uni-grid 九宫格在华为nove7手机上显示串行的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

补充手机型号 OPPOr9s 也是同样的问题

更多关于uni-app uni-grid 九宫格在华为nove7手机上显示串行的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在 uni-app 中使用 uni-grid 组件时，如果在华为 Nova 7 手机上出现九宫格显示串行的问题，可能是由于以下原因导致的：

1. CSS 样式问题

  • 原因：不同设备的屏幕尺寸和分辨率不同，可能导致 CSS 样式在不同设备上表现不一致。
  • 解决方案：检查并调整 uni-grid 的 CSS 样式，确保在不同设备上都能正确显示。可以使用 flex 布局或 grid 布局来确保九宫格的排列。
.uni-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.uni-grid-item {
  width: 30%; /* 根据实际需求调整 */
  margin-bottom: 10px; /* 根据实际需求调整 */
}

2. 屏幕适配问题

  • 原因：华为 Nova 7 的屏幕尺寸和分辨率可能与其他设备不同，导致布局错乱。
  • 解决方案：使用 uni-app 提供的 rpx 单位进行布局，rpx 可以根据屏幕宽度进行自适应。
.uni-grid-item {
  width: 240rpx; /* 根据实际需求调整 */
  height: 240rpx; /* 根据实际需求调整 */
  margin-bottom: 20rpx; /* 根据实际需求调整 */
}

3. 组件版本问题

  • 原因：uni-grid 组件可能存在版本兼容性问题，导致在某些设备上显示异常。
  • 解决方案：确保 uni-app 和 uni-grid 组件是最新版本，或者尝试使用其他布局组件。

4. 设备兼容性问题

  • 原因：某些设备可能存在特定的兼容性问题，导致布局错乱。
  • 解决方案：在华为 Nova 7 上进行调试，查看具体的布局问题，并针对性地调整样式或布局。

5. 使用 uni-grid 的替代方案

如果 uni-grid 组件无法满足需求，可以考虑使用 flex 布局或 grid 布局手动实现九宫格。

<view class="custom-grid">
  <view class="grid-item" v-for="(item, index) in 9" :key="index">{{ index + 1 }}</view>
</view>

.custom-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.grid-item {
  width: 30%;
  height: 100px; /* 根据实际需求调整 */
  margin-bottom: 10px; /* 根据实际需求调整 */
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f0f0f0;
}
回到顶部