I’ve been using mobileSelect quite a bit lately, so I’ve put it here for my own convenience.

mobileSelect.js

A multi-functional mobile scrolling selector, support single to multiple, support multi-level cascade, provide custom callback function, provide update function secondary rendering, relocation function, compatible with PC side drag and so on..

The English documents 】

features

• Native JS mobile selection controls do not rely on any libraries
• You can pass in an ordinary array or a JSON array
• The number of columns can be automatically rendered according to the length of the parameters passed in, supporting single to multiple selection
• Automatically identify whether to cascade
• After a successful selection, provide a custom callback function callback() to return the current selected index position and selected data (array/JSON).
• At the end of each gesture slide, it also provides a callback function transitionEnd() that returns the current selected index position and the selected data (array/JSON)
• After the controller has been instantiated, update functions can be provided to render again, which can be used to asynchronously obtain data or click interaction to change the selected data scene
• Provides relocation functions
• Can echo (when entering the page for the second time, can display the historically selected location)

demo

Mobile phone scan QR code preview:

Dynamic graph preview:

The introduction of

Mode 1 Label introduction:

<link rel="stylesheet" type="text/css" href="css/mobileSelect.css">
<script src="js/mobileSelect.js" type="text/javascript"></script>
Copy the code

Mode 2 NPM:

npm install mobile-select -D
Copy the code

Import from your js file:

import MobileSelect from 'mobile-select'
Copy the code

Quick to use

Common array format – non linkage

<div id="trigger1"></div> <! -- Don't miss this trigger in the page -->

<script type="text/javascript">
var mobileSelect1 = new MobileSelect({
    trigger: '#trigger1'.title: 'Single choice'.wheels: [{data: ['Sunday'.'Monday'.'on Tuesday'.'on Wednesday'.'on Thursday.'on Friday'.'on Saturday]}],position: [2] // Initialize the location
});
</script>
Copy the code

The value is in JSON format

<div id="trigger2"></div>

