uniapp写小程序，使用了uni-ui，其中有一个功能：一行显示三个名字，总共5行，点击按钮一直循环滚动，第三行背景色高亮显示，怎么做，代码举例

在 UniApp 开发小程序中，要实现这个效果，可以结合 Vue.js 框架和 uni-ui 的组件来完成。首先，你需要引入`list`组件来展示名字，并设置一些基本样式。这里是一个简化的示例代码：

<template>
  <view class="scroll-container">
    <uni-list :data="names" show-loadmore load-more-text="加载更多" scroll-y>
      <uni-cell v-for="(name, index) in names.slice(0, 9)" :key="index">
        <uni-cell-item :class="{ highlight: (index + 1) % 3 === 0 }" @tap="handleCellTap(index)">
          <view>{{ name }}</view>
        </uni-cell-item>
      </uni-cell>
    </uni-list>
  </view>
</template>

<script>
export default {
  data() {
    return {
      names: ['Name1', 'Name2', 'Name3', 'Name4', 'Name5', 'Name6', 'Name7', 'Name8', 'Name9'], // 更多名字...
      highlightIndex: null,
    };
  },
  methods: {
    handleCellTap(index) {
      this.highlightIndex = index;
      if (this.highlightIndex === undefined || this.highlightIndex === 0) {
        this.highlightIndex = 2; // 如果是第一个或者已经高亮过，切换到第三个
      } else {
        this.highlightIndex = (this.highlightIndex - 1) % 3; // 否则，按顺序前进
      }
    },
  },
};
</script>

<style scoped>
.scroll-container {
  display: flex;
  flex-wrap: wrap;
}

.uni-cell.highlight {
  background-color: #FFA07A; /* 设置高亮颜色 */
}
</style>

在这个例子中，我们创建了一个`uni-list`列表，数据来自`names`数组。每个名字用`uni-cell`表示，并通过`:class`绑定动态的CSS类名，当索引除以3余数为0时，背景色变为高亮。`load-more-text`属性用于添加加载更多文字，`scroll-y`使其支持滚动。