weex-x-picker

weex-x-picker 支持 single(单选)，area(区域)，section(区间)，date(日期)，time(时间), linkage(联动)。

weex-x-picker 基于 alibaba 的weex-ui中的wxc-popup，wxc-overlay 组件开发，感谢weex-ui的开发团队辛苦开源weex-ui。

x-picker

用于选择器，包括单选，选择区间，时间，日期，区域等。

安装

npm add weex-x-picker

使用方法

<template><div class="wrapper"><text @click="openPicker">打开picker</text><x-picker :type="pickerType":show="showPicker":dataset="list":defaultTitle="defaultTitle"@overlayClick="pickerOverlayClick"@onchange="change" /></div>
</template><script>import { XPicker } from 'weex-x-picker';export default {components: { XPicker },data: () => ({pickerType: 'single',showPicker: false,list: [{ title: '金星' },{ title: '木星' },{ title: '水星' },{ title: '火星' },{ title: '地球' },{ title: '天王星' },{ title: '海王星' },{ title: '冥王星' },{ title: '哈雷彗星' },],defaultTitle : '地球'}),methods: {openPicker () {this.showPicker = true;},pickerOverlayClick (e) {this.showPicker = false;},change (e) {console.log(e)}}}</script><style scoped>.wrapper {padding-top: 100px;}</style>

可配置参数

Prop	Type	Required	Default	Desc
show	`Boolean`	`Y`	`false`	控制选择器是否显示
type	`String`	`Y`	`'single'`	选择器的类型，详细配置参考下方 `type规则`
defaultTitle	`String`	`N`	`null`	选择器的默认值标题，如果是多列用空格隔开，默认值必须是选择器中的选项，否则匹配不到不生效。
dataset	`Array`	Y	`[]`	选择器的数据集合。当type为section时，数据集的格式需要规定为[ […], […] ]，，详细配置参考下方 `dataset规则`
yearSection	`Array`	`N`	`[1949, new Date().getFullYear()]`	年份的区间，该参数只有才type为date时，才生效。用于规定日期的年份区间
linkageColumn	`Number`	N	`2`	联动的列数，该参数只有在type为linkage时，才生效。用于自定义联动的数据的列。（注：动态修改时，需要先将类型修改为linkage，在修改该值）

type 规则

Value	DefaultColumn	Desc
single	`1`	单选选择器
area	`3`	区域选择器
section	`2`	区间选择器
date	`3`	日期选择器
time	`2`	时间选择器
linkage	`2`	联动选择器 (自定义列数联动选择器)

dataset 规则

dataset默认的数据结构规则为:

{ title: '...', value: '', children: [{title: '...', value: ''}, ...]
}

如果需要指定联动的下一级，将数据放到children属性中。

如果结构中没有value时，默认返回的value为title。

type 为 section时：

dataset的数据结构应为：

[[{title: '...', value: ''}, ...],           // 第一列[{title: '...', value: ''}, ...]            // 第二列
]

type 为 date，time时，dataset无效。

type为 area时，可以使用默认的区域数据，或者遵循dataset的数据结构自定义数据。

type为 area时, 如要使用默认区域数据，需要不指定dataset，或者dataset 为[], 或者null。

Single (单选)

<template><div class="wrapper"><text @click="openPicker">打开picker</text><x-picker :type="pickerType":show="showPicker":dataset="list":defaultTitle="defaultTitle"@overlayClick="pickerOverlayClick"@onchange="change" /></div>
</template><script>import { XPicker } from 'weex-x-picker';export default {components: { XPicker },data: () => ({pickerType: 'single',showPicker: false,list: [{ title: '金星' },{ title: '木星' },{ title: '水星' },{ title: '火星' },{ title: '地球' },{ title: '天王星' },{ title: '海王星' },{ title: '冥王星' },{ title: '哈雷彗星' },],defaultTitle : '地球'}),methods: {openPicker () {this.showPicker = true;},pickerOverlayClick (e) {this.showPicker = false;},change (e) {console.log(e)}}}</script><style scoped>.wrapper {padding-top: 100px;}</style>

Area (区域)

<template><div class="wrapper"><text @click="openPicker">打开picker</text><x-picker type="area":show="showPicker":defaultTitle="defaultTitle"@overlayClick="pickerOverlayClick"@onchange="change" /></div>
</template><script>import { XPicker } from 'weex-x-picker';export default {components: { XPicker },data: () => ({showPicker: false,defaultTitle : '北京 北京 东城区'}),methods: {openPicker () {this.showPicker = true;},pickerOverlayClick (e) {this.showPicker = false;},change (e) {console.log(e)}}}</script><style scoped>.wrapper {padding-top: 100px;}</style>

Date (日期)

