# scrollSelect

**Repository Path**: mecarol/scrollSelect

## Basic Information

- **Project Name**: scrollSelect
- **Description**: js滑动下拉列表插件，滑动选择器
- **Primary Language**: JavaScript
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-05-09
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# scrollSelect

#### 介绍
js滑动下拉列表插件，滑动选择器
支持多级联动


#### 安装教程


```
<script src="./scrollSelect.js"></script>
```

#### 使用说明

```
let scroll = scrollSelect({
    callback : function(){},//回调函数
    data : [
        {
            value : 'value',//值 必须
            text : 'text',//文本 可选
            children : [],//下级数据 可选
        },
    ],//数据源
    active : [],//默认选中
});
scroll.show();//弹出
scroll.hide();//隐藏
```


1.  常规

```
let scroll = scrollSelect({
    callback : function(v) {
        console.log(v)
    },
    data : [
        {value:'1111'},
        {value:'2222'},
        {value:'3333'},
        {value:'4444'},
        {value:'5555'},
        {value:'6666'},
        {value:'7777'},
        {value:'8888'},
        {value:'9999'},
    ]
});
document.getElementById('show').addEventListener('click',function(){
    scroll.show();
});
```

2.  使用默认选中

```
let scroll = scrollSelect({
    callback : function(v) {
        console.log(v)
    },
    active : ['5555'],
    data : [
        {value:'1111'},
        {value:'2222'},
        {value:'3333'},
        {value:'4444'},
        {value:'5555'},
        {value:'6666'},
        {value:'7777'},
        {value:'8888'},
        {value:'9999'},
    ]
});
document.getElementById('show').addEventListener('click',function(){
    scroll.show();
});
```

3.  使用显示文本

```
let scroll = scrollSelect({
    callback : function(v) {
        console.log(v)
    },
    data : [
        {value:'1',text:'one'},
        {value:'2',text:'two'},
        {value:'3',text:'three'},
        {value:'4',text:'four'},
        {value:'5',text:'five'},
        {value:'6',text:'six'},
        {value:'7',text:'seven'},
        {value:'8',text:'eight'},
        {value:'9',text:'nine'},
    ]
});
document.getElementById('show').addEventListener('click',function(){
    scroll.show();
});
```

4.  多级联动

```
let scroll = scrollSelect({
    callback : function(v) {
        console.log(v)
    },
    data : [
        {
            value:'鞋',
            children : [
                {value:'皮鞋',},
                {value:'休闲鞋',},
                {value:'童鞋',},
                {value:'棉鞋',},
                {value:'凉鞋',},
                {value:'高跟鞋',},
            ],
        },
        {
            value:'衣服',
            children : [
                {value:'毛衣',},
                {value:'皮衣',},
                {value:'风衣',},
                {value:'衬衫',},
                {value:'短袖',},
                {value:'棉袄',},
            ],
        },
        {
            value:'裤子',
            children : [
                {value:'七分裤',},
                {value:'九分裤',},
                {value:'休闲裤',},
                {value:'短裤',},
                {value:'皮裤',},
                {value:'喇叭裤',},
            ],
        },
        {
            value:'饰品',
            children : [
                {value:'手镯',},
                {value:'头巾',},
                {value:'吊坠',},
                {value:'耳钉',},
                {value:'戒指',},
                {value:'项链',},
            ],
        },
    ]
});
document.getElementById('show').addEventListener('click',function(){
    scroll.show();
});
```