微信控件使用文档

飞道科技

van-picker

  1. 1. 使用效果
  2. 2. 使用方法
  3. 3. 属性
  4. 4.方法
    1. getValues()
    2. setValues()
    3. getIndexes()
    4. setIndexes()
    5. getColumnValue()
    6. setColumnValue()
    7. getColumnIndex()
    8. setColumnIndex()
    9. getColumnValues()
    10. setColumnValues()
  5. 5.事件
    1. confirm
    2. cancel
    3. change

小程序自定义组件

使用此组件需要依赖小程序基础库 2.2.1 以上版本，同时依赖开发者工具的 npm 构建。具体详情可查阅官方 npm 文档。

1. 使用效果

使用示例

2. 使用方法

  1. 安装 小程序控件widgets-wxapp

     npm install @dfeidao/widgets-wxapp

  2. 在需要使用 van-picker 的页面 page.json 中添加 van-picker 自定义组件配置

     {
     "usingComponents": {
         "van-picker": "@dfeidao/widgets-wxapp/fd-wx000007/index"
     }
 }

  3. WXML 文件中引用 van-picker

     <van-picker columns="" bind:change="onChange" />
 <van-picker show-toolbar title="标题" columns="" bind:cancel="onCancel" bind:confirm="onConfirm" bind:change="onChange" />

3. 属性

属性名 类型 默认值 是否必须 说明
columns Array [] 是 对象数组，配置每一列显示的数据
show-toolbar Boolean false 否 是否显示顶部栏
title String ’’ 否 顶部栏标题
loading Boolean false 否 是否显示加载状态
value-key String text 否 选项对象中，文字对应的 key
item-height Number 44 否 选项高度
confirm-button-text String 确认 否 确认按钮文字
cancel-button-text String 取消 否 取消按钮文字
visible-item-count Number 5 否 可见的选项个数

4.方法

getValues()

获取所有列选中的值

返回值 string[]

使用示例：

wxml

<van-picker class="class_name" columns="" bind:change="onChange" />

ts

import select_component from '@dfeidao/atom-wxapp/api/xml/select-component';

const widget = select_component(fd, '.class_name');
// const widget = select_component(fd, '#id');
const value = widget.getValues();

setValues()

设置所有列选中的值

参数:

  1. values 每一列要选中的内容

使用示例:

wxml

<van-picker class="class_name" columns="" bind:change="onChange" />

ts

import select_component from '@dfeidao/atom-wxapp/api/xml/select-component';

const widget = select_component(fd, '.class_name');
// const widget = select_component(fd, '#id');
widget.setValues(["宁波"]);

getIndexes()

获取所有列选中值对应的索引

返回值 number[]

setIndexes()

设置所有列选中值对应的索引

参数:

  1. indexes 要选中的内容对应的索引

getColumnValue()

获取对应列选中的值

参数:

  1. columnIndex 要获取列的索引

setColumnValue()

设置对应列选中的值

参数:

  1. columnIndex 要选中列的索引

  2. value 要选中的内容

getColumnIndex()

获取对应列选中项的索引

参数:

  1. columnIndex 要选中列的索引

setColumnIndex()

设置对应列选中项的索引

参数:

  1. columnIndex 要选中列的索引

  2. optionIndex 要选中的内容对应的索引

getColumnValues()

获取对应列中所有选项

参数:

  1. columnIndex 要选中列的索引

setColumnValues()

设置对应列中所有选项

参数:

  1. columnIndex 要选中列的索引

  2. values 要设置的全部选项

5.事件

confirm

点击完成按钮时触发

const { value, index } = args.detail; value 所有列选中的内容，index 当前列选中内容的索引

cancel

点击取消按钮时触发

const { value, index } = args.detail; value 所有列选中的内容，index 当前列选中内容的索引

change

选项改变时触发

const { picker, value, index } = args.detail; value 所有列选中的内容，index 当前列选中内容的索引，picker 方法