【前端】使用jQuery封装一套UI组件 - 移动端时间选择组件

简介: 【首先要声明一点,技术不分好坏,能用好就行,不用鄙视老技术】今天要给大家展示的是移动端时间选择组件最开始,看到比较新颖的移动端时间选择组件是在某款手机上,分年月日下拉选择,UI界面也挺好看的除了讲解实现的步骤以及关键点,文章最后面会有完整的代码
作者:小5聊基础
简介:一只喜欢全栈方向的程序员,欢迎咨询,尽绵薄之力答疑解惑
编程原则:Write Less Do More
  • 选择事件组件效果

image.png

【静态布局】

1)先设置一个父级div,宽度设置100%,高度设置30vh <br/>
vh单位,类似%分号,这里表示的是占30的视窗 <br/>
2)再设置一个父级的遮罩层div,有个技巧,就是背景样式使用rgba(0,0,0,.5) <br/>
r=red=红色,g=green=绿色,b=blue=蓝色,a=alpha=透明度,.5是0.5的简写 <br/>
width:100%;height:100%;position:fixed;top:0px;left:0px; <br/>
3)内容区域的顶部,设置两个按钮,放在左右两边,中间显示选择时间文本 <br/>
按钮可以使用左右浮动方式布局,文本直接根据父级设置的居中样式即可 <br/>

  • 主框架效果

image.png

  • 代码
<!--时间选择组件-->
<div style="width:100%;height:100%;position:fixed;top:0px;left:0px;background:rgba(0,0,0,.3);">
    <div style="width:100%;height:30vh;background:#fff;position:absolute;bottom:0px;left:0px;">
        <div style="width:100%;height:35px;line-height:35px;text-align:center;border-bottom:1px solid #ccc;">
            <span style="float:left;cursor:pointer;padding:0 20px;">取消</span>
            <span>选择时间</span>
            <span style="float:right;cursor:pointer;padding:0 20px;">确定</span>
        </div>
    </div>
</div>

4)接着是关键了,设置伸缩布局,左中右,分别是年月日的选择 <br/>
display:flex;
5)时间区域的父级div,设置宽度100%,高度则使用一个css函数设置 <br/>
calc(30vh - 35px),这个非常有意思,就是整体的高度减去按钮的35px高度,剩下的就是时间区域的高度 <br/>
width:100%;height:calc(30vh - 35px);display:flex;
image.png
6)年份可以设置1970~当前时间,设置多个div,父级设置overflow:auto,自动隐藏,在超出高度后自动显示滚动条,每一个年份div设置宽度100%,高度和行高30px,文本居中 <br/>
7)设置一个渐变遮罩背景 <br/>
渐变样式有浏览器兼容性问题,需要设置多个 <br/>
background: linear-gradient(to bottom, #ffffff, rgba(255, 255, 255, 0), #ffffff);
image.png

8)由于渐变遮罩层默认会覆盖在时间选择上面,导致无法焦点下拉,这个时候就可以给遮罩层设置一个样式, pointer-events: none; <br/>
9)通过上面的效果,4个选项不能在焦点居中,重新调整高度<br/>
整体高度可以设置235px,35px为按钮区域高度,200px为时间选择区域高度,遮罩层自然也是设置200px高度 <br/>

  • 效果

image.png

10)再给中间加上居中线框,凸显焦点<br/>
image.png

【交互设置】

1、生成年份

1)时间范围,1970~当前时间 <br/>
2)给年div设置class=year-div <br/>
3)设置一个选项模板,for循环生成年份选项,将html值追加到年份div里 <br/>

  • 效果

image.png

  • 代码
// 生成年份
function createYear() {
    var timeSelectTemplate = $("#timeSelectTemplate").html().trim();
    var html_year = '';
    var start_year = 1970;
    var min_year = new Date().getFullYear();
    for (var i = min_year; i >= start_year; i--) {
        var dom = $(timeSelectTemplate);
        dom.html(i);
        html_year += dom.prop('outerHTML');
    }
    $(".year-div").html(html_year);
}
createYear();

4)到这里虽然解决年份选项生成,但是通过滚动条下拉,发现不能让第一个时间值下拉到中间焦点,显然不能满足这个需求,这个时候可以通过样式3D转换样式transform: translate3d <br/>
5)通过改变三维坐标的y轴的值来实现年份的选中 <br/>
transform: translate3d(0,0,0); 修改Y轴值得时候,记得一定要加上px单位,否则可能无效 <br/>
6)

2、生成月份

1)逻辑比较简单,直接就是1~12即可 <br/>
image.png

