類似ios select下拉選擇框的實現

阿新 • • 發佈：2018-12-29

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>

類似ios select下拉選擇框的實現

類似ios select下拉選擇框的實現

select下拉選擇框實現迴圈遍歷資料庫

Select下拉選擇框

Struts2中的ognl標籤介紹（property標籤、iterator標籤、if/elseif/else標籤、url標籤、url標籤、radio單選框、select下拉選擇框）

如何設定Select下拉選擇框(選單)的樣式

jqGrid 單元格編輯自定義下拉選擇框動態資料來源通用實現

微信小程式下拉選擇框—相當於網頁的select

下拉選擇框select的處理

jeecg3.7中DictSelect數據字典下拉選擇框的用法

Html頁面中select下拉列表框別樣用法，一個方法一勞永逸。

微信小程序的按下擡起事件，下拉選擇框的事件及點擊確定的方法函數，獲取時間的方法，省市區的方法。

django前端頁面下拉選擇框預設值設定

UI標籤庫專題十一 JEECG智慧開發平臺 DictSelect 資料字典下拉選擇框

基於angularjs的下拉選擇框封裝

select2 智能補全模糊查詢select2的下拉選擇框使用

input + div 下拉選擇框

頁面下拉選擇框增加“全部”項並設定為預設解決辦法

自定義微信小程式下拉選擇框元件

微信小程式之自定義select下拉選項框元件

自定義控制元件之組合式控制元件下拉選擇框

類似ios select下拉選擇框的實現

相關推薦