mobileSelect.js 文档，掌握移动端滚动选择器构建技巧

2024-01-28 14:31:25

mobileSelect.js概述

mobileSelect.js是一个轻量级的移动端滚动选择器库，它可以帮助您轻松地在移动端创建各种各样的滚动选择器，如日期选择器、时间选择器、城市选择器等。mobileSelect.js具有以下特点：

支持单选和多选
支持多级级联
提供自定义回调函数
提供update函数二次渲染
提供重定位函数
兼容pc端拖拽操作

mobileSelect.js用法

1. 引入mobileSelect.js库

<script src="mobileSelect.js"></script>

2. 初始化mobileSelect.js

var mobileSelect = new MobileSelect();

3. 设置mobileSelect.js的属性

mobileSelect.init({
  trigger: '#trigger', // 触发元素
  wheels: [
    {data: ['北京', '上海', '广州', '深圳']}, // 第一列数据
    {data: ['朝阳区', '海淀区', '西城区', '东城区']} // 第二列数据
  ],
  position: [0, 0], // 默认选中项
  callback: function(indexArr, data) {
    console.log(indexArr, data);
  }
});

4. 使用mobileSelect.js

mobileSelect.show(); // 显示滚动选择器
mobileSelect.hide(); // 隐藏滚动选择器
mobileSelect.updateWheel(1, ['杭州', '宁波', '温州', '嘉兴']); // 更新第二列数据
mobileSelect.locatePos(1, 2); // 重定位第二列选中项

mobileSelect.js常见问题

1. 如何使用mobileSelect.js创建单选滚动选择器？

var mobileSelect = new MobileSelect();
mobileSelect.init({
  trigger: '#trigger', // 触发元素
  wheels: [
    {data: ['北京', '上海', '广州', '深圳']} // 数据
  ],
  position: [0], // 默认选中项
  callback: function(indexArr, data) {
    console.log(indexArr, data);
  }
});

2. 如何使用mobileSelect.js创建多选滚动选择器？

var mobileSelect = new MobileSelect();
mobileSelect.init({
  trigger: '#trigger', // 触发元素
  wheels: [
    {data: ['北京', '上海', '广州', '深圳']}, // 第一列数据
    {data: ['朝阳区', '海淀区', '西城区', '东城区']} // 第二列数据
  ],
  position: [0, 0], // 默认选中项
  callback: function(indexArr, data) {
    console.log(indexArr, data);
  }
});

3. 如何使用mobileSelect.js创建级联滚动选择器？

var mobileSelect = new MobileSelect();
mobileSelect.init({
  trigger: '#trigger', // 触发元素
  wheels: [
    {data: ['北京', '上海', '广州', '深圳']}, // 第一列数据
    {data: ['朝阳区', '海淀区', '西城区', '东城区'], cascade: true} // 第二列数据，开启级联
  ],
  position: [0, 0], // 默认选中项
  callback: function(indexArr, data) {
    console.log(indexArr, data);
  }
});