// 生成月份
function createMonth() {
    var timeSelectTemplate = $("#timeSelectTemplate").html().trim();
    var html_month = '';
    var start_month = 1;
    var max_month = 12;
    for (var i = start_month; i <= max_month; i++) {
        var dom = $(timeSelectTemplate);
        dom.html((i < 10 ? ('0' + i) : i));
        html_month += dom.prop('outerHTML');
    }
    $(".month-div").html(html_month);
}
createMonth();

3、生成具体天数

1)具体是多少天,需要年份和月份来决定 <br/>
2)最小值28天,最大值31天,还有29天(闰年)、以及30天 <br/>
3)获取一个月有多少天,这里有个小技巧 <br/>

function getMonthDay(year, month) {
    var days = new Date(year, month + 1, 0).getDate()
    return days
}

4)根据获取到的天数,循环生成即可 <br/>
5)设置默认值,1995-01-01,效果如下 <br/>
image.png

【移动端移动事件】

1)在PC电脑端,可以通过鼠标时间,mousedown、mousemove、mouseup来实现移动 <br/>
2)在phone移动端,可以通过触碰事件,touchstart、touchmove、touchend <br/>
image.png

var div = document.querySelector('div.year-div');
div.addEventListener('touchstart', function (event){
    var event = event || window.event;
    console.log(event.touches[0]);
});

3)参数说明 <br/>

clientX:触摸目标在视口中的x坐标。
clientY:触摸目标在视口中的y坐标。
identifier:标识触摸的唯一ID。
pageX:触摸目标在页面中的x坐标。
pageY:触摸目标在页面中的y坐标。
screenX:触摸目标在屏幕中的x坐标。
screenY:触摸目标在屏幕中的y坐标。
target:触目的DOM节点目标。

4)这里只需要关注Y轴的值,定义开始触碰的Y值变量以及移动点Y值得差值变量 <br/>
5)当离开触点时,根据40的倍数和总移动Y值计算,让年份选中值,显示在居中位置,会有一个滑动的效果
<br/>
为什么时40的倍数,因为每个年份选项高度都是40px <br/>
animate动画方法不支持对transform样式设置效果,可以在回调函数进行设置

var unit_count = Math.round(moveTotalY / 40);
$(".year-div").animate({}, 300, function () {
    $(".year-div").css({ "transform": "translate3d(0," + unit_count * unit + "px,0)" });
});

6)滑动年份和月份时,需要重新计算天数

【主要知识点列表】

编号 语言或插件 知识点 说明
1 jQUery $(dom).animatie() 动画方法,元素样式从一个状态到另一个状态的变化
2 js touchstart 触碰开始点
3 js touchmove 触碰移动点
4 js touchend 触碰结束,离开

【完整代码】

以下代码仅供参考,对组件感兴趣的小伙伴可以精简代码

