simple-picker-m v1.0.12

SimplePicker

移动端滑动选取组件；

示例一

可以扫描二维码体验：

或者访问以下链接：

https://newbieyoung.github.io/Simple-Picker/examples/demo0.html

相关样式及示例代码如下：

<link rel="stylesheet" href="../template0.css"/>

var dataset = [];
//加入月份
dataset.push([]);
for(var i=1;i<=12;i++){
    dataset[0].push({
        title:i+'月',
        value:i
    })
}
//加入日期
dataset.push([]);
for(var i=1;i<=31;i++){
    dataset[1].push({
        title:i+'日',
        value:i
    })
}

var $picker = new SimplePicker({
    itemHeight: 36,
    data: dataset,
    default :[1, 2],
    itemStyle:[[{
        'property':'padding-right',
        'value':'33px'
    },{
        'property':'text-align',
        'value':'right'
    }],[{
        'property':'padding-left',
        'value':'33px'
    },{
        'property':'text-align',
        'value':'left'
    }]],
    onChangeEnd: function(res){
        console.log(res);
    },
    onConfirm : function (res) {
        console.log(res);
    }
})

$picker.show();

相关参数及函数说明如下：

示例二

可以扫描二维码体验：

或者访问以下链接：

https://newbieyoung.github.io/Simple-Picker/examples/demo1.html

相关样式及示例代码如下：

<link rel="stylesheet" href="./template0.css"/>

var dataset = [];
//加入日期
dataset.push([{
    title:'4月7日 周日',
    value:'040707'
},{
    title:'4月8日 周一',
    value:'040801'
},{
    title:'4月9日 周二',
    value:'040902'
},{
    title:'今天',
    value:'041003'
},{
    title:'4月11日 周四',
    value:'041104'
},{
    title:'4月12日 周五',
    value:'041205'
},{
    title:'4月13日 周六',
    value:'041306'
}]);

var $picker = new SimplePicker({
    itemHeight: 36,
    data: dataset,
    default :['041003'],
    headVisible:false,
    maskVisible:false,
    listHeight:300,
    topGapHeight:100,
    bottomGapHeight:100,
    onChangeEnd: function(res){
        console.log(res);
    },
    onConfirm : function (res) {
        console.log(res);
    }
})

$picker.show();

相关参数及函数说明如下：