mui js picker选择器使用方法

最新推荐文章于 2026-03-24 12:54:38 发布

原创最新推荐文章于 2026-03-24 12:54:38 发布 · 1.7w 阅读

5 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#mui #js #picker选择器

收录于

App-h5-mui.js 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了一个简单的移动端Picker组件使用方法，包括如何初始化组件、获取和设置数据，以及通过监听事件来实现交互。提供了完整的代码示例，适用于需要实现多级联动选择器的应用场景。

简单的picker使用方法

var newPicker = new mui.PopPicker({
       layer: num  //num为选择器的层级数						
});
//获取数据 这里的data是一个多维(层)json
newData = getPickData(Data);
//设置数据到picker上 
newPicker.setData(newData);
var inpPick = document.getElementById('这里填写触发picker的html的id');
//单击inpick					
inpPick.addEventListener('tap', function(event) {			
  newPicker.show(function(items) {
    //这里具体赋值到哪里看你个人需要
    console.log(JSON.stringify(items))
  })
})

function getPickData(data) {
	var retData = new Array();
	var retDatas = new Array();
	for(var i = 0; i < data.length; i++) {
		if(data[i].ChildrenClass.length != 0) {
			retDatas = getPickData(data[i].ChildrenClass);
//这里的data[i].ChildrenClass 看你数据的具体形式填写替换，下面的InterID，InterName 也是
		}
		retData[i] = {
			value: data[i].InterID,
			text: data[i].InterName,
			children: retDatas
		}
	}
	return retData;
}