@tanzhenxing/zx-picker-view NPM

zx-picker-view 嵌入页面的滚动选择器

zx-picker-view 是一个嵌入页面的滚动选择器组件，基于 uni-app 的 picker-view 进行封装，提供了更灵活的自定义选项。

特性

支持 H5、小程序、App 端。
高度可定制化的选项内容和样式。
遵循 uni-app picker-view 的基本属性和事件。

安装

# npm
npm install zx-ui

# yarn
yarn add zx-ui

使用方法

在 script 中引用组件：

<script setup>
import ZxPickerView from '@/components/zx-picker-view/zx-picker-view.vue';
</script>

在 template 中使用组件：

<template>
  <view>
    <zx-picker-view
      :columns="columns"
      :value="selectedValue"
      @change="handleChange"
    />
  </view>
</template>

API

Props

属性名	类型	默认值	说明
`value`	`Array`	`[]`	数组中的数字依次表示 `picker-view` 内的 `picker-view-column` 选择的第几项（下标从 0 开始），数字大于可选项长度时，选择最后一项。
`columns`	`Array`	`[]`	对象数组，设置每一列的数据。例如：`[[{text: '北京'}, {text: '上海'}], [{text: '男'}, {text: '女'}]]`
`keyName`	`String`	`'text'`	选项对象中，需要展示的属性键名。
`itemHeight`	`String`	`'88rpx'`	各列中，单个选项的高度，单位 rpx。
`visibleItemCount`	`String`	`Number`	`5`	每列中可见选项的数量。
`indicatorStyle`	`String`	`'height: 88rpx;'`	设置选择器中间选中框的样式。
`indicatorClass`	`String`	`''`	设置选择器中间选中框的类名。
`maskStyle`	`String`	`''`	设置蒙层的样式。
`maskClass`	`String`	`''`	设置蒙层的类名。
`immediateChange`	`Boolean`	`false`	是否在手指松开时立即触发 `change` 事件。若不开启则会在滚动动画结束后触发 `change` 事件。（微信小程序 2.21.1+ 支持）

Events

事件名	说明
`change`	当滚动选择，`value` 改变时触发 `change` 事件，`event.detail = {value: value}`；`value`为数组，表示 `picker-view` 内的 `picker-view-column` 当前选择的是第几项（下标从 0 开始）。
`pickstart`	当滚动选择开始时候触发事件。（微信小程序2.3.1、快手小程序支持）
`pickend`	当滚动选择结束时候触发事件。（微信小程序2.3.1、快手小程序支持）

示例

请参考 src/pages/components/picker/view.vue 文件中的详细用法。

zx-picker-view uni-app picker-view 选择器选择器组件选择器功能

@tanzhenxing/zxui @tanzhenxing/zx-address

1.0.2

1 month ago

1.0.1

2 months ago