h5 select滚动选择器

2024-11-06

H5 仿ios select滚动选择器。框架。

官网上描述的很详细,并且开源,轻量. 有兴趣的可以去尝试官网上的demo写的也很好,并且每个参数也解释的很详细. http://zhoushengfe.com/iosselect/website/index.html#user-content-demos 效果图:

手机里设置闹钟需要选择时间,那个选择时间的控件就是滚动选择器,前几天用手机刷了MIUI,发现自带的那个时间选择器效果挺好看的,于是就自己仿写了一个,权当练手.先来看效果: 效果还行吧?实现思路就是自定义一个PickerView,单独滚动的是一个PickerView,显然上图中有分和秒的选择所以在布局里用了两个PickerView.由于这里不涉及到text的点击事件,所以只需要继承View就行了,直接把text用canvas画上去.PickerView的实现的主要难点: 难点1: 字体随距离的渐变

Android自定义控件实战——滚动选择器PickerView

转载请声明出处http://blog.csdn.net/zhongkejingwang/article/details/38513301 手机里设置闹钟需要选择时间,那个选择时间的控件就是滚动选择器,前几天用手机刷了MIUI,发现自带的那个时间选择器效果挺好看的,于是就自己仿写了一个,权当练手.先来看效果: 效果还行吧?实现思路就是自定义一个PickerView,单独滚动的是一个PickerView,显然上图中有分和秒的选择所以在布局里用了两个PickerView.由于这里不涉及到text的点击

一款多功能的移动端滚动选择器，支持单选到多选、支持多级级联、提供自定义回调函数、提供update函数二次渲染、重定位函数、兼容pc端拖拽等等..

https://github.com/onlyhom/mobileSelect.js/blob/master/docs/README-CN.md mobileSelect.js 一款多功能的移动端滚动选择器,支持单选到多选.支持多级级联.提供自定义回调函数.提供update函数二次渲染.重定位函数.兼容pc端拖拽等等.. [English documents] 特性原生js移动端选择控件,不依赖任何库可传入普通数组或者json数组可根据传入的参数长度,自动渲染出对应的列数,支持单项到多项选

微信小程序组件解读和分析：十二、picker滚动选择器

picker滚动选择器组件说明: picker: 滚动选择器,现支持三种选择器,通过mode属性来区分, 分别是普通选择器(mode = selector),时间选择器(mode = time),日期选择器(mode = date), 默认是普通选择器. picker滚动选择器示例代码运行效果如下: 下面是WXML代码: [XML] 纯文本查看复制代码 ? 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23

通通玩blend美工（6）下——仿iPhone滚动选择器的ListBox（交互逻辑）

原文:通通玩blend美工(6)下--仿iPhone滚动选择器的ListBox(交互逻辑) 上一篇我们已经把界面画出来了,这篇我们就来制作交互的逻辑吧.上一篇的电梯: http://www.cnblogs.com/tong-tong/archive/2012/07/15/2586543.html 回顾下效果: 页面代码如下: <TextBlock Text="{Binding SelectedItem.Content, ElementName=ListBox1}"/>

通通玩blend美工（6）上——仿iPhone滚动选择器的ListBox（UI设计）

原文:通通玩blend美工(6)上--仿iPhone滚动选择器的ListBox(UI设计) 好久没更新博客了,由于项目比较紧,期间收到不少园友的短消息,感谢大家对我的支持~~. 相信各位都在自己的神机中看到过各种滚动选择器,偶们项目经理就是个iPhone迷,前几天一直抬着个手机对我说"这个炫,做这个...".于是就有了这个选择器. 最终效果如下: (按住鼠标,尽情滚吧~) 页面代码如下: <TextBlock Text="{Binding SelectedItem

Android DSelectorBryant 单选滚动选择器

