前端 - uniapp titleIcon图标定位异常，文档说设置后，图标在标题右侧，实际是在左侧？

Question

let pages = getCurrentPages();
var page = pages[pages.length - 1];
var currentWebview = page.$getAppWebview();
currentWebview.setStyle({
     titleNView: {
          "titleIcon": "static/image/pc.png"
      },
 });

Answer 1

在 Uniapp 中，如果你设置了 titleNView 的 titleIcon 属性，它的确应该出现在标题的右侧。但是，如果你发现图标出现在标题的左侧，可能是因为你的样式表中存在某些样式规则造成的。

首先，你可以检查 titleIcon 的使用方式是否正确。在 titleNView 中，titleIcon 属性应该是一个对象，包含 text 和 color 两个属性，例如：

{
  titleText: 'My Title',
  titleIcon: {
    text: '\ue601',
    color: '#000000'
  }
}

其中，text 属性是一个 Unicode 字符，表示图标的样式，color 属性是一个表示颜色的字符串，表示图标的颜色。

如果你确认 titleIcon 属性的使用方式没有问题，那么就需要检查样式表中是否存在可能影响 titleIcon 定位的样式规则。例如，如果你的样式表中存在如下的规则：

div {
  float: left;
}

那么可能会导致 titleIcon 的定位出现问题，因为它也是包裹在一个 div 元素中的。为了避免这种情况，你可以在 titleIcon 的父元素中添加一个样式规则，强制它的位置是在右侧，例如：

.uni-title-icon {
  float: right;
}

然后，在 titleIcon 中指定一个自定义的 class 名称，例如：

{
  titleText: 'My Title',
  titleIcon: {
    text: '\ue601',
    color: '#000000',
    class: 'uni-title-icon'
  }
}

这样，titleIcon 的父元素就会自动添加一个 uni-title-icon 的类名，并且图标就能正确显示在标题的右侧了。