uni-app uni-goods-nav 组件在ipad中左边图标与文字重叠问题

uni-app uni-goods-nav 组件在ipad中左边图标与文字重叠问题

开发环境 版本号 项目创建方式
Windows windows11 HBuilderX

操作步骤：

  • ios ipad 模拟器

预期结果：

  • 文字与图标不重叠。

实际结果：

  • 正确了。

bug描述：

uni-goods-nav 在ipad pro上，左边出现文字与图标重叠了。 本人解决了，不知道对不对。

问题在这行代码：

<view v-for="(item,index) in options" :key="index" class="flex uni-tabcart-button-left uni-tabshop-cart"

改为

<view v-for="(item,index) in options" :key="index" class="uni-tabcart-button-left uni-tabshop-cart"

就正确了。
就是把class中的“flex”删除掉，就OK了，不知道这样修改是否合理。


更多关于uni-app uni-goods-nav 组件在ipad中左边图标与文字重叠问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app uni-goods-nav 组件在ipad中左边图标与文字重叠问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在 Uni-App 中使用 uni-goods-nav 组件时，如果在 iPad 中出现左边图标与文字重叠的问题，可能是由于样式适配不当或布局计算不准确导致的。以下是一些可能的解决方案：

1. 检查样式适配

确保 uni-goods-nav 组件的样式在不同设备上都能正确显示。你可以在 uni-goods-nav 组件的样式中添加一些媒体查询或使用 rpx 单位来适配不同屏幕尺寸。

/* 示例样式 */
.uni-goods-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  box-sizing: border-box;
}

.uni-goods-nav .icon {
  margin-right: 10rpx; /* 调整图标与文字的间距 */
}

2. 使用 rpx 单位

rpx 是 Uni-App 中用于适配不同屏幕尺寸的单位，1rpx 等于屏幕宽度的 1/750。使用 rpx 单位可以确保在不同设备上都能正确显示。

<uni-goods-nav>
  <view class="item">
    <image class="icon" src="/static/icon.png"></image>
    <text class="text">Text</text>
  </view>
</uni-goods-nav>

.item {
  display: flex;
  align-items: center;
}

.icon {
  width: 40rpx;
  height: 40rpx;
  margin-right: 10rpx; /* 使用 rpx 单位 */
}

.text {
  font-size: 28rpx;
}

3. 动态计算间距

如果上述方法无法解决问题，你可以尝试通过 JavaScript 动态计算图标与文字之间的间距。根据设备的屏幕宽度或高度，动态调整间距。

export default {
  data() {
    return {
      iconMarginRight: '10rpx'
    };
  },
  onLoad() {
    const screenWidth = uni.getSystemInfoSync().screenWidth;
    if (screenWidth > 768) { // iPad 宽度通常大于 768
      this.iconMarginRight = '20rpx';
    }
  }
};

<uni-goods-nav>
  <view class="item">
    <image class="icon" :style="{ marginRight: iconMarginRight }" src="/static/icon.png"></image>
    <text class="text">Text</text>
  </view>
</uni-goods-nav>

4. 使用 uni.getSystemInfoSync 获取设备信息

通过 uni.getSystemInfoSync 获取设备信息，判断当前设备是否为 iPad，并根据设备类型调整样式。

const systemInfo = uni.getSystemInfoSync();
if (systemInfo.model.indexOf('iPad') !== -1) {
  // 针对 iPad 的样式调整
}

5. 检查组件版本

确保你使用的 uni-goods-nav 组件是最新版本，因为开发者可能已经修复了类似的问题。你可以通过更新 Uni-App 或相关组件来解决问题。

6. 自定义组件

如果问题依然存在，考虑自定义一个类似的导航组件，完全控制布局和样式，避免使用 uni-goods-nav 组件。

<view class="custom-goods-nav">
  <view class="item">
    <image class="icon" src="/static/icon.png"></image>
    <text class="text">Text</text>
  </view>
</view>

.custom-goods-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  box-sizing: border-box;
}

.item {
  display: flex;
  align-items: center;
}

.icon {
  width: 40rpx;
  height: 40rpx;
  margin-right: 10rpx;
}

.text {
  font-size: 28rpx;
}
回到顶部