单选滚动选择器.diy丰富.有阻尼效果.简单美观.触摸or点击模式 (Rolling Selector, Diy Rich, Damping Effect, Simple and Beautiful, Touch or Click Mode) Github地址 YangsBryant/DSelectorBryant (Github排版比较好,建议进入这里查看详情,如果觉得好,点个star吧!) 引入module allprojects { repositories { google() jcen

移动端滚动选择器mobileSelect.js

一款多功能的移动端滚动选择器,支持单选到多选.支持多级级联.提供自定义回调函数.提供update函数二次渲染.重定位函数.兼容pc端拖拽等等.. 特性原生js移动端选择控件,不依赖任何库可传入普通数组或者json数组可根据传入的参数长度,自动渲染出对应的列数,支持单项到多项选择自动识别是否级联选择成功后,提供自定义回调函数callback() 返回当前选择索引位置.以及选择的数据(数组/json) 每次手势滑动结束后,也提供一个回调函数transitionEnd() 返回当前选择索引位

三种用于select 的选择器

<html lang="en"> <head> <meta charset="utf-8"> <title>选项卡默认值</title> <style> </style> <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script> &l

[微信小程序] 微信小程序下拉滚动选择器picker绑定数据的两种方式

小程序 picker 多列选择器数据动态获取需求是将各校区对应各班级的数据以两列选择器的方式展示出来,并且可以在选择完成之后记录选结果参数. 校区数据和班级数据分别是两个接口,以校区 teach_area_id 字段关联其各班级数据 <picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColum

微信小程序—picker(滚动选择器)

官方api:https://mp.weixin.qq.com/debug/wxadoc/dev/component/picker.html 上边是官网的api.小程序中,底部下拉滚动选择主要有这几种下拉选择,时间选择,城市选择,多项选择. 1.index.js中: //index.js //获取应用实例 const app = getApp() Page({ data: { //设置初始值 array: ['中国', '美国', '巴西', '俄罗斯'], objectArray: [ { i

jQuery获取select元素选择器练习

jQuery获取Select选择的Text和Value:语法解释: 1. $("#select_id").change(function(){//code...}); //为Select添加事件,当选择其中一项时触发 2. var checkText=$("#select_id").find("option:selected").text(); //获取Select选择的Text 3. var checkValue=$("#select

H5中滚动到底部的事件

问题:在H5中,我们有这样的需求:例如有列表的时候,滚动到底部时,需要加载更多. 解决方案:可以采用window的滚动事件进行处理分析:如果滚动是针对整个屏幕而言的(不针对于某个界面小块),那么这个应该是是成立的:屏幕的高度+最大滚动的距离 = 内容的高度代码实现: <html> <head> <meta charset="UTF-8"> <title>监听滚动到底部滚动底部</title> <style> .

h5 穿透滚动

引子 h5 页面有弹窗浮层时,浮层之下若产生了滚动,滑动浮层时会让其产生滚动.这是示例页面,移动端访问如下: Origin My GitHub 原因找到的信息里面有两种说法: 使用了 -webkit-overflow-scrolling: touch ,另外这个不是标准属性. 浮层也是页面的一个元素,浮层的展示正常,页面中的其它元素按照本来的方式展示运作.也就是说这是一个正常的现象,只不过是我们不想要这种效果. 针对第一种说法,进行测试验证,这是示例页面,移动端访问如下: 发现:跟 -webk

H5 68-伪元素选择器

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>68-伪元素选择器</title> <style> *{ margin: 0; padding: 0; } div{ width: 200px; height: 200px; background-color: red; } /* p{ widt

H5 21-属性选择器下

21-属性选择器下 --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>21-属性选择器下</title> <style> /* img[alt^=abc]{ color: red; } */ /* img[alt|=abc]{ color: red; } img[alt$=abc]

H5 20-属性选择器上

20-属性选择器上 --> 我是段落1 我是段落2 我是段落3 我是段落4 我是段落5 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>20-属性选择器上</title> <style> /* p[id]{ color: red; } */ p[class=cc]{ color: blu

H5 17-兄弟选择器

17-兄弟选择器我是标题我是超链接我是段落我是段落我是段落我是标题我是段落我是段落我是段落 --> 我是标题我是超链接我是段落我是段落我是超链接我是段落我是标题我是段落我是段落我是段落 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>17-兄弟选择器</title>

H5 16-并集选择器

16-并集选择器我是标题我是段落我是段落我是段落 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>16-并集选择器</title> <style> /* .ht{ color: red; } .para{ color: red; } */ .ht,.para{ color: red;