<template><div class="wrapper"><text @click="openPicker">打开picker</text><x-picker type="date":show="showPicker":defaultTitle="defaultTitle"@overlayClick="pickerOverlayClick"@onchange="change" /></div>
</template><script>import { XPicker } from 'weex-x-picker';export default {components: { XPicker },data: () => ({showPicker: false,defaultTitle : '2014 11 02'}),methods: {openPicker () {this.showPicker = true;},pickerOverlayClick (e) {this.showPicker = false;},change (e) {console.log(e)}}}</script><style scoped>.wrapper {padding-top: 100px;}</style>

Time (时间)

<template><div class="wrapper"><text @click="openPicker">打开picker</text><x-picker type="time":show="showPicker":defaultTitle="defaultTitle"@overlayClick="pickerOverlayClick"@onchange="change" /></div>
</template><script>import { XPicker } from 'weex-x-picker';export default {components: { XPicker },data: () => ({showPicker: false,defaultTitle : '23 59'}),methods: {openPicker () {this.showPicker = true;},pickerOverlayClick (e) {this.showPicker = false;},change (e) {console.log(e)}}}</script><style scoped>.wrapper {padding-top: 100px;}</style>

section (区间)

<template><div class="wrapper"><text @click="openPicker">打开picker</text><x-picker type="section":show="showPicker":dataset="list":defaultTitle="defaultTitle"@overlayClick="pickerOverlayClick"@onchange="change" /></div>
</template><script>import { XPicker } from 'weex-x-picker';export default {components: { XPicker },data: () => ({pickerType: 'single',showPicker: false,list: [[{ title: '金星' },{ title: '木星' },{ title: '水星' },{ title: '火星' },{ title: '地球' },{ title: '天王星' },{ title: '海王星' },{ title: '冥王星' },{ title: '哈雷彗星' },],[{ title: '金星' },{ title: '木星' },{ title: '水星' },{ title: '火星' },{ title: '地球' },{ title: '天王星' },{ title: '海王星' },{ title: '冥王星' },{ title: '哈雷彗星' },]  ],defaultTitle : '水星 地球'}),methods: {openPicker () {this.showPicker = true;},pickerOverlayClick (e) {this.showPicker = false;},change (e) {console.log(e)}}}</script><style scoped>.wrapper {padding-top: 100px;}</style>

weex 选择器 weex picker weex-x-picker相关推荐

Weex快速上手教程(Weex Tutorial)
我们将使用Weex编写一个简单的列表 , 类似的列表经常能在电商类移动应用中见到. 开始我们先编写一个列表项. 请创建一个名为 tech_list.we 的文件( .we 是Weex推荐的后缀名 ) ...
weex android 简书,weex打包Android和IOS
1.安装weex npm i -g weex-toolkit weex -v // 查看当前weex工具版本安装结束后你可以直接使用 weex help 命令验证是否安装成功,它会显示 weex 支 ...
weex android 简书,Weex
Weex 是使用流行的 Web 开发体验来开发高性能原生应用的框架.Weex 的目标就是使用开发者基于一份代码,编写出可以运行在 iOS,Android 和 Web 上的应用,并最大化地提高开发效率和 ...
weex android 简书,Weex Extend
扩展 Weex 提供了扩展机制,可以根据自己的业务进行定制自己的功能. 主要分为两类扩展: Module 扩展非 UI 的特定功能.例如 sendHttp.openURL 等. Component ...
weex 一个传说级巨坑-- 2018最新版weex踩坑指南(weex navigator 多界面跳转)
先说结论,本人极度非常不推荐weex作为任何商用开发有很多人会说了... 你瞎扯.. 你看别人阿里.. 啊飞猪... 啊那个支付宝... 人家不是用得好好的么... 当然这也是我们公司作为技术选型 ...
weex 在android模拟器,weex 启动 ios 模拟器
前提需要的安装 node npm weex-toolkit cocoaPods 1. 创建weex工程 weex create helloWolrd 2. 进入helloWolrd文件夹安装依赖,我用 ...
weex android app例子,weex中修改android app图标和欢迎页
修改欢迎页背景 1.图片放到platforms/android/app/src/main/res/drawable-xxxx下面,图片必须是png格式,否则会报错:然后修改platforms/andr ...
Weex和Web开发体验的异同
点击打开链接 Weex和Web开发体验的异同场景研读 2017-01-20 10:25:02 浏览976 评论0 内存管理 web开发 Weex WeexConf 研发模式摘要: 在2017 ...
Weex从入门到放弃
Weex开发文档概述概述 WEEX的出现让我们可以使用Vue来进行移动端原生应用开发,是前端小伙伴们必备技能. Android也可以学习,增加我们的技术栈. 与 Web App.Html5 App ...

weex 选择器 weex picker weex-x-picker