H5UICustomPicker

功能描述

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

依赖的模块

使用UICustomPicker模块

效果图

Image text Image text

快速使用

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

var listdata = [{
  id: 12333,
  name: "男"
}, {
  id: 12333,
  name: "女"
}];

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

然后通过:api.openFrame打开

api.openFrame({ // 打开性别选择器Frame页面
  name: 'text',
  url: './slidedateselect_text.html',
  rect: {
    marginLeft: 0,
    marginTop: 20,
    marginBottom: 0,
    marginRight: 0
  },
  bgColor: 'rgba(0,0,0,0)',
  animation: { // 设置底部弹出的窗口动画
    type: 'movein',
    subType: 'from_bottom',
    duration: 500
  },
  pageParam: { // 设置回调方法参数
    cb_win: api.winName,
    cb_frm: api.frameName,
    cb_fun: 'fnExecteScriptByRemote',
    CatName: vm.SexListName,//显示需要数组
    title: vm.SexTitle//已经选中的文本显示
  }
});

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

特别说明

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