html5类似ios下拉选择器,iosselect：一个js picker项目，在H5中实现IOS的select下拉框效果 - mufc-go...

最新推荐文章于 2024-01-18 16:59:56 发布
VIP文章 最新推荐文章于 2024-01-18 16:59:56 发布
阅读量529 收藏
点赞数
文章标签： html5类似ios下拉选择器

具体文档和demo可以访问github:https://github.com/zhoushengmufc/iosselect

移动端浏览器对于select的展示样式是不一致的，ios下是类似原生的picker，安卓下各浏览器展示各异，我们需要一个picker组件来统一各端下各种浏览器的展示。

iosselect是在webapp下的一个picker组件，可以轻松实现各类选择器效果。比如地区选择 时间选择 日期选择等。

下面是一个地址选择器demo截图，可以访问：

65a23ce8e16f1f9fdc87876d6d954907.png

可以查看demo:

地址选择器

时间选择器

iosselect接口丰富，适用于多类场景

可以定制依赖关系，规定各层级之间是否有关联。

可以定制选择层级，支持1-5层选择。

可以定制各项高度，可以规定展示项数，默认展示7项。

移动端rem应用普遍，无论你是px还是rem，使用iosselect都完全不是问题。

可以提供静态数据，也可以使用方法获取数据，支持同步方法和异步方法。

iosselect基于iscroll5开发，除此外无任何依赖，所以无论你是react还是angular还是vue还是zepto jquey都不是问题。

new IosSelect(level, data, options)

level: 级联等级，

