picker-extend 移動端級聯選擇外掛

流氓流年流浪發表於2018-11-21

picker-extend.js

一款多功能的移動端滾動選擇器，支援單選到多選、支援多級級聯、提供自定義回撥函式、提供update函式二次渲染、重定位函式、相容pc端拖拽等等..

特性

  • 原生js移動端選擇控制元件，不依賴任何庫
  • 可傳入普通陣列或者json陣列
  • 可根據傳入的引數長度，自動渲染出對應的列數，支援單項到多項選擇
  • 自動識別是否級聯
  • 選擇成功後，提供自定義回撥函式callback() 返回當前選擇索引位置、以及選擇的資料（陣列/json）
  • 每次手勢滑動結束後，也提供一個回撥函式transitionEnd() 返回當前選擇索引位置、以及選擇的資料（陣列/json）
  • 能夠在已經例項化控制元件後，提供update函式再次渲染，可用於非同步獲取資料或點選互動後需要改變所選資料的場景
  • 提供重定位函式
  • 可以回顯（第二次進入頁面時，可以顯示歷史選擇的位置）
  • 支援級聯內容的擴充套件 比如 對於三級聯動類目增加推薦欄位 對三級聯動地區 -
  • 增加推薦字樣（特殊化展示）

簡書

picker-extend 移動端級聯選擇外掛（簡書）

掘金

picker-extend 移動端級聯選擇外掛（掘金）

npm 地址

picker-extend 移動端級聯選擇外掛 （npm）

引入

方式一 標籤引入：

<link rel="stylesheet" type="text/css" href="css/picker-extend.css">
<script src="js/picker-extend.js" type="text/javascript"></script>
複製程式碼

方式二 npm：

npm install picker-extend -D
複製程式碼

在你的js檔案中import：

import PickerExtend from 'picker-extend'
複製程式碼

快速使用

①普通陣列格式-非聯動

<div id="trigger1"></div> <!--頁面中別漏了這個trigger-->

<script type="text/javascript">
var pickerExtend1 = new PickerExtend({
    trigger: '#trigger1',
    title: '單項選擇',
    wheels: [
                {data:['週日','週一','週二','週三','週四','週五','週六']}
            ],
    position:[2] //初始化定位
});
</script>
複製程式碼

②json格式-非聯動

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

<script type="text/javascript">
var pickerExtend2 = new PickerExtend({
    trigger: '#trigger2',
    title: '地區選擇',
    wheels: [
                {data:[
                    {id:'1',value:'附近'},
                    {id:'2',value:'上城區'},
                    {id:'3',value:'下城區'},
                    {id:'4',value:'江乾區'},
                    {id:'5',value:'拱墅區'},
                    {id:'6',value:'西湖區'}
                ]},
                {data:[
                    {id:'1',value:'1000米'},
                    {id:'2',value:'2000米'},
                    {id:'3',value:'3000米'},
                    {id:'4',value:'5000米'},
                    {id:'5',value:'10000米'}
                ]}
            ],
    callback:function(indexArr, data){
        console.log(data); //返回選中的json資料
    }
});
</script>
複製程式碼
效果圖：

[圖片上傳失敗...(image-6fbf94-1536046640642)]

③json格式-聯動

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

<script type="text/javascript">
  var pickerExtend3 = new PickerExtend({
      trigger: '#trigger3',
      title: '地區選擇-聯動',
      wheels: [
                  {data:[
                      {
                          id:'1',
                          value:'附近',
                          childs:[
                              {id:'1',value:'1000米'},
                              {id:'2',value:'2000米'},
                              {id:'3',value:'3000米'},
                              {id:'4',value:'5000米'},
                              {id:'5',value:'10000米'}
                          ]
                      },
                      {id:'2',value:'上城區'},
                      {id:'3',value:'下城區'},
                      {id:'4',value:'江乾區'},
                      {id:'5',value:'拱墅區'},
                      {id:'6',value:'西湖區'}
                  ]}
              ],
      position:[0,1],
      callback:function(indexArr, data){
          console.log(data); //返回選中的json資料
      }
  });
  </script>
複製程式碼
效果圖：

Image text

④在vue-cli中如何使用

npm install picker-extend -D
複製程式碼
<template>
    <div>
        <div id="trigger4">單項選擇</div>
    </div>
</template>

