uniapp中scroll-view包含动态的选项并且可以横向滚动，给选中的项添加动态class

可以使用 v-bind:class 指令动态绑定 class，结合 scroll-view 的 scroll 工具类和 scroll-into-view 方法实现选中项高亮效果。具体实现步骤如下：

1. 在 scroll-view 内部使用 v-for 渲染动态选项列表，并为每个选项绑定一个唯一的 id。

<scroll-view class="scroll-view-x" scroll-x>
  <view v-for="(item, index) in options" :key="item.id" :id="'option-' + item.id" 
        :class="{'active': currentIndex === index}" @tap="handleTap(index)">
    {{ item.text }}
  </view>
</scroll-view>

2. 在 data 中定义 currentIndex 变量存储当前选中项的索引值，默认为 0。

data() {
  return {
    currentIndex: 0,
    options: [
      { id: 1, text: '选项1' },
      { id: 2, text: '选项2' },
      { id: 3, text: '选项3' },
      { id: 4, text: '选项4' },
      { id: 5, text: '选项5' }
    ]
  }
},

3. 在 methods 中定义 handleTap 方法，该方法用于点击某个选项时触发，更新当前选中项的索引值。

methods: {
  handleTap(index) {
    this.currentIndex = index;
    // 使用 scroll-into-view 方法将当前选中项滚动到可视区域
    uni.pageScrollTo({
      selector: '#option-' + this.options[index].id,
      duration: 300
    });
  }
},

4. 在样式文件中定义 active 类的样式，用于高亮显示当前选中项。

.active {
  color: #ff0000;
  font-weight: bold;
}

这样，当用户点击某个选项时，该选项会高亮显示，并自动滚动到可视区域。