`

仿ios时间选择控件效果-滑动选择

 
阅读更多

 因项目需要那种可以通过手势滑动来选择月份的效果,所以动手做了个,代码如下:

<style type="text/css">
  .autoPlanBottomBox{
    width: 100%;
  }
  .bottom-box-body{
    background: #C9CDD3;
    position: relative;
  }
  .select-box-list{
    margin: 0 auto;
    text-align:center;
    
  }
  .select-box-list li{
    color: #898C90;
    font-size: 28px;
    line-height: 1.8em;
  }
  .select-box-list li.active{
    color: #484A4C;
  }
  .scale-box{
    position:absolute;
    overflow:hidden;
    width: 100%;
    text-align:center;
    background: #E0E3E6;
    z-index: 9999;

  }
  .scale-box .select-box-list{
    transition-property: transform; 
    transform-origin: 0px 0px 0px; 
    transform: translate3d(0px, -50px, 0);
  }
  .scale-box li{
    font-size:28px;
    line-height: 1.8em;
    color: #484A4C;
    transform: scale(1.2);
  }
  .rDialog-wrap{
    padding:0;
  }
</style>
<template>
<div class="rDialog autoPlanBottomBox" style="top: inherit;z-index: 10000; left: 0px; bottom: 0;display:none"><div class="rDialog-wrap">
  <div class="bottom-box-header" style="
background: #EEEFF0;line-height: 50px;color: #fff;"><span class="cancelBottomBox" style="float:left;color: #1782FC;width:30px;padding: 5px 20px">&lt;</span>
  <span class="confirmBottomBox" style="float:right;padding: 5px 20px;color: #1782FC;">确定</span><div class="clear" style="
    clear: both;
"></div>
  
  </div>
  <div class="bottom-box-body">
    <div class="scale-box">
    </div>
    <div class="wrapperBottom">
      <ul class="select-box-list">
        <li>&nbsp;</li>
        <li>&nbsp;</li>
        <li>请选择日期</li>
        <li data-date="1">每月1日</li>
        <li data-date="2">每月2日</li>
        <li data-date="3">每月3日</li>
        <li data-date="4">每月4日</li>
        <li data-date="5">每月5日</li>
        <li data-date="6">每月6日</li>
        <li data-date="7">每月7日</li>
        <li data-date="8">每月8日</li>
        <li data-date="9">每月9日</li>
        <li data-date="10">每月10日</li>
        <li data-date="11">每月11日</li>
        <li data-date="12">每月12日</li>
        <li data-date="13">每月13日</li>
        <li data-date="14">每月14日</li>
        <li data-date="15">每月15日</li>
        <li data-date="16">每月16日</li>
        <li data-date="17">每月17日</li>
        <li data-date="18">每月18日</li>
        <li data-date="19">每月19日</li>
        <li data-date="20">每月20日</li>
        <li data-date="21">每月21日</li>
        <li data-date="22">每月22日</li>
        <li data-date="23">每月23日</li>
        <li>&nbsp;</li>
        <li>&nbsp;</li>
      </ul>
    </div>
    
  </div>
  </div></div>
  <div class="rDialog-mask autoPlanBottomBox-mask" style="z-index: 9999;display:none"></div>
</template>

<script>
    import {iScroll} from '../libs/iscroll';
    /**
    * options 参数
    *    cancel  取消回调
    *    success 成功回调
    */
    function BottomBox(options){
        var self = this;
        self.settings = $.extend({initScrollIndex: 2}, options);
        $("body").off("click", ".cancelBottomBox").off("click", ".confirmBottomBox").on("click", ".cancelBottomBox", function(){
            self.hide();
            options.cancel && options.cancel();
        }).on("click", ".confirmBottomBox", function(){
            self.hide();
            options.success && options.success(self.getValue());
        });
    };

    BottomBox.prototype.show = function(){
        // initScrollIndex 初始选定的索引
        var self = this, initScrollIndex = this.settings.initScrollIndex;
        $(".autoPlanBottomBox,.autoPlanBottomBox-mask").show();
        var wrapperEl = $(".wrapperBottom"); 
        // 如果有传date参数,则选定对应的那天
        if(this.settings.date){
            initScrollIndex = wrapperEl.find("li[data-date='"+ this.settings.date +"']").index();
        }
        $(".scale-box").append(wrapperEl.children().clone());
        setTimeout(function(){
            // UI初始化
            var scaleBox = $(".scale-box .select-box-list"), scale = $(".select-box-list").eq(0).height()/$(".select-box-list").eq(1).height();
            var liHeight = wrapperEl.find("li").eq(0).height();
            self.scaleBoxHeight = liHeight * scale;
            wrapperEl.css("height", (liHeight * 5) + 'px');
            $(".scale-box").css({"height": self.scaleBoxHeight + "px", top: (self.scaleBoxHeight * 2) + "px"});

            wrapperEl.css("height", liHeight * 5);
            $(".autoPlanBottomBox,.autoPlanBottomBox-mask").show();
            // 初始化iscroll
            self.bottomScroller = new iScroll(wrapperEl[0],{
                linkWrapper: scaleBox[0],
                linkWrapperTop: -liHeight*2,
                hScroll: false,
                vScroll: true,
                hScrollbar: false,
                vScrollbar: false,
                snap: "li",
                onScrollEnd: function(){
                    self.translateY = Math.abs((this.y-liHeight*2) * scale);
                }
            });
            self.bottomScroller.scrollToElement(wrapperEl.find("li").eq(initScrollIndex)[0], 200);
        }, 100);
    };
    BottomBox.prototype.hide = function(){
        $(".autoPlanBottomBox,.autoPlanBottomBox-mask").hide();
    };
    BottomBox.prototype.getValue = function(){
        var index = parseInt(this.translateY / this.scaleBoxHeight, 10);
        return $(".wrapperBottom").find("li").eq(index).data("date");
    };
    export default {
        ready (){
    		
    	},
        data (){
            return {
                
            }
        },
        methods: {
            init: function(options){
                this.bottomBoxObj = new BottomBox(options);
            },
            show: function(){
                this.bottomBoxObj.show();
            },
            hide: function(){
                this.bottomBoxObj.hide();
            },
            getValue: function(){
                return this.bottomBoxObj.getValue();
            }
        }
    }
</script>

 

分享到:
评论

相关推荐

    仿ios开关选择控件效果

    本文将深入探讨“仿iOS开关选择控件效果”,这是一种在Android或者Web应用中模仿iOS系统中开关样式的设计,以提供一致且直观的操作体验。 开关控件在移动应用中广泛使用,用于开启或关闭特定功能。这种控件通常由两...

    android仿IOS时间选择控件

    本教程将深入探讨如何在Android中实现一个仿iOS的时间选择控件,该控件允许用户通过点击按钮后弹出的时间选择对话框进行时间选择。 首先,我们需要了解iOS时间选择器的基本原理,它通常被称为"Picker View"或"轮盘...

    仿ios开关选择控件

    仿iOS开关选择控件是一种常见的设计元素,常用于应用或网站中,让用户快速开启或关闭某个功能。这个控件的设计风格借鉴了苹果iOS系统的开关样式,具有简洁、直观的特点。在Android开发中,我们可以使用`ToggleButton...

    仿ios日期选择控件

    本教程将深入探讨如何在Android中实现一个仿iOS风格的日期选择控件。 首先,iOS的日期选择器通常呈现出一个简洁、易于操作的界面,用户可以通过滑动来选择日期。在Android上,我们可以使用`DatePicker`控件来实现...

    仿iOS时间选择控件,实现三级联动以及数字滚轮

    为了在非iOS平台上实现类似的交互体验,我们可以创建一个仿iOS时间选择控件,这个控件通常会包含三级联动的数字滚轮,分别用于选择年、月、日以及小时和分钟。在本文中,我们将深入探讨如何实现这样的功能。 首先,...

    安卓开发-高仿ios时间选择控件timepicker

    本篇将围绕"安卓开发-高仿ios时间选择控件timepicker"这一主题,深入探讨如何在Android中实现类似iOS的三级联动时间选择器,并基于`wheelview`库来构建。 1. **iOS时间选择器特点**: iOS的时间选择器通常具有上下...

    仿ios日期滑动(滚轮)选择器

    在本文中,我们将深入探讨如何实现一个仿iOS的日期滑动选择器,并探讨其核心技术和设计要点。 首先,我们需要理解`UIPickerView`的基本原理。它是iOS中的一个控件,用于展示一系列可滚动的行数据,用户可以通过上下...

    移动端日期和时间选择控件lCalendar-master.zip

    `lCalendar-master`是一个专为移动端设计的日期和时间选择器,适用于Android和iOS等平台。这个项目为开发者提供了易于集成和自定义的解决方案,同时也为设计者提供了良好的交互体验参考。 1. **项目结构**: - `...

    Android-可实现三级联动的选择器高仿iOS的滚轮控件字体大小自适应

    在Android开发中,有时我们需要创建类似iOS风格的滚轮选择器,这种控件通常用于实现多级联动选择,比如省份-城市-区县的选择。在本案例中,我们讨论的是一个名为"Android-可实现三级联动的选择器高仿iOS的滚轮控件...

    仿ios滑动控件

    在Android应用开发中,"仿ios滑动控件"是一个常见的需求,主要是为了提供与iOS设备上相似的用户体验。这个控件通常指的是实现类似于iOS中PickerView或SegmentedControl的功能,它允许用户通过滑动来选择不同的选项。...

    仿ios滚轮选择控件

    "仿iOS滚轮选择控件"是一种在非iOS系统中模仿苹果设备上常见滚动选择器的设计,这种控件通常用于时间选择、选项选择等场景,以其简洁、直观的交互方式受到用户喜爱。本篇文章将详细介绍如何实现这样的控件,并探讨其...

    仿IOS滑动选择PickerDialog

    这种控件通常用于时间选择(TimePicker)或日期选择(DatePicker),但它的灵活性在于可以自定义显示的内容,不限于时间和日期。 首先,我们来了解`NumberPicker`这个核心组件。`NumberPicker`是Android SDK中的一...

    ios-滑动选择.zip

    5. **动画效果**:为了提供更好的用户体验,滑动选择可能包含一些动画效果,如平滑的高亮过渡,或者在选择和取消选择时的缩放效果。这些可以通过Core Animation或者UIKit提供的动画API来实现。 6. **性能优化**:在...

    ios-UiCollectionView嵌套TableView---滑动做题.zip

    首先,`UICollectionView`是苹果iOS SDK提供的一种布局视图控件,它可以灵活地展示多行多列的数据,而且支持自定义布局,这使得它非常适合用来构建类似网格或瀑布流的效果。而`UITableView`则是用于展示单一列表数据...

    Android 仿IOS3D滚轮选择器

    "Android 仿IOS3D滚轮选择器"就是这样一个例子,它试图在Android平台上模仿iOS系统的三维滚轮选择器效果,以创建一个类似对话框的组件。这个组件能够帮助用户通过滚动和点击来选取特定的数据,适用于日期选择、选项...

    仿IOS日期控件(增加上下午,时分选择)

    在IT行业中,日期控件是用户界面设计中的一个重要组成部分,特别是在移动应用开发中。iOS设备上的日期选择器以其简洁、直观的设计受...通过精确地复制这些特点,可以在非iOS平台上为用户提供一致且友好的时间选择体验。

    仿ios全屏滑动解锁控件

    总的来说,仿iOS全屏滑动解锁控件主要涉及到Android自定义View的开发,包括绘制图形、处理触摸事件、动画效果以及逻辑判断等多个方面。通过这样的实现,不仅能让Android应用具备独特的用户体验,还能提高用户操作的...

    Android应用源码仿ios音量调节的效果-IT计算机-毕业设计.zip

    这个"Android应用源码仿ios音量调节的效果"项目提供了一个示例,帮助开发者理解如何在Android平台上实现类似iOS的音量滑动条控件。下面将详细解析相关知识点。 1. 自定义View:iOS的音量调节滑块通常具有独特的视觉...

    WPF 模仿IOS 安卓 滚动时间选择

    在本文中,我们将深入探讨如何在Windows ...总的来说,模仿iOS和Android的时间选择界面在WPF中是一个挑战性的任务,但通过利用WPF的强大学习库和丰富的UI设计工具,我们可以创建出既美观又功能强大的时间选择控件。

    ios-仿滴滴打车时间选择控件.zip

    本篇将详细介绍一个仿滴滴打车时间选择控件的实现,该控件允许用户方便地选取指定的时间,增强用户体验。这个控件的源代码可以在GitHub上找到,仓库名为`TimePickerView`,由appll开发者创建。 **1. 时间选择器概述...

Global site tag (gtag.js) - Google Analytics