H5UICustomPicker

功能描述

  1. 该模块集成了UICustomPicker模块。
  2. 主要实现点击选择底部弹出一个时间选择的效果,同时封装类型文字底部弹出滑动选择效果。

依赖的模块

  1. 使用UICustomPicker模块

快速使用

比如说你的数据是此种格式:

  1. var listdata = [{
  2. id: 12333,
  3. name: "男"
  4. }, {
  5. id: 12333,
  6. name: "女"
  7. }];

此处就需要用js转换一下数据,转成[name,name,name]格式,模块效果才能显示;

然后通过:api.openFrame打开

  1. api.openFrame({ // 打开性别选择器Frame页面
  2. name: 'text',
  3. url: './slidedateselect_text.html',
  4. rect: {
  5. marginLeft: 0,
  6. marginTop: 20,
  7. marginBottom: 0,
  8. marginRight: 0
  9. },
  10. bgColor: 'rgba(0,0,0,0)',
  11. animation: { // 设置底部弹出的窗口动画
  12. type: 'movein',
  13. subType: 'from_bottom',
  14. duration: 500
  15. },
  16. pageParam: { // 设置回调方法参数
  17. cb_win: api.winName,
  18. cb_frm: api.frameName,
  19. cb_fun: 'fnExecteScriptByRemote',
  20. CatName: vm.SexListName,//显示需要数组
  21. title: vm.SexTitle//已经选中的文本显示
  22. }
  23. });

具体使用请自行下载源码,都有注释;

特别说明

  1. 本模块使用了vue.js,并且本模块依赖于apicloud运行环境。