Select 下拉框

用于弹出一个下拉菜单给用户选择操作。

使用指南

在 page.json 中引入组件

  1. {
  2.     "navigationBarTitleText": "Select",
  3.     "usingComponents": {
  4.         "wux-cell-group": "../../dist/cell-group/index",
  5.         "wux-cell": "../../dist/cell/index",
  6.         "wux-select": "../../dist/select/index"
  7.     }
  8. }

示例

!> 该组件主要依靠 JavaScript 主动调用，所以一般只需在 wxml 中添加一个组件，并设置 id 为 #wux-select 或其他，之后在 page.js 中调用 $wuxSelect(id) 获取匹配到的第一个组件实例对象。

  1. <wux-select id="wux-select1" />
  2. <wux-select id="wux-select2" />
  3. <wux-select id="wux-select3" />
  5. <view class="page">
  6.     <view class="page__hd">
  7.         <view class="page__title">Select</view>
  8.         <view class="page__desc">下拉框</view>
  9.     </view>
  10.     <view class="page__bd">
  11.         <wux-cell-group title="Select">
  12.             <wux-cell title="职业" extra="{{ title1 }}" bind:click="onClick1"></wux-cell>
  13.             <wux-cell title="手机" extra="{{ title2 }}" bind:click="onClick2"></wux-cell>
  14.             <wux-cell title="爱好" extra="{{ title3 }}" bind:click="onClick3"></wux-cell>
  15.         </wux-cell-group>
  16.     </view>
  17. </view>
  1. import { $wuxSelect } from '../../dist/index'
  3. Page({
  4.     data: {
  5.         value1: '',
  6.         title1: '',
  7.         value2: '',
  8.         title2: '',
  9.         value3: '',
  10.         title3: '',
  11.     },
  12.     onClick1() {
  13.         $wuxSelect('#wux-select1').open({
  14.             value: this.data.value1,
  15.             options: [
  16.                 '法官',
  17.                 '医生',
  18.                 '猎人',
  19.                 '学生',
  20.                 '记者',
  21.                 '其他',
  22.             ],
  23.             onConfirm: (value, index, options) => {
  24.                 console.log('onConfirm', value, index, options)
  25.                 if (index !== -1) {
  26.                     this.setData({
  27.                         value1: value,
  28.                         title1: options[index],
  29.                     })
  30.                 }
  31.             },
  32.         })
  33.     },
  34.     onClick2() {
  35.         $wuxSelect('#wux-select2').open({
  36.             value: this.data.value2,
  37.             options: [{
  38.                     title: 'iPhone 3GS',
  39.                     value: '001',
  40.                 },
  41.                 {
  42.                     title: 'iPhone 5',
  43.                     value: '002',
  44.                 },
  45.                 {
  46.                     title: 'iPhone 5S',
  47.                     value: '003',
  48.                 },
  49.                 {
  50.                     title: 'iPhone 6',
  51.                     value: '004',
  52.                 },
  53.                 {
  54.                     title: 'iPhone 6S',
  55.                     value: '005',
  56.                 },
  57.                 {
  58.                     title: 'iPhone 6P',
  59.                     value: '006',
  60.                 },
  61.                 {
  62.                     title: 'iPhone 6SP',
  63.                     value: '007',
  64.                 },
  65.                 {
  66.                     title: 'iPhone SE',
  67.                     value: '008',
  68.                 },
  69.                 {
  70.                     title: 'iPhone 7',
  71.                     value: '009',
  72.                 },
  73.             ],
  74.             onConfirm: (value, index, options) => {
  75.                 console.log('onConfirm', value, index, options)
  76.                 if (index !== -1) {
  77.                     this.setData({
  78.                         value2: value,
  79.                         title2: options[index].title,
  80.                     })
  81.                 }
  82.             },
  83.         })
  84.     },
  85.     onClick3() {
  86.         $wuxSelect('#wux-select3').open({
  87.             value: this.data.value3,
  88.             multiple: true,
  89.             toolbar: {
  90.                 title: 'Please choose',
  91.                 confirmText: 'ok',
  92.             },
  93.             options: [{
  94.                     title: '画画',
  95.                     value: '1',
  96.                 },
  97.                 {
  98.                     title: '打球',
  99.                     value: '2',
  100.                 },
  101.                 {
  102.                     title: '唱歌',
  103.                     value: '3',
  104.                 },
  105.                 {
  106.                     title: '游泳',
  107.                     value: '4',
  108.                 },
  109.                 {
  110.                     title: '健身',
  111.                     value: '5',
  112.                 },
  113.                 {
  114.                     title: '睡觉',
  115.                     value: '6',
  116.                 },
  117.             ],
  118.             onChange: (value, index, options) => {
  119.                 console.log('onChange', value, index, options)
  120.                 this.setData({
  121.                     value3: value,
  122.                     title3: index.map((n) => options[n].title),
  123.                 })
  124.             },
  125.             onConfirm: (value, index, options) => {
  126.                 console.log('onConfirm', value, index, options)
  127.                 this.setData({
  128.                     value3: value,
  129.                     title3: index.map((n) => options[n].title),
  130.                 })
  131.             },
  132.         })
  133.     },
  134. })

视频演示

Select

API

参数 类型 描述 默认值
options object 配置项 -
options.prefixCls string 自定义类名前缀 wux-select
options.value any 指定当前选中的条目 -
options.options array 下拉列表 []
options.multiple boolean 是否支持多选 false
options.max number,stirng 最多选择几项，设置为 -1 的时候不限制选择 -1
options.toolbar any 工具栏配置项 {}
options.toolbar.title string 标题的文字 请选择
options.toolbar.cancelText string 取消按钮的文字 取消
options.toolbar.confirmText string 确定按钮的文字 确定
options.onChange function 选择完成后的回调函数 -
options.onConfirm function 点击确定按钮时的回调函数 -
options.onCancel function 点击取消按钮时的回调函数 -

下拉列表：options 参数请参考 Radio 或 Checkbox。