u-icon在一个list里显示多个，点击第一个然后第一个图标更换，如何编写

在uni-app中，如果你想在列表中显示多个u-icon，并且能够通过点击第一个图标来替换其样式，你可以结合HTML、CSS和JavaScript来实现。这里有一个基本的例子：

HTML部分:

<view class="icon-list">
  <u-icon wx:for="{{icons}}" :key="$index" @click="swapIcon(0)" :class="{selected: $index === 0}">
    {{ icons[$index] }}
  </u-icon>
</view>

在上面的代码中，`icons`是你的图标数组，每个图标会作为一个单独的`u-icon`元素生成，并添加了`selected`类名，用于样式切换。

CSS部分:

.selected {
  /* 为选中的图标添加不同的样式，例如更改颜色 */
  color: blue;
}

JavaScript部分:

Page({
  data: {
    icons: ['icon1', 'icon2', 'icon3'], // 你的图标数组
    selectedIndex: -1
  },
  swapIcon(index) {
    this.selectedIndex = index;
    if (index === 0) {
      // 当点击第一个图标时，更新其样式
      this.setData({
        selectedClass: 'your-selected-class' // 或者直接使用 "selected"
      });
    } else {
      this.setData({
        selectedClass: '' // 移除选中样式
      });
    }
  }
})

上述代码会在点击时切换`selectedIndex`，然后根据`selectedIndex`来控制`selectedClass`的有无，从而改变第一个图标的样式。