类似ios select下拉选择框的实现

最新推荐文章于 2024-08-08 07:50:24 发布

置顶可乐代码君

最新推荐文章于 2024-08-08 07:50:24 发布

阅读量1w

点赞数 1

分类专栏：前端开发文章标签： ios select

本文链接：https://blog.csdn.net/fw118958/article/details/74941156

版权

前端开发专栏收录该内容

3 篇文章 0 订阅

订阅专栏

select下拉选择标签在移动端是很常用的，但是不同的浏览器展示的效果都不一样，其中iOS中的效果还是令人比较满意的，所以产品设计往往给出这样的一种设计。。百度中这种插件也比较多，比较复杂，最近整理了一下。
实现效果：
这里写图片描述

原理：

1。定义每行的高度是40px，在touchend实践出发时，计算出当前div的scrollTop.判断是否已经滑动结束。如果滑动结束，四舍五入算出当前的高度距离第几个最近，则设置div的scrolltop.如果滑动未结束。计算当前的scrollTop,与100毫秒之后的scrollTop值是否相等。
以下是源代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>活动</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .bottom {
            border-top: 1px solid #959899;
            position: fixed;
            bottom: 0px;
            left: 0px;
            width: 100%;
            padding-top: 40px;
        }

        .slide {
            height: 40px;
            overflow: scroll;
            position: relative;
            padding: 80px 0;
            float: left;
            left: 15px
        }

        .item {
            padding: 0 10px;
        }

        .slide2 {
            height: 40px;
            overflow: scroll;
            position: relative;
            padding: 80px 0;
            float: right;
            right: 15px;
        }

        .centerDiv {
            border-top: 1px solid #c5c5c5;
            border-bottom: 1px solid #c5c5c5;
            position: fixed;
            bottom: 80px;
            width: 100%;
            height: 40px;
            z-index: 1;
            font-size:16px;
        }

        .main {
            background-color: #e2e2e2;
            line-height: 40px;
            text-align: center;
            z-index: 1;
            position: relative;

        }

        .head {
            line-height: 40px;
            text-align: right;
            color: #007bf5;
            position: absolute;
            right: 10px;
            top: 0px;
            z-index: 2;
            background-color: white;
        }


    </style>
</head>
<body>
<div class="bottom">
    <div class="head" onclick="hideDiv()">完成</div>
    <div id="mainSlide">
        <div class="main">
            <div class="slide">
            </div>
            <div class="slide2">
            </div>
            <div style="clear: both;"></div>
        </div>
        <div class="centerDiv"></div>
    </div>
</div>
</body>
<script src="../js/jquery.min.js"></script>
<script src="../js/base.js"></script>
<script>
    var listData = {};
    function init() {
        ajaxPost({}, "sqyc/cityList.api", function (data) {
            var list = data.cityList;
            for (var k in list) {
                $("<div class='item'/>").text(list[k].cityName).appendTo($(".slide"));
            }
            touchStart();
            var event = document.createEvent('Events');
            event.initEvent('touchend', true, true);
            document.getElementById("mainSlide").dispatchEvent(event);
        })
    }
    init();
    var index = 0;
    var startx = 0, starty = 0, endx = 0, endy = 0, direction = 1;
    function touchStart() {
        document.getElementById("mainSlide").addEventListener("touchstart", function (event) {
            startx = event.touches[0].clientX;
            starty = event.touches[0].clientY;
        }, false);
        document.getElementById("mainSlide").addEventListener("touchmove", function (event) {
        }, false);
        document.getElementById("mainSlide").addEventListener("touchend", function (event) {
            event.preventDefault();
            var height = $(".slide").scrollTop();
            if (startx < $(".slide").width()) {
                isEnd(height, function () {
                    $(".slide2").children().remove();
                    var str = $(".slide .item:eq(" + (endIndex - 1) + ")").text();
                    if (!listData[str])
                        ajaxPost({cityName: str}, "sqyc/cityAirport.api", function (data) {
                            var list = data.airportList.airports;
                            listData[str] = list;
                            for (var k in list) {
                                $("<div class='item'>").text(list[k].airportName).attr({
                                    "lng":"",
                                    "lat":""

                                }).appendTo($(".slide2"));
                            }
                        })
                    else {
                        var list = listData[str];
                        for (var k in list) {
                            $("<div class='item'>").text(list[k].airportName).appendTo($(".slide2"));
                        }
                    }
                }, "slide");
            }
            else {
                var height1 = $(".slide2").scrollTop();
                isEnd(height1, function(){
                    $(".slide2 .item:eq(" + (endIndex - 1) + ")").text();
                }, "slide2");
            }
        }, false);
    }

    var endIndex = 0;
    function isEnd(height, endFun, className) {
        setTimeout(function () {
            var height1 = $("." + className).scrollTop();
            if (height == height1) {
                var n = parseInt((height + 60) / 40);
                $("." + className).animate({
                    scrollTop: 40 * n - 40
                }, 10);
                endIndex = n;
                if (endFun)
                    setTimeout(function () {
                        endFun();
                    }, 10)
            } else {
                isEnd(height1, endFun, className);
            }
        }, 50);
    }
    function hideDiv(){
        $(".bottom").hide();
    }

</script>
</html>