该插件集成了UICustomPicker插件。
主要实现点击选择底部弹出一个时间选择的效果,同时封装类型文字底部弹出滑动选择效果。
使用UICustomPicker插件
比如说你的数据是此种格式:
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运行环境。