在uni-app中,可以使用<picker>组件来实现选择器的功能。<picker>组件的用法如下:

  1. <template>中使用<picker>组件,并绑定需要展示的数据和选中的索引等属性。例如:
<template>
  <view>
    <picker mode="selector" :range="{{ array }}" :value="{{ index }}" @change="bindPickerChange">
      <view class="picker">
        当前选择:{{ array[index] }}
      </view>
    </picker>
  </view>
</template>
  1. <script>中定义数据和事件处理函数。例如:
<script>
export default {
  data() {
    return {
      array: ['选项1', '选项2', '选项3'],
      index: 0
    }
  },
  methods: {
    bindPickerChange(e) {
      this.index = e.detail.value
    }
  }
}
</script>

其中,mode属性指定选择器的模式,可以是selector(单列选择器),multiSelector(多列选择器),time(时间选择器),date(日期选择器),region(地区选择器)等。

在打开<picker>之前,可以通过其他的点击事件来改变需要展示的数据,从而实现其他的交互效果。例如,可以在点击按钮时改变选择器的选项数据:

<template>
  <view>
    <button @tap="changePickerData">改变选项数据</button>
    <picker mode="selector" :range="{{ array }}" :value="{{ index }}" @change="bindPickerChange">
      <view class="picker">
        当前选择:{{ array[index] }}
      </view>
    </picker>
  </view>
</template>
<script>
export default {
  data() {
    return {
      array: ['选项1', '选项2', '选项3'],
      index: 0
    }
  },
  methods: {
    changePickerData() {
      this.array = ['新选项1', '新选项2', '新选项3']
    },
    bindPickerChange(e) {
      this.index = e.detail.value
    }
  }
}
</script>

这样,在点击按钮时,选择器的选项数据会发生改变

uniapp的picker的用法再打开它之前能有其他的点击事件吗

原文地址: https://www.cveoy.top/t/topic/ixKB 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录