Web滑动日期选择器(仿iOS)

datepicker.mobile

简介

移动web端统一使用体验,在ios上通过select标签滑轮的效果很赞,但是android不同版本表现各异,为了统一UI与使用体验,使用开源库mobiscroll封装了一个自己的时间选择控件(mobiscroll库的使用文档不多,自己使用时也遇到很多坑),实现js比较简单,大家可以看看,然后定制出自己的时间选择器。

日期选择demo github项目地址

demo预览

默认主题

蓝色主题

预览

如何使用?

  1. demo/index.html中样例所示,引入如下js
    <script type="text/javascript" src="./js/util.js"></script>
    <script type="text/javascript" src="./js/date.js"></script>

util.js工具类,date.js主要操作js

date.js中一些日期操作展依赖util.js

  1. 创建date
/**
 * 初始化传入参数说明
 * 
 * @param  {[date]}      [设置日期]
 * @param  {[theme]}     [主题设置:目前白蓝两种主题,默认白色主题]
 * @param  {[onSelect]}  [日期选中后回调函数 参数date为选中日期]
 */
date.init(
    {
        date : '2016-01-07',
        theme : 'blue',
        onSelect : function(date){
        console.log(date);
    }}
);
  1. 配置参数
{
    date : '2016-01-07',//传入初始化日期
    theme : 'blue',//目前白蓝两种主题,默认白色主题
    onSelect : function(date){
        console.log(date);//日期选中后回调函数 参数date为选中日期
    }
}
  • 11
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
iOS中,要实现仿今日头条滑块滑动效果,可以借助UIKit框架中的UIScrollView以及UICollectionView来实现。 首先,在界面中添加一个UIScrollView,设置其frame为所需大小,并将其contentSize设置为所有滑块所占的总宽度。如果滑块数目较多,可以使用UICollectionView来更方便地布局和管理滑块。 接下来,可以使用UIPageControl来显示当前滑块的页数,通过与UIScrollView的滑动距离进行关联,使UIPageControl随着滑块的滑动而改变页数。可以通过UIScrollViewDelegate的方法scrollViewDidScroll来实现这一功能,根据当前的contentOffset来计算并更新UIPageControl的当前页数。 另外,要实现滑块的点击切换功能,可以使用UITapGestureRecognizer来监听滑块的点击事件。当检测到点击时,通过计算点击点的位置来判断点击的是哪个滑块,并使用UIScrollView的方法scrollRectToVisible来将该滑块滑动到可见区域。 为了增强滑块的滑动体验,可以结合UIView动画来实现平滑滑动的效果。使用UIView的方法animateWithDuration:animations:completion:来执行滑块的滑动动画,通过改变UIScrollView的contentOffset来实现滑块的平滑滑动。 此外,还可以添加一些其他效果来增强用户体验,例如滑块滑动到边缘时的弹性效果、滑块的缩放效果等。 总而言之,要实现iOS仿今日头条滑块滑动效果,需要借助UIScrollView或UICollectionView来布局和管理滑块,结合UIPageControl、UITapGestureRecognizer和UIView动画来实现滑块的滑动、点击和平滑滑动效果,并可以添加一些其他效果来增强用户体验。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值