<script type="text/javascript">
var mobileSelect2 = new MobileSelect({
    trigger: '#trigger2'.title: 'Regional selection'.wheels: [{data:[
                    {id:'1'.value:'near'},
                    {id:'2'.value:'Uptown'},
                    {id:'3'.value:'Downtown'},
                    {id:'4'.value:'Jianggan District'},
                    {id:'5'.value:'Gongshu District'},
                    {id:'6'.value:'West Lake District'}]}, {data:[
                    {id:'1'.value:'1000 meters'},
                    {id:'2'.value:'2000 meters'},
                    {id:'3'.value:'3000 meters'},
                    {id:'4'.value:'5000 meters'},
                    {id:'5'.value:'10000 meters'}}]].callback:function(indexArr, data){
        console.log(data); // Returns the selected JSON data}});</script>
Copy the code

Effect:

The value is in JSON format

<div id="trigger3"></div>

<script type="text/javascript">
  var mobileSelect3 = new MobileSelect({
      trigger: '#trigger3'.title: 'Region Selection - Linkage'.wheels: [{data:[
                      {
                          id:'1'.value:'near'.childs:[
                              {id:'1'.value:'1000 meters'},
                              {id:'2'.value:'2000 meters'},
                              {id:'3'.value:'3000 meters'},
                              {id:'4'.value:'5000 meters'},
                              {id:'5'.value:'10000 meters'}]}, {id:'2'.value:'Uptown'},
                      {id:'3'.value:'Downtown'},
                      {id:'4'.value:'Jianggan District'},
                      {id:'5'.value:'Gongshu District'},
                      {id:'6'.value:'West Lake District'}}]].position: [0.1].callback:function(indexArr, data){
          console.log(data); // Returns the selected JSON data}});</script>
Copy the code

Effect:

④ How to use it in VUe-CLI

npm install mobile-select -D
Copy the code

<template>
    <div>
        <div id="trigger4">Individual choice</div>
    </div>
</template>

<script>
    import MobileSelect from 'mobile-select'

    export default {
        mounted() {
            var mobileSelect4 = new MobileSelect({
                trigger: "#trigger4".title: "Single choice".wheels: [{data: ["Sunday"."On Monday"."Tuesday"."On Wednesday"."Thursday"."Friday"."Saturday"]}],callback:function(indexArr, data){
                    console.log(data); }}); }}</script>
Copy the code

⑤ Data field name mapping

<div id="trigger5"></div>

<script type="text/javascript">
    // If the fields in your data are id,title,children
    // Does not match the id,value,childs field names of mobileSelect
    // Field names can be mapped using the keyMap attribute
    var mobileSelect5 = new MobileSelect({
        trigger: '#trigger5'.title: 'Data Field Name Mapping'.wheels: [{data:[
                        {
                            id:'1'.title:'A'.children:[
                                {id:'A1'.title:'A-a'},
                                {id:'A2'.title:'A-b'},
                                {id:'A3'.title:'A-c'}]}, {id:'1'.title:'B'.children:[
                                {id:'B1'.title:'B-a'},
                                {id:'B2'.title:'B-b'},
                                {id:'B3'.title:'B-c'}]},]}],keyMap: {
            id:'id'.value: 'title'.childs :'children'
        },
        callback:function(indexArr, data){
            console.log(data); }});</script>
Copy the code

parameter

Note: The parameters returned in the callback function have the following meanings

• IndexArr is the currently selected index array. [0,0,1] indicates that there are three wheels. The selected data is the 0th data of the first wheel, the 0th data of the second wheel, and the first data of the third wheel
• Data is the currently selected json data such as [{value: id: ‘1’, ‘hello,’}, {value: id: ‘2’, ‘world’}]

Functions:

Note: The meanings of parameters to be passed in function functions are as follows

• SliderIndex represents the index of the wheel to be modified
• PosIndex stands for location index

① Functional function demo:

<div id="day"></div>var mySelect = new MobileSelect({ trigger: '#day', wheels: [{data: [' Sunday ', 'on Monday, Tuesday, Wednesday, Thursday, Friday, Saturday']}, {data: [' 08:00 ', '09:00', '10:00', '11', '12:00', '13:00,' then ']}]. Position :[1,1] // Initialize the position of both wheels selected in index 1 option}); / / -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - / / on the basis of instantiation, for instance functions/operation/mySelect setTitle (' la la la (๑ • ̀ ㅁ • ́ ฅ) '); // mySelf. updateWheel(0,[' Sunday ','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday']); Myselect.locateposition (1,0); myselect.locateposition (1,0); // Reposition the position of the first wheel, change the 0th data of the first wheel to the current selected. // (the first wheel refers to the right wheel and the left wheel is the 0th wheel)Copy the code

Base instance → function function after operation

② Ajax asynchronously fills data demo

<! -- ************ non-cascading format ************ -->

<div id="trigger6"></div>

<script type="text/javascript">
    var mobileSelect6 = new MobileSelect({
        trigger: '#trigger6'.title: 'Ajax fill data - Non-cascading'.wheels: [{data:[
                        {id:'1'.value:'Please select region']}, {},data:[
                        {id:'1'.value:'Please select distance'}},]].callback:function(indexArr, data){
            console.log(data); }}); $.ajax({type: "POST".url: "xxxx".data: {},
        dataType: "json".success: function(res){
            // Res.data. area = res.data.area
            / / /
            //     {id:'1',value:'附近'},
            // {id:'2',value:' 2'},
            // {id:'3',value:' 3'},
            // {id:'4',value:' 5 '}
            // ]

            // We assume that res.data.distance is obtained:
            / / /
            / / {value: id: '1', '200 meters'},
            / / {value: id: '2', '300 meters'},
            / / {value: id: '3', '400 meters'}
            // ]

            mobileSelect6.updateWheel(0, res.data.area); // Change wheel 0
            mobileSelect6.updateWheel(1, res.data.distance); // Change the first wheel}});</script>
</script>




<! -- ************ cascade format ************ -->

<div id="trigger7"></div>

<script type="text/javascript">
    var mobileSelect7 = new MobileSelect({
        trigger: '#trigger7'.title: 'Ajax Fill data - Cascade'.wheels: [{data:[
                        {
                            id:'1'.value:' '.childs:[
                                {id:'A1'.value:' '},]}]},callback:function(indexArr, data){
            console.log(data); }}); $.ajax({type: "POST".url: "xxxx".data: {},
        dataType: "json".success: function(res){
            // We assume that res.data is:
            / / [{
            // id:'1',
            // value:' Updated data ',
            // childs:[
            // {id:'A1',value:'apple'},
            // {id:'A2',value:'banana'},
            // {id:'A3',value:'orange'}
            / /]
            // }]mobileSelect7.updateWheels(res.data); }});</script>
Copy the code

How do I echo the selected location

The callback function has an indexArr argument, which is an array that records the current selected location: after converting the array to a string, it can be stored in a hidden field or some other way and passed to the background. The next time the page is opened and MobileSelect instantiates, it reads the string, converts it into an array, and passes it to Position to complete the initialization.

The demo of the project:

The transitionEnd(), callback(), updateWheel(), and locatePosition() functions are used to perform the following functions:

• The date of the day must not exceed the hour after today.
• After selecting the pickup time, the pickup time shall not exceed the pickup time (including date and time).

Update log

The 2017-04-20 [update]

Instead of using the input tag, you can write the selected value into the innerHTML of a div, which is triggered by a normal div, because of the cursor on the iPhone and the fixed layout triggered by the input will drop when opened in chrome Callback (indexArr, data) is recommended to retrieve the selected value

The 2017-07-27 [fixed]

Fix [li362692680] in Issues, the problem that the secondary selection box cannot be initially positioned in the cascade selection, and fix the problem that the length of position array parameter passed in init function is less than the number of wheels and cannot be moved

2017-07-30[Revision + Update]

Fix issues (leohgbs) 1. Update does not consider the data is JSON 2. After the update, the cached data is not updated, JsonData → cascadeJsonData → reRenderWheels() updateWheel() UpdateWheels (Data) is used to update the entire data source in a cascading data format

The 2017-08-15 [update]

Fixed bug fixes in ios new API show() new API getValue() New option style options (modify the connecter/button text/button color/background color, etc.) : Connector ensureBtnText ensureBtnColor cancelBtnText cancelBtnColor titleColor titleBgColor bgColor textColor Supports the following colors #ff0000 rgba(0,255,255,0.5) orange etc

The 2017-09-07 [update]

Add data field mapping capability update README

The 2017-10-17 [update]

Add the cancel callback function

The 2017-12-12 [update]

Add onshow callback add onhide callback add show() add hide()

The 2018-01-28 [optimization]

In order to fix the problem of transitionEnd being triggered twice during a click event, remove the addListenerLi() and singleClick() internal methods and make a click judgment directly on the Touchend event.

The 2018-01-29 [update]

Increased maskOpacity Settings mask transparency

license

MIT LICENSE

Copyright (c) 2017-present, LIHONG OU(onlyhom)