<!--时间选择组件-->
<div class="text-no-select" style="width:100%;height:100%;position:fixed;top:0px;left:0px;background:rgba(0,0,0,.3);">
    <div style="width:100%;height:235px;background:#fff;position:absolute;bottom:0px;left:0px;">
        <div style="width:100%;height:35px;line-height:35px;text-align:center;border-bottom:1px solid #333;">
            <span style="float:left;cursor:pointer;padding:0 20px;">取消</span>
            <span>选择时间</span>
            <span style="float:right;cursor:pointer;padding:0 20px;">确定</span>
        </div>
        <div style="width:100%;height:200px;display:flex;overflow: hidden;">
            <div class="year-div" style="width:100%;height:auto;transform: translate3d(0,0,0);">

            </div>
            <div class="month-div" style="width:100%;height:auto;transform: translate3d(0,0,0);">

            </div>
            <div class="day-div" style="width:100%;height:auto;transform: translate3d(0,0,0);">

            </div>
        </div>
        <!--居中焦点线框-->
        <div style="width:100%;height:40px;position:absolute;bottom:80px;left:0px;pointer-events: none;border-top:1px solid #ccc;border-bottom:1px solid #ccc;"></div>
        <!--遮罩-->
        <div style="width:100%;height:200px;position:absolute;bottom:0px;left:0px;pointer-events: none;
        background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), color-stop(rgba(255, 255, 255, 0)), to(#ffffff));
        background: -webkit-linear-gradient(top, #ffffff, rgba(255, 255, 255, 0), #ffffff);
        background: linear-gradient(to bottom, #ffffff, rgba(255, 255, 255, 0), #ffffff);"></div>
    </div>
</div>

<!--日期选项模板-->
<script type="text/template" id="timeSelectTemplate">
    <div data-value="" style="width:100%;height:40px;line-height:40px;text-align:center;">
        <span>2022</span>
    </div>
</script>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">

    $(function () {

        // =====全局参数=====
        var year_value = 1995;
        var month_value = 1;
        var day_value = 1;
        var moveYearTotalY = 0;
        var moveMonthTotalY = 0;
        var moveDayTotalY = 0;
        var unit = 40;

        // 生成年份
        function createYear() {
            var timeSelectTemplate = $("#timeSelectTemplate").html().trim();
            var html_year = '';
            var start_year = 1970;
            var min_year = new Date().getFullYear();
            for (var i = min_year; i >= start_year; i--) {
                var dom = $(timeSelectTemplate);
                dom.html(i);
                dom.attr("data-value", i);
                html_year += dom.prop('outerHTML');
            }
            $(".year-div").html(html_year);

            //设置默认值
            var unit_count = year_value - min_year;
            moveYearTotalY = (unit_count + 2) * unit;
            $(".year-div").css({ "transform": "translate3d(0," + moveYearTotalY + "px,0)" });
        }
        createYear();

        // 生成月份
        function createMonth() {
            var timeSelectTemplate = $("#timeSelectTemplate").html().trim();
            var html_month = '';
            var start_month = 1;
            var max_month = 12;
            for (var i = start_month; i <= max_month; i++) {
                var dom = $(timeSelectTemplate);
                dom.html((i < 10 ? ('0' + i) : i));
                dom.attr("data-value", i);
                html_month += dom.prop('outerHTML');
            }
            $(".month-div").html(html_month);

            //设置默认值
            moveMonthTotalY = 2 * unit;
            $(".month-div").css({ "transform": "translate3d(0," + moveMonthTotalY + "px,0)" });
        }
        createMonth();

        // 生成天数
        function createDay() {
            var timeSelectTemplate = $("#timeSelectTemplate").html().trim();
            var html_day = '';
            var start_day = 1;
            var max_day = getMonthDay(year_value, month_value);
            for (var i = start_day; i <= max_day; i++) {
                var dom = $(timeSelectTemplate);
                dom.html((i < 10 ? ('0' + i) : i));
                dom.attr("data-value", i);
                html_day += dom.prop('outerHTML');
            }
            $(".day-div").html(html_day);

            //设置默认值
            moveDayTotalY = 2 * unit;
            $(".day-div").css({ "transform": "translate3d(0," + moveDayTotalY + "px,0)" });
        }
        createDay();

        function getMonthDay(year, month) {
            var days = new Date(year, month, 0).getDate()
            return days
        }

        // =====滑动事件=====
        // 滑动时间 - 年份
        function moveYear() {

            var name = '.year-div';
            var startY = 0;
            var valueY = 0;
            var div = document.querySelector(name);
            div.addEventListener('touchstart', function (event) {
                var event = event || window.event;
                var touches = event.touches[0];
                startY = touches.clientY;
            });

            div.addEventListener('touchmove', function (event) {
                var event = event || window.event;
                var touches = event.touches[0];
                valueY = touches.clientY - startY + moveYearTotalY;
                $(name).css({ "transform": "translate3d(0," + valueY + "px,0)" });
            });

            div.addEventListener('touchend', function () {
                if (valueY == 0) return;
                moveYearTotalY = valueY;
                var unit_count = Math.round(moveYearTotalY / unit);
                $(name).animate({}, 300, function () {
                    $(name).css({ "transform": "translate3d(0," + unit_count * unit + "px,0)" });
                });
            });
        }
        moveYear();

        // 滑动时间 - 月份
        function moveMonth() {

            var name = '.month-div';
            var startY = 0;
            var valueY = 0;
            var div = document.querySelector(name);
            div.addEventListener('touchstart', function (event) {
                var event = event || window.event;
                var touches = event.touches[0];
                startY = touches.clientY;
            });

            div.addEventListener('touchmove', function (event) {
                var event = event || window.event;
                var touches = event.touches[0];
                valueY = touches.clientY - startY + moveMonthTotalY;
                $(name).css({ "transform": "translate3d(0," + valueY + "px,0)" });
            });

            div.addEventListener('touchend', function (event) {
                if (valueY == 0) return;
                moveMonthTotalY = valueY;
                var unit_count = Math.round(moveMonthTotalY / unit);
                $(name).animate({}, 300, function () {
                    var _y = unit_count * unit;
                    if (_y > 80) _y = 80;
                    $(name).css({ "transform": "translate3d(0," + _y + "px,0)" });
                });
            });
        }
        moveMonth();

        // 滑动时间 - 天数
        function moveDay() {

            var name = '.day-div';
            var startY = 0;
            var valueY = 0;
            var div = document.querySelector(name);
            div.addEventListener('touchstart', function (event) {
                var event = event || window.event;
                var touches = event.touches[0];
                startY = touches.clientY;
            });

            div.addEventListener('touchmove', function (event) {
                var event = event || window.event;
                var touches = event.touches[0];
                valueY = touches.clientY - startY + moveDayTotalY;
                $(name).css({ "transform": "translate3d(0," + valueY + "px,0)" });
            });

            div.addEventListener('touchend', function (event) {
                if (valueY == 0) return;
                moveDayTotalY = valueY;
                var unit_count = Math.round(moveDayTotalY / unit);
                $(name).animate({}, 300, function () {
                    var _y = unit_count * unit;
                    if (_y > 80) _y = 80;
                    $(name).css({ "transform": "translate3d(0," + _y + "px,0)" });
                });
            });
        }
        moveDay();
    });
</script>
相关文章
|
13天前
|
前端开发 安全 开发工具
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
147 90
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
|
2月前
|
人工智能 开发框架 JavaScript
LowCodeEngine:阿里开源的企业级低代码开发平台,提供预制的 UI 组件和模板,覆盖完整的研发周期
LowCodeEngine 是阿里巴巴开源的低代码开发框架,旨在通过拖拽、配置等简单操作,帮助开发者快速构建复杂的系统页面,提升开发效率和质量。
151 4
LowCodeEngine:阿里开源的企业级低代码开发平台,提供预制的 UI 组件和模板,覆盖完整的研发周期
|
2月前
「Mac畅玩鸿蒙与硬件46」UI互动应用篇23 - 自定义天气预报组件
本篇将带你实现一个自定义天气预报组件。用户可以通过选择不同城市来获取相应的天气信息,页面会显示当前城市的天气图标、温度及天气描述。这一功能适合用于动态展示天气信息的小型应用。
166 38
|
2月前
|
JavaScript
超炫酷UI效果的jQuery滑块插件
超炫酷UI效果的jQuery滑块插件
45 0
|
2月前
|
XML 搜索推荐 前端开发
安卓开发中的自定义视图:打造个性化UI组件
在安卓应用开发中,自定义视图是一种强大的工具,它允许开发者创造独一无二的用户界面元素,从而提升应用的外观和用户体验。本文将通过一个简单的自定义视图示例,引导你了解如何在安卓项目中实现自定义组件,并探讨其背后的技术原理。我们将从基础的View类讲起,逐步深入到绘图、事件处理以及性能优化等方面。无论你是初学者还是有经验的开发者,这篇文章都将为你提供有价值的见解和技巧。
|
3月前
|
UED
「Mac畅玩鸿蒙与硬件31」UI互动应用篇8 - 自定义评分星级组件
本篇将带你实现一个自定义评分星级组件,用户可以通过点击星星进行评分,并实时显示评分结果。为了让界面更具吸引力,我们还将添加一只小猫图片作为评分的背景装饰。
110 6
|
3月前
|
前端开发 开发者
「Mac畅玩鸿蒙与硬件23」鸿蒙UI组件篇13 - 自定义组件的创建与使用
自定义组件可以帮助开发者实现复用性强、逻辑清晰的界面模块。通过自定义组件,鸿蒙应用能够提高代码的可维护性,并简化复杂布局的构建。本篇将介绍如何创建自定义组件,如何向组件传递数据,以及如何在不同页面间复用这些组件。
81 5
|
3月前
|
前端开发 开发者
「Mac畅玩鸿蒙与硬件22」鸿蒙UI组件篇12 - Canvas 组件的动态进阶应用
在鸿蒙应用中,Canvas 组件可以实现丰富的动态效果,适合用于动画和实时更新的场景。本篇将介绍如何在 Canvas 中实现动画循环、动态进度条、旋转和缩放动画,以及性能优化策略。
88 6
|
2月前
|
移动开发 前端开发 Java
Java最新图形化界面开发技术——JavaFx教程(含UI控件用法介绍、属性绑定、事件监听、FXML)
JavaFX是Java的下一代图形用户界面工具包。JavaFX是一组图形和媒体API,我们可以用它们来创建和部署富客户端应用程序。 JavaFX允许开发人员快速构建丰富的跨平台应用程序,允许开发人员在单个编程接口中组合图形,动画和UI控件。本文详细介绍了JavaFx的常见用法,相信读完本教程你一定有所收获!
1515 2
Java最新图形化界面开发技术——JavaFx教程(含UI控件用法介绍、属性绑定、事件监听、FXML)
|
3月前
|
搜索推荐 Android开发 开发者
探索安卓开发中的自定义视图:打造个性化UI组件
【10月更文挑战第39天】在安卓开发的世界中,自定义视图是实现独特界面设计的关键。本文将引导你理解自定义视图的概念、创建流程,以及如何通过它们增强应用的用户体验。我们将从基础出发,逐步深入,最终让你能够自信地设计和实现专属的UI组件。

热门文章

最新文章

  • 1
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 2
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 3
    【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
  • 4
    详解智能编码在前端研发的创新应用
  • 5
    巧用通义灵码,提升前端研发效率
  • 6
    智能编码在前端研发的创新应用
  • 7
    【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
  • 8
    大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
  • 9
    【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 10
    以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