当前位置:Gxlcms > html代码 > 总有一款适合你-移动端微网站-仿app时间滚动选择效果实现_html/css_WEB-ITnose

总有一款适合你-移动端微网站-仿app时间滚动选择效果实现_html/css_WEB-ITnose

时间:2021-07-01 10:21:17 帮助过:54人阅读

上次给大家介绍了一款 移动端微网站的时间选择插件 ,你还记得么?今天给大家介绍一款新的插件:mobiscroll,为什么上次的可以用,这次还要介绍新的呢?主要因为它十分灵活,可控,总有一种组合适合你。

首先介绍其优点:
多主题(默认、IOS、SenseUI、Android-ICS-Light、Android-ICS、WindowsLight、WindowsPhone);多模式(滚动、点击、混合);多显示形式(拾取、直接、气泡、顶部、底部);多动画(无、渐显、翻转、弹出、翻书、从左滑出、自下而上、自上滑出、自下滑出);多种模式——赋予不同的参数,就可以只选到日期、只选时间、日期时间同时选;

我们可以任意组合上面的,别晕,下面看效果图你就知道各自对应什么了。

话不多说,先看效果图:
  • 多主题

默认.png

IOS.png

SenseUI.png

Android-ICS-Light.png

Android-ICS.png

WindowsLight.png

WindowsPhone.png

  • 多模式(以Android-ICS-Light主题为例,下面都用这主题,因为笔者觉得这个主题更好看)

滚动.png

点击.png

混合(点击-滚动都可以).png

  • 多显示形式

直接显示在界面上.png

拾取.png

底部.png

顶部.png

气泡.png

  • 多动画多动画在这里光靠图片模拟不出来,靠各位自己去尝试了,我会在最后附一个demo的链接,大家可以下了看看,在里面寻找自己想要的组合效果。

  • 多种模式最后就是多模式了,日常开发过程中,对日期精确地位数要求有很多,像“只要日期”、“只要时间”、“日期和时间都要“的情况都是很常见的。

只要日期.png

只要时间.png

日期时间都要.png

好了,常见的需求以上基本都能满足了,你可以自己组合。

我们该如何组合呢?来看看部分代码

  • 应用不同的主题只要在这里引用不同的css和js(对应名称一看就知道)

            

    被注释掉的都是其他的主题,你可以按自己的需要引入不同的css。注意:最后2个css是必须要引入的。不同的css主题引入的js也是不一样的,看下面代码

    同样,前4个js也是必须引入的,剩余的看你自己需求来引入对应的js了。

    光引入js和css是不够的,还需要执行一段js,很简单

    我们可以在这里进行配置。

  • 时间、日期、日期时间同时保留配置这个就更简单了,只要对上面我们写的js修改一个参数

    preset: 'date'---日期preset: 'time' --- 时间preset: 'datetime' ---日期时间都保留
最后,如果你要知道更多的配置项,可以去英文官网查看, 狠戳这里 。

测试选择.png

如果你想要组合自己想要的显示方式,可以在我附带的demo中实时选择,再配置,如上图。查看demo, 狠戳这里 。(PS:密码 5uwp)

如果这篇文章,帮助到了你,麻烦帮忙点赞啦~

人气教程排行