最低0.47元/天 解锁文章
weixin_39727934
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端picker.js 选择器 轮选择器
05-04
<!DOCTYPE html> <html lang="en-us"> <head> <meta charset="UTF-8"> <title>Picker by ustbhuangyi</title> <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"> </head> <body> <section class="page-header"> <h1 class="project-name">Picker</h1> <h2 class="project-tagline">h5 picker inspired by ios UIPickerView</h2> <a href="https://github.com/ustbhuangyi/picker" class="btn">View on GitHub</a> <a href="https://github.
移动端自定义下拉框【H5+js+css】
sanghongxv的博客
08-16 1万+
var weekdayArr = ['男', '女'];// var age1 = ['18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31', '32', '33', '34', '35', '36', '37', '38', '39', '40', '41', '42', '43'...
H5使用iosselect实现一级、二级下拉，使用jq或者vue
最新发布
m0_65069309的博客
01-18 598
html部分直接使用就可，一般都是通过input标签来触发，不过在H5里有时候会有安卓、ios兼容问题，所以这里实现通过点击p标签来触发选择事件。使用 iosselect 需要下载iosSelect.css 和iosSelect.js 可以去文档demo的代码里找文件。一样input可能会有安卓、ios 兼容问题所以也是用p标签来实现触发，先说通过jq实现，直接引入文件，注意引入路径。vue 中使用iosselect插件。文档和demo可以访问。至此 jq方法实现结束。iosselect 和。
uniapp实现下拉搜索选择框，app，h5可用
热门推荐
LeeBrook0的博客
08-15 2万+
在通过uniapp做app开发的时候，有场景需要用到下拉选择框，但是使用的uview框架里的底部弹出的选择项形式产品又不满意。
Vue.js--下拉菜单组件
吴声子夜歌的博客
10-17 2551
效果 #### 入口页面 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> ...
react-native-picker-cascader：在Android和IOS本机中开发的Picker select级联器下拉列表
02-03
React本机选择器级联器安装npm install --save react-native-picker-cascader如何使用import PickerCascader from 'react-native-picker-cascader';<PickerCascader style={{ padding: 10 }} data={[ { key: '1',...
react-native-dropdown-picker：用于响应本机的单个多个可搜索项目选择器（下拉）组件，支持Android和iOS
02-05
React本机下拉选择器v3 用于响应本机的单个/多个可搜索的项目选择器（下拉）组件，同时支持Android和iOS。注意（不兼容） x <3.0.0版本与当前版本不兼容。 需要遵循文档才能将软件包升级到v3.x依存关系我们的...
react-native-select-picker:定制选择器（就像在HTML中），在iOS和Android上呈现相同的效果
05-04
这是一个自定义的选择器，在所有平台上呈现相同的方式。 什么是新的？ 0.0.10版修复了禁用的输入错误。 安装 如果您已经在项目中拥有此软件包，请运行以下命令将其更新为最新版本： npm install --save react-...
react-native-picker-modal:一个React Native Picker，模仿iOS在iOS中的实现，而无需更改原始API
05-18
一个React Native Picker，模仿iOS在iOS中的实现，而无需更改原始API。 它在Android上使用React Native的Picker ，并在iOS上的Modal使用显示Picker Text 。 安装 npm i react-native-picker-modal --save // OR yarn...
react-native-picker-select：React用于React Native的Picker组件，可模拟本机适用于iOS和Android的界面
02-05
React本机选择器选择 React Native的Picker组件，可模拟iOS和Android的本机<select>接口对于iOS，默认情况下，我们包装了未样式化的TextInput组件。 然后，您可以传递样式以根据需要进行自定义。 对于Android...
IosSelect控件
09-26
一款很好的仿IOS的手机端下拉框控件，使用方法参考http://blog.csdn.net/nepaltrip/article/details/78105353
iosselect：webapp通用选择器
02-20
iOS选择 html拖放菜单选择在安卓和IOS下表现不一样，iosselect正是为统一拖放菜单样式而生，我们以IOS导航下选择的交互和样式为蓝本，开发了这一组件。 官网 备用网址： ://www.pengwf.com/iosselect/index.html 特色 0依赖，只需引用一个js和css即可 样式可自己定制，也可使用样式 一个页面同时实例化多个组件 jQuery zepto angular vue react均适用 支持最多6级级联 支持设置高度和高度单位 适用于android和iOS设备（PC端支持IE9 +，不过PC端上滑动体验不太实用） 起步 npm npm install iosselect 下载文件 点击下载文件到项目目录中，在HTML文件中插入以下代码，并按需调整路径。 < link rel =" stylesheet " href =" /static/cs
H5微应用 Vue3+Vant4表单中使用下拉单选、多选控件
weixin_44108109的博客
08-08 5501
最近在做钉钉端H5微应用的开发，项目前端架构是Vue3+Vant4，表单中需要使用字典下拉单选、多选控件，但Vant4中没有直接可以使用的控件，因此整合、、、、等组件，封装了带有弹出层的下拉单选、多选控件。在新增、编辑、详情页面均可使用，快速提高团队开发效率。
Vue2移动端（H5项目）项目基于vant实现select多选（支持全选、搜索、反选，最大选择数、回显等功能）
wocwin的博客
12-06 1882
Vue2移动端（H5项目）项目基于vant实现select多选（支持全选、模糊搜索、反选，最大选择数等功能）
HTML5 ＜select＞ 标签
thgj0006的博客
05-01 1965
select> 元素用来创建下拉列表。 元素中的标签定义了列表中的可用选项。
js移动端那些事之iosSelect.js
yjwu5353的博客
03-30 6553
关于js移动端与iosSect.js
iosSelect插件 H5中实现iOS的select下拉联动效果
陈雪珊的博客
12-21 1万+
简要说明官网：http://zhoushengfe.com/iosselect/website/index.html 下载：在官网点击 github 菜单项就可以下载此插件。下载好后可以看到两个文件夹，将src下的两个文件放到工程里的对应位置引入之后就可以按照说明进行使用了，这个插件更适用于移动端。 还有一个demo文件夹，里面是一些下拉联动效果的实例，可以参考它们使用 来实现想要的功能。因为我
使用iosSelect实现时间选择
swagLi的博客
07-08 2218
1、引入文件 <link rel="stylesheet" type="text/css" href="iosSelect/iosSelect.css"/> <script src="jquery-1.10.2.js" type="text/javascript" charset="utf-8"></script> <script src="iosSele...
h5 select 标签
冉然的博客
03-23 4453
1、select信息回显，根据option标签的ID来进行判断  测试的代码这里是两个等号       if (all_options[i].id == optionID)  {          all_options[i].selected = true;} 2、给select添加背景 background: url('../xiala.pic') no-repeat scroll  ...
在xaml中使用picker实现一个下拉框
05-28
好的，下面是一个简单的 XAML 代码示例，演示如何使用 Picker 实现一个下拉框： ```xml <StackLayout> <Label Text="请选择一个选项:" /> <Picker Title="选项" SelectedIndex="0"> <Picker.Items> <x:String>选项1</x:String> <x:String>选项2</x:String> <x:String>选项3</x:String> </Picker.Items> </Picker> </StackLayout> ``` 在这个例子中，我们首先添加了一个 Label，用来显示提示信息。接着，我们创建了一个 Picker 控件，并设置了它的标题和默认选中项。在 Picker 中，我们使用了 Picker.Items 属性来添加选项列表。在这个例子中，我们添加了三个选项，分别是 "选项1"、"选项2" 和 "选项3"。 注意，这个例子使用了 StackLayout 布局来将 Label 和 Picker 包装在一起。你可以使用任何其他的布局来组织你的界面。另外，你也可以通过其他属性来自定义 Picker 的外观和行为，比如设置 Placeholder、TextColor 等等。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值