mui picker选择器的使用

本次需求是使用mui选择器完成银行卡切换选择
参考地址：https://dev.dcloud.net.cn/mui/ui/#picker

参考官网数据

html

//首先肯定是引用mui的js、css依赖文件
<link rel="stylesheet" type="text/css" href="static/public/css/mui.picker.min.css">
<script type="text/javascript" src="static/public/js/mui.picker.min.js"></script>

//然后定义id，方便picker选择器使用，data-value是为了拿到自定义属性
<div class="mui-btn mui-btn-block" id='showUserPicker' data-value=""></div>

js

//定义数组接收数据
let listArray = [];
//在ready方法中定义选择器
mui.ready(function () {
  let userPicker = new mui.PopPicker();//银行卡选择器
  // ....ajax请求接口数据并赋值（接口就不展示了）
  listAll = res.data;
  // 默认展示数据第一条
  $('#showUserPicker').html(listAll[0].card.bankName + "(尾号 " + listAll[0].card.cardLastNo + ")");
  // 赋值第一条卡索引
  $('#showUserPicker').attr("data-value", listAll[0].card.cardIndex)
  // 使用for循环将数据定义为mui组件所需的data状态
  for (let i = 0; i < listAll.length; i++) {
       if (listAll[i].status == 1) {
           let newPicker= {};
           newPicker.text = listAll[i].card.bankName + "(尾号 " + listAll[i].card.cardLastNo + ")";
           newPicker.value = listAll[i].card.cardIndex;
           listArray.push(newPicker);
          }
        }
      }
    }
    //setData() 支持数据格式为: 数组
    userPicker.setData(listArray);
    let showUserPickerButton = document.getElementById('showUserPicker');
    showUserPickerButton.addEventListener('tap', function (event) {
      userPicker.show(function (items) {
      // console.log(items);
        showUserPickerButton.innerText = items[0].text;
        // 选中赋值自定义属性
        $('#showUserPicker').attr("data-value", items[0].value)
      });
    }, false);
  })
});

• 如此一个简单的picker银行卡选择器就完成了。