uni-app中uni.showActionSheet在TV上用遥控器无法选择

在 uni-app 中使用 uni.showActionSheet 在 TV 上通过遥控器无法选择的问题，通常是因为 uni.showActionSheet 默认是为移动端设计的，而 TV 端的交互方式与移动端不同，尤其是遥控器的操作方式与触摸屏不同。

解决方案

1. 自定义 ActionSheet 组件： 你可以自己实现一个适用于 TV 端的 ActionSheet 组件，使用 focus 和 blur 事件来处理遥控器的焦点切换。通过监听遥控器的方向键和确认键来控制选择。

2. 使用 TV 端专用组件： 如果你使用的是 uni-app 的 TV 端插件或框架，可能会有专门为 TV 端设计的组件或 API，可以替代 uni.showActionSheet。

3. 监听遥控器事件： 在 uni.showActionSheet 的基础上，监听遥控器的按键事件，手动控制焦点的移动和选择。

示例代码

以下是一个简单的示例，展示如何通过监听遥控器事件来实现 ActionSheet 的选择功能：

<template>
  <view>
    <button @click="showActionSheet">显示 ActionSheet</button>
    <view v-if="showSheet" class="action-sheet">
      <view
        v-for="(item, index) in items"
        :key="index"
        :class="['action-sheet-item', { 'active': index === activeIndex }]"
        @click="handleItemClick(index)"
      >
        {{ item }}
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      showSheet: false,
      items: ['选项1', '选项2', '选项3'],
      activeIndex: 0
    };
  },
  methods: {
    showActionSheet() {
      this.showSheet = true;
      this.activeIndex = 0;
      this.$nextTick(() => {
        this.focusItem(this.activeIndex);
      });
    },
    handleItemClick(index) {
      this.showSheet = false;
      uni.showToast({
        title: `选择了: ${this.items[index]}`,
        icon: 'none'
      });
    },
    focusItem(index) {
      this.activeIndex = index;
    },
    handleKeyDown(event) {
      if (!this.showSheet) return;

      switch (event.keyCode) {
        case 38: // 上键
          this.activeIndex = Math.max(0, this.activeIndex - 1);
          break;
        case 40: // 下键
          this.activeIndex = Math.min(this.items.length - 1, this.activeIndex + 1);
          break;
        case 13: // 确认键
          this.handleItemClick(this.activeIndex);
          break;
        case 27: // 返回键
          this.showSheet = false;
          break;
        default:
          break;
      }
    }
  },
  mounted() {
    document.addEventListener('keydown', this.handleKeyDown);
  },
  beforeDestroy() {
    document.removeEventListener('keydown', this.handleKeyDown);
  }
};
</script>

<style>
.action-sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  padding: 20px;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
}

.action-sheet-item {
  padding: 10px;
  text-align: center;
  border-bottom: 1px solid #eee;
}

.action-sheet-item.active {
  background-color: #f0f0f0;
}
</style>