uni-app能默认选中某一项吗

在 uni-app 中，你可以通过数据绑定和列表渲染来实现默认选中某一项的功能。通常，你会使用 v-for 指令来渲染一个列表，并使用 v-model 或其他绑定机制来跟踪选中的项。以下是一个示例代码，展示了如何在 uni-app 中实现默认选中某一项的功能。

示例代码

1. 模板部分 (template)

<template>
  <view>
    <picker mode="selector" :range="options" v-model="selectedIndex">
      <view class="picker">
        {{ options[selectedIndex] }}
      </view>
    </picker>
  </view>
</template>

2. 脚本部分 (script)

<script>
export default {
  data() {
    return {
      options: ['Option 1', 'Option 2', 'Option 3', 'Option 4'],
      selectedIndex: 1 // 默认选中第二项，索引从0开始
    };
  },
  onLoad() {
    // 可以在这里进行初始化操作，比如从服务器获取数据并设置默认选项
    // this.options = [...];
    // this.selectedIndex = ...; // 根据需要设置默认选中项的索引
  },
  methods: {
    // 可以在这里定义一些方法，比如处理选择改变的事件
    onPickerChange(e) {
      this.selectedIndex = e.mp.detail.value;
      console.log('Selected:', this.options[this.selectedIndex]);
    }
  }
};
</script>

3. 样式部分 (style)

<style scoped>
.picker {
  padding: 20px;
  background-color: #f8f8f8;
  border: 1px solid #ddd;
  text-align: center;
}
</style>

说明

1. 模板部分：使用 <picker> 组件来显示选择器，并通过 v-model 绑定 selectedIndex 变量，以跟踪当前选中的项。
2. 脚本部分：在 data 函数中定义 options 数组和 selectedIndex 变量，其中 selectedIndex 设置为默认选中项的索引（在这个例子中是1，即默认选中第二项）。
3. 样式部分：定义了一些简单的样式来美化选择器显示区域。

通过这种方式，你可以很方便地在 uni-app 中实现默认选中某一项的功能。如果需要从服务器动态获取数据并设置默认选项，可以在 onLoad 生命周期钩子中进行相关操作。