weex-22-picker模块

本节学习目标

  • picker 组件能制作什么效果
  • 三种picker组件API的用法
  • picker的限制

我们就围绕上面的三点认识这个组件

0705E0AA-369A-458F-B24F-73FB2CE6B502.png


picker 组件能制作什么效果

先看几个效果图

1.单项选择

9D7EA7B8-7DAD-43E5-9B44-E527FBD7641E.png

2.时间选择

FFEF1F28-5E98-4B11-8C93-43A58E3BB1A3.png

3.日期选择

231037AE-9644-4B8D-83F0-4355B2C7435D.png

目前这个组件只能实现以上三种效果,下面我们看看三种效果怎么实现

三种picker组件API的用法

  • 第一步 通用 导入picker组件
const picker = weex.requireModule('picker')
  • 第二步 调用以上样式的对应的API 单选
        picker.pick({
            index:this.cityIndex, // 选择值的索引
            items:this.cities  // 选项数组
        },res=>{
            if(res.result=="success"){
                this.cityIndex = res.data
            }else if(res.result=="cancel"){
                      // 当用户单击取消按钮
            }else if (res.result=='error'){
            // 当选择出错时   
                       }
        })

下面是原型

pick(options, callback[options]) 参数

options {Object} index:默认选中的选项 items {array} 数据源数组

callback {function (ret)}执行完读取操作后的回调函数,ret {Object} 函数的参数,有两个属性: result {string}结果三种类型 success, cancel, error data {number}:选择的选项,仅成功确认时候存在。

时间选择

picker.pickTime({
                value:this.time
            },res=>{
                if(res.result=="success"){
                    this.time = res.data
                }else if(res.result=="cancel"){

                }else if (res.result=='error'){

                }
            })

解释

value 默认选中的值 格式必须是HH:mm(如12:03) res是用户单击确定或者取消按钮后的回调函数的参数 res.data 只有当用户单击确定按钮后,这个值才不为空,处理时要进行逻辑判断 res.result 的值有success,cancel,error 三种,当用户单击取消按钮这个值为cancel,当用户选择确定按钮,这个值为success,如果选择过程中发生错误,则为error

日期选择

picker.pickDate({
                value:this.date,
                min:'2015-01-01',
                max:'2017-12-22'
            },res=>{
                if(res.result=="success"){
                    this.date = res.data
                }else if(res.result=="cancel"){
                }else if (res.result=='error'){
                }
    })

解释

1.value 设置默认选择的值格式为yyyy-MM-dd (如:2017-07-07) 2.min 能选择的最小的值,max 能选择的最大的值 3.res.data 选择后回调函数的参数的值,例如(2015-02-12) 4.其他参数上面已经讲解过了,这里就不赘述了

picker的限制

picker 目前不支持H5,对于这种情况,我们可以自定义组件

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏守望轩

Visual Studio 2008 每日提示(八)

#071、给所有快速查询的结果标记上书签 原文链接:Did you know… You can bookmark all of your Quick Find...

2795
来自专栏macOS 开发学习

Mac开发之NSCollectionView使用以及自定义item

与iOS中的UICollectionView相似,在Mac开发中,我们也会常常用到NSCollectionView来展示内容,但在使用中,与iOS有较大差别,尤...

1542
来自专栏全沾开发(huā)

如何从0开发一个Atom组件

如何从0开发一个Atom组件 最近用Atom写博客比较多,然后发现一个很严重的问题。。 没有一个我想要的上传图片的方式,比如某乎上边...

3615
来自专栏游戏杂谈

自定义Flex Library的使用

一般为了达到资源或是组件的共用,会用到flex library。在flex library可以添加swf、图片资源或的引用。

872
来自专栏程序员互动联盟

【专业技术】Linux下如何提高效率

之前写了一篇关于linux下常用的几个命令,参考Linux入门--提高工作效率的命令 一、bash shell中的快捷键 光标移动命令 Ctrl + a - 跳...

3587
来自专栏地方网络工作室的专栏

Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(十四)在项目中使用 jQuery

Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(十四)在项目中使用 jQuery 前情回顾 在上一篇博文中,我们讲到了,...

2017
来自专栏网络

玩转 React 服务器端渲染

【编者按】React 生态提供了很多选择方案,这里我们选用 Redux 和 react-router 来做说 React 提供了两个方法renderToStri...

2498
来自专栏磨磨谈

Luminous监控界面中文语言包

之前有各种ceph的管理平台,在部署方面大部分都比较麻烦,现在在luminous版本当中有一个原生的dashboard,虽然目前这个只能看,但是从界面上面,从接...

1542
来自专栏河湾欢儿的专栏

js基础_2(页面加载和延迟脚本)

2082
来自专栏Hongten

python开发_IDEL(Python GUI)的使用方法

在这篇blog"Python开发_python的安装"里面你会了解到python的安装。

1102

扫码关注云+社区

领取腾讯云代金券