<script>
    import PickerExtend from 'picker-extend'

    export default {
        mounted() {
            var mobileSelect4 = new PickerExtend({
                trigger: "#trigger4",
                title: "單項選擇",
                wheels: [
                    {data: ["週日","週一","週二","週三","週四","週五","週六"]}
                ],
                callback:function(indexArr, data){
                    console.log(data);
                }
            });
        }
    }
</script>
複製程式碼

⑤資料欄位名對映

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

<script type="text/javascript">
    //假如你的資料的欄位名為id,title,children
    //與mobileSelect的id,value,childs欄位名不匹配
    //可以用keyMap屬性進行欄位名對映
    var mobileSelect5 = new PickerExtend({
        trigger: '#trigger5',
        title: '資料欄位名對映',
        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>
複製程式碼

引數

選項 預設值 型別 描述
trigger 必填引數 無預設值 String 觸發物件的id/class/tag
wheels 必填引數 無預設值 Array 資料來源,需要顯示的資料
flexibleHeight 選填引數 String 渲染完之後每個資料的所在li標籤的高度 預設值為40 使用者可自定義傳入數字 改變高度
callback function(indexArr, data){} function 選擇成功後觸發的回撥函式，返回indexArr、data
transitionEnd function(indexArr, data){} function 每一次手勢滑動結束後觸發的回撥函式,返回indexArr、data
cancel function(indexArr, data){} function 返回的是indexArr和data是上一次點選確認按鈕時的值
onShow function(e){} function 顯示控制元件後觸發的回撥函式, 返回引數為物件本身
onHide function(e){} function 隱藏控制元件後觸發的回撥函式, 返回引數為物件本身
title '' String 控制元件標題
position [0,0,0,…] Array 初始化定位
connector ' ' String 多個輪子時，多個值中間的連線符，預設是空格
ensureBtnText '確認' String 確認按鈕的文字內容
cancelBtnText '取消' String 取消按鈕的文字內容
ensureBtnColor '#1e83d3' String 確認按鈕的文字顏色
cancelBtnColor '#666666' String 取消按鈕的文字顏色
titleColor '#000000' String 控制元件標題的文字顏色
titleBgColor '#ffffff' String 控制元件標題的背景顏色
textColor '#000000' String 輪子內文字的顏色
bgColor '#ffffff' String 輪子背景顏色
maskOpacity 0.7 Number 遮罩透明度
keyMap {id:'id', value:'value', childs:'childs','recommend':'recommend'} Object 欄位名對映，適用於欄位名不匹配id,value,childs的資料格式,recommend欄位為true時 代表當前item 為推薦內容 展示推薦欄位
triggerDisplayData true Boolean 在點選確認時，trigger的innerHtml是否變為選擇的資料。
（如果trigger裡面還有其他元素，則可以設定為false；如果需要在別的地方顯示資料，則可用callback返回的資料自行拼接）

注：回撥函式中返回的引數含義如下

  • indexArr是當前選中的索引陣列 如[0,0,1] 代表有三個輪子 選中的資料是第一個輪子的第0個資料、第二個輪子的第0個資料、第三個輪子的第1個資料
  • data是當前選中的json資料 如[{id:'1',value:'hello'},{id:'2',value:'world'}]

功能函式：

函式名 引數 描述
show() 無參 手動顯示彈窗元件
hide() 無參 手動隱藏彈窗元件
setTitle() string 設定控制元件的標題
locatePosition() sliderIndex, posIndex 傳入位置陣列，重新定位輪子選中的位置
updateWheel() sliderIndex, data 重新渲染指定的輪子
updateWheels() data 重新渲染所有輪子(僅限級聯資料格式使用)
getValue() 無參 獲取元件選擇的值

注：功能函式中需要傳遞的引數含義如下

  • sliderIndex 代表的是要修改的輪子的索引
  • posIndex 代表位置索引

①功能函式demo：

<div id="day"></div>

var mySelect = new PickerExtend({
    trigger: '#day',
    wheels: [
                {data:['週日','週一','週二','週三','週四','週五','週六']},
                {data:['08:00','09:00','10:00','11:00','12:00','13:00','14:00']}
            ],
    position:[1,1] //初始化定位 兩個輪子都選中在索引1的選項
});

//----------------------------------------------
//進行基礎的例項化之後，對例項用功能函式操作

// mySelect.setTitle('啦啦啦(๑•̀ㅁ•́ฅ)');
// 設定控制元件的標題

// mySelect.updateWheel(0,['sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday']);
// 更新第0個輪子的資料，資料變為英文的星期幾

// mySelect.locatePosition(1,0);
// 重新定位第1個輪子的位置，將第1個輪子的第0個資料改為當前選中。
// (第1個輪子是指右邊的輪子，左邊的輪子是第0個)
複製程式碼

基礎例項 → 功能函式操作後

[圖片上傳失敗...(image-95d5aa-1536046640642)] [圖片上傳失敗...(image-7379f1-1536046640642)]

②ajax非同步填充資料demo


<!-- ************ 非級聯格式 ************ -->

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

<script type="text/javascript">
    var mobileSelect6 = new PickerExtend({
        trigger: '#trigger6',
        title: 'ajax填充資料-非級聯',
        wheels: [
                    {data:[
                        {id:'1',value:'請選擇地區'},
                    ]},
                    {data:[
                        {id:'1',value:'請選擇距離'},
                    ]}
                ],
        callback:function(indexArr, data){
            console.log(data);
        }
    });

    $.ajax({
        type: "POST",
        url: "xxxx",
        data: {},
        dataType: "json",
        success: function(res){
            //這裡假設獲取到的res.data.area為：
            // [
            //     {id:'1',value:'附近'},
            //     {id:'2',value:'福田區'},
            //     {id:'3',value:'羅湖區'},
            //     {id:'4',value:'南山區'}
            // ]

            //這裡假設獲取到的res.data.distance為：
            // [
            //     {id:'1',value:'200米'},
            //     {id:'2',value:'300米'},
            //     {id:'3',value:'400米'}
            // ]

            mobileSelect6.updateWheel(0, res.data.area); //更改第0個輪子
            mobileSelect6.updateWheel(1, res.data.distance); //更改第1個輪子
        }
    });
</script>
</script>




<!-- ************ 級聯格式 ************ -->

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

<script type="text/javascript">
    var mobileSelect7 = new PickerExtend({
        trigger: '#trigger7',
        title: 'ajax填充資料-級聯',
        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){
            //這裡假設獲取到的res.data為：
            // [{
            //     id:'1',
            //     value:'更新後資料',
            //     childs:[
            //         {id:'A1',value:'apple'},
            //         {id:'A2',value:'banana'},
            //         {id:'A3',value:'orange'}
            //     ]
            // }]
            mobileSelect7.updateWheels(res.data);
        }
    });
</script>
複製程式碼

如何回顯選擇的位置

callback回撥函式裡有一個indexArr引數，它是一個陣列，記錄著當前選中的位置：
把這個陣列轉化為字串之後，可以用隱藏域或者別的其他方式儲存下來，傳給後臺。
下次開啟頁面時，
MobileSelect例項化的時候，讀取這個字串，再轉成陣列，傳給position，完成初始化定位即可。

增加推薦欄位的demo：

傳入的keymap中 有一個recommend字樣 通過設定為true或者false 來顯示這個推薦欄位 （使用者可自定義修改原始碼 進行擴充套件）

image

適應平板的樣式

通過改變配置項中flexibleHeight（使用者自定義傳入),字型大小可由使用者根據css進行設定 以達到通用性和個性化的配置

var mobileSelect = this.mobileSelect = new PickerExtend({
      trigger: '#trigger',
      title: '類目選擇',
      wheels: [
        {data: CITY_DATA}
      ],
      keyMap: {
        id: 'cat_id',
        value: 'cat_name',
        childs: 'detail',
        recommend: 'recommend'
      },
      //  初始化為000   如果是編輯商品的情況 我們可以通過api去設定
      // position: [0, 0, 0],
      flexibleHeight: '80',
      callback: function (indexArr, data) {
        console.log('選擇成功之後的回撥函式')
        console.log(indexArr)
        console.log(data) // 返回選中的json資料
      }
    })
複製程式碼
效果如下

image

更新日誌

2018-08-02【更新】

  • 修復移動端點選出現藍色高亮的情況
  • 修復之前限定型別的自適應 支援使用者自定義高度 字型樣式通過css設定
  • 修復對於部分使用者來說 滑動速度較慢的問題

相關文章