html, css, and native js build simple functions for mobile pages, switch pages, link drop-down boxes, simulate data list rendering, customize pop-up boxes, etc.

Mobile 2023-06-12 11:51:12 views: null

HTML, css, and native js build mobile pages, simple functions, page display and hiding, drop-down box linkage, simulated data list rendering, custom pop-up boxes, etc. The effect diagram is as follows:

 code:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="#">
    <title>demo</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        body,
        html {
            height: 100%;
            -webkit-tap-highlight-color: transparent;
            box-sizing: border-box;
            overflow-x: hidden;
        }

        .container {
            position: relative;
            max-width: 450px;
            margin: 0 auto;
            border: 1px solid #e5e5e5;
            height: 100%;
            box-sizing: border-box;
            overflow-x: hidden;
            background-color: #fdfbfb;
        }

        a {
            text-decoration: none;
        }

        .navbar {
            background: #0dc7c7;
            text-align: center;
            color: #fff;
            position: fixed;
            width: 100%;
            height: 2.5em;
            z-index: 999;
            line-height: 2.5em;
            top: 0;
            max-width: 450px;
        }

        .weui-tab {
            position: relative;
            height: 100%;
        }

        .weui-tab__bd {
            box-sizing: border-box;
            height: 100%;
            padding-bottom: 50px;
        }

        .weui-tab__bd .weui-tab__bd-item {
            display: none;
            height: 100%;
            overflow: auto;
        }

        .weui-tab__bd .weui-tab__bd-item.weui-tab__bd-item--active {
            display: block;
        }

        .weui-tabbar {
            position: fixed;
            display: -webkit-box;
            display: -webkit-flex;
            display: flex;
            position: absolute;
            z-index: 500;
            bottom: 0;
            width: 100%;
            /* background-color: #f7f7fa; */
            background-color: #ededed;
        }

        .weui-tabbar:before {
            content: " ";
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            height: 1px;
            border-top: 1px solid #c0bfc4;
            color: #c0bfc4;
            -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
            -webkit-transform: scaleY(.5);
            transform: scaleY(.5);
        }

        .weui-tabbar__item {
            padding: 0;
            position: relative;
            display: block;
            -webkit-box-flex: 1;
            -webkit-flex: 1;
            flex: 1;
            font-size: 0;
            color: #999;
            text-align: center;
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        }

        .weui-tabbar__label {
            text-align: center;
            color: #555;
            font-size: 16px;
            line-height: 1.8;
            height: 3rem;
            line-height: 3rem;
        }

        .weui-tabbar__item.weui-bar__item--on .weui-tabbar__label {
            text-align: center;
            color: #999;
            font-size: 16px;
            color: #0dc7c7;
        }

        .weui-tab .weui-tab__bd .weui-cells__title {
            padding-left: 15px;
            color: #999;
            font-size: 14px;
            padding-top: 10px;
        }

        .weui-select {
            -webkit-appearance: none;
            border: 0;
            outline: 0;
            background-color: transparent;
            width: 100%;
            font-size: inherit;
            height: 45px;
            line-height: 45px;
            position: relative;
            z-index: 1;
            padding-left: 15px;
            height: 42px;
            padding-right: 30px;
        }

        .weui-cell_select .weui-cell__bd:after {
            content: " ";
            display: inline-block;
            height: 6px;
            width: 6px;
            border-width: 2px 2px 0 0;
            border-color: #c8c8cd;
            border-style: solid;
            -webkit-transform: matrix(.71, .71, -.71, .71, 0, 0);
            transform: matrix(.71, .71, -.71, .71, 0, 0);
            position: relative;
            top: -2px;
            position: absolute;
            top: 50%;
            right: 15px;
            margin-top: -4px;
        }

        .weui-loadmore {
            width: 65%;
            margin: 1.5em auto;
            line-height: 1.6em;
            font-size: 14px;
            text-align: center;
            border-top: 1px solid #e5e5e5;
            margin-top: 12em;
        }

        .weui-loadmore_line .weui-loadmore__tips {
            position: relative;
            top: -0.9em;
            padding: 0 0.55em;
            background-color: #fff;
            color: #999;
            display: inline-block;
            vertical-align: middle;
        }

        .weui-cell {
            padding: 10px 15px;
            position: relative;
            display: -webkit-box;
            display: -webkit-flex;
            display: flex;
            -webkit-box-align: center;
            -webkit-align-items: center;
            align-items: center;
            padding: 0;
        }

        .weui-cell:before {
            content: " ";
            position: absolute;
            left: 0;
            top: 0;
            right: 15px;
            height: 1px;
            border-top: 1px solid #e5e5e5;
            color: #e5e5e5;
            -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
            -webkit-transform: scaleY(.5);
            transform: scaleY(.5);
            left: 15px;
            z-index: 2;
        }

        .weui-media-box__title {
            font-weight: 400;
            font-size: 17px;
            width: auto;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            word-wrap: normal;
            word-wrap: break-word;
            word-break: break-all;
            font-size: 16px;
        }

        .weui-cells {
            margin-top: 1.17647059em;
            /* background-color: #fff; */
            line-height: 1.47058824;
            font-size: 17px;
            overflow: hidden;
            position: relative;
            margin-top: 2.5rem;
            position: fixed;
            width: 100%;
            z-index: 999;
            max-width: 446px;
            background-color: #fdfbfb;
        }

        .weui-cells:before {
            top: 0;
            border-top: 1px solid #e5e5e5;
            -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
            -webkit-transform: scaleY(.5);
            transform: scaleY(.5);
        }

        .weui-cells:after,
        .weui-cells:before {
            content: " ";
            position: absolute;
            left: 0;
            right: 0;
            height: 1px;
            color: #e5e5e5;
            z-index: 2;
        }

        .weui-flex {
            display: flex;
        }

        .weui-flex__item {
            -webkit-box-flex: 1;
            -webkit-flex: 1;
            flex: 1;
        }

        .weui-cell__bd {
            -webkit-box-flex: 1;
            -webkit-flex: 1;
            flex: 1;
        }

        #InputInterfaceList {
            margin-top: 120px;
        }

        .padding2 {
            padding: 6px 15px;
        }

        .weui-btn {
            position: relative;
            display: block;
            margin-left: auto;
            margin-right: auto;
            padding-left: 14px;
            padding-right: 14px;
            box-sizing: border-box;
            font-size: 18px;
            text-align: center;
            text-decoration: none;
            line-height: 2.55555556;
            border-radius: 5px;
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
            overflow: hidden;
            display: inline-block;
            padding: 0 1.32em;
            line-height: 2.3;
            font-size: 13px;
            color: #0dc7c7;
            border: 1px solid #0dc7c7;
            background-color: transparent;
            cursor: pointer;
        }

        .weui-btn:hover {
            color: #fff;
            background-color: #0dc7c7;
        }

        #secenList {
            margin-top: 120px;
        }

        .weui-media-box__desc {
            color: #999999;
            font-size: 13px;
            line-height: 1.2;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
        }

        .status-light {
            display: inline-block;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            margin-right: 5px;
        }

        .alert-tips {
            display: inline-block;
            position: absolute;
            z-index: 888;
            top: 35%;
            right: 50%;
            text-align: center;
            padding: 10px 20px;
            border-radius: 5px;
            color: rgb(138, 109, 59);
            background-color: rgb(252, 248, 227);
            border-color: rgb(250, 235, 204);
            /* transition: all 3s ease 0s; */
            margin-right: -80px;
            width: 120px;
        }

        .info_css {
            color: #31708f;
            background-color: #d9edf7;
            border-color: #bce8f1
        }

        .danger_css {
            color: #a94442;
            background-color: #f2dede;
            border-color: #ebccd1;
        }

        .success_css {
            color: #3c763d;
            background-color: #dff0d8;
            border-color: #d6e9c6;
        }

        .warning_css {
            color: #8a6d3b;
            background-color: #fcf8e3;
            border-color: #faebcc;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="navbar">
            <span id="navbarTit">页面一</span>
        </div>
        <div class="weui-tab">
            <div class="weui-tab__bd">
                <div id="pageOneTab" class="weui-tab__bd-item weui-tab__bd-item--active">
                    <div class="weui-cells">
                        <div class="weui-flex">
                            <div class="weui-flex__item">
                                <div class="weui-cell weui-cell_select">
                                    <div class="weui-cell__bd">
                                        <select class="weui-select" name="wgroupId" id="wgroupId"
                                            onchange="wgroupSelectChange(this)">
                                            <option value="1">下拉框1</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="weui-flex__item">
                                <div class="weui-cell weui-cell_select">
                                    <div class="weui-cell__bd">
                                        <select class="weui-select" name="select2" id="pageOneList"
                                            onchange="pageOneListSelect(this)">
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="weui-cells__title">数据列表：</div>
                    </div>
                    <div id="InputInterfaceList">
                        <div class="weui-loadmore weui-loadmore_line">
                            <span class="weui-loadmore__tips">请登录</span>
                        </div>
                    </div>
                </div>
                <div id="pageTwoTab" class="weui-tab__bd-item">
                    <div class="weui-cells">
                        <div class="weui-cell weui-cell_select">
                            <div class="weui-cell__bd">
                                <select class="weui-select" name="sgroupId" id="sgroupId"
                                    onchange="sgroupSelectChange(this)">
                                    <option value="1">下拉框1</option>
                                </select>
                            </div>
                        </div>
                        <div class="weui-flex">
                            <div class="weui-flex__item">
                                <div class="weui-cells__title">数据列表：</div>
                            </div>
                            <div class="weui-flex__item" style="text-align: end;padding-right: 30px;">
                                <div class="weui-cells__title">默认序号：<span id="defaltpageTwo">1</span></div>
                            </div>
                        </div>
                    </div>
                    <div id="secenList">
                        <div class="weui-loadmore weui-loadmore_line">
                            <span class="weui-loadmore__tips">请登录</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="weui-tabbar">
                <a href="#" class="weui-tabbar__item weui-bar__item--on" id="pageOneTabbar" onclick="pageOneInit(this)"
                    style="border-right: 1px solid #c0bfc4;">
                    <p class="weui-tabbar__label">页面一</p>
                </a>
                <a href="#" class="weui-tabbar__item" id="pageTwoTabbar" onclick="pageTwoInit(this)">
                    <p class="weui-tabbar__label">页面二</p>
                </a>
            </div>
        </div>
    </div>
</body>

</html>
<script>
    // let FileIP = document.domain;
    let pid = 1;//当前组
    let pageOneList = [];
    let curWinId = "";
    let inputCardPortList = [];
    let devicepageTwoLists = [];
    let tabbar = document.getElementsByClassName("weui-tabbar__item");
    let pageOneTabbar = document.getElementById("pageOneTabbar");
    let pageTwoTabbar = document.getElementById("pageTwoTabbar");
    let navbarTit = document.getElementById("navbarTit");
    let pageOneTab = document.getElementById("pageOneTab");
    let pageTwoTab = document.getElementById("pageTwoTab");
    let pageOneSelectView = document.getElementById("pageOneList");
    let InputInterfaceListView = document.getElementById("InputInterfaceList");
    let wgroupSelect = document.getElementById("wgroupId");
    let sgroupSelect = document.getElementById("sgroupId");
    let gSelectList = [];
    let secenListView = document.getElementById("secenList");

    window.onload = function () {
        getUgList();
        pageOneInit();
    };

    function getUgList() {
        gSelectList.length = 0;
        for (var i = 0; i < 3; i++) {
            gSelectList.push(i + 1);
        }
        updateGroupSelect();
    }

    //页面一初始化
    function pageOneInit(e) {
        navbarTit.innerText = "页面一";
        pageOneTabbar.className = "weui-tabbar__item weui-bar__item--on";
        pageTwoTabbar.className = "weui-tabbar__item";
        pageOneTab.style.display = "block";
        pageTwoTab.style.display = "none";
        getpageOneDatas();
        updateSelectWin();
        getInputCardData();
        if (wgroupSelect.value != pid) {
            wgroupSelect.value = pid;
            wgroupSelectChange(wgroupSelect);
        }
        curWinId = "";
    }

    //页面二初始化
    function pageTwoInit(e) {
        navbarTit.innerText = "页面二";
        pageTwoTabbar.className = "weui-tabbar__item weui-bar__item--on";
        pageOneTabbar.className = "weui-tabbar__item";
        pageOneTab.style.display = "none";
        pageTwoTab.style.display = "block";
        initDevicepageTwo();
        updatepageTwoView();
        if (sgroupSelect.value != pid) {
            sgroupSelect.value = pid;
            sgroupSelectChange(wgroupSelect);
        }
    }

    function updateGroupSelect() {
        wgroupSelect.innerHTML = "";
        sgroupSelect.innerHTML = "";
        let ht = "";
        for (var i = 0; i < gSelectList.length; i++) {
            var optionScreen = "<option value='" + gSelectList[i] + "'>" + "选项 " + gSelectList[i] + "</option>";
            ht += optionScreen;
        }
        wgroupSelect.innerHTML = ht;
        sgroupSelect.innerHTML = ht;
    }

    function wgroupSelectChange(e) {
        pid = parseInt(e.value);
        getpageOneDatas();
        updateSelectWin();
        curWinId = 0;
    }

    function sgroupSelectChange(e) {
        pid = parseInt(e.value);
        initDevicepageTwo();
        updatepageTwoView();
    }

    function getpageOneDatas() {
        pageOneList = [];
        // var out = [3, 2, 1 ,3];
        // out.shift();
        // out.sort(sortNumber);//从小到大排序
        let out = [{ "id": 1, "pid": 1, "type": 1 }, { "id": 2, "pid": 2, "type": 3 }, { "id": 3, "pid": 2, "type": 2 }, { "id": 4, "pid": 2, "type": 2 }, { "id": 5, "pid": 3, "type": 1 }];
        if (out.length > 0) {
            for (var i = 0; i < out.length; i++) {
                var s = new MyWin();
                s.id = out[i].id;
                s.pid = out[i].pid;
                s.type = out[i].type;
                s.name = "子选项" + out[i].id + " (列表项" + out[i].type + ")";
                pageOneList.push(s);
            }
        }
    }

    function updateSelectWin() {
        let pageOneBypidList;
        pageOneSelectView.innerHTML = "";
        var optionScreen = document.createElement('option');
        optionScreen.value = 0;
        optionScreen.innerText = "请选择";
        pageOneSelectView.appendChild(optionScreen);
        pageOneBypidList = pageOneList.filter(function (item) {
            return item.pid == pid;
        });

        for (var i = 0; i < pageOneBypidList.length; i++) {
            var elem_option = document.createElement('option');
            elem_option.value = pageOneBypidList[i].id;
            elem_option.innerText = pageOneBypidList[i].name;
            pageOneSelectView.appendChild(elem_option);
        }
    }

    function pageOneListSelect(e) {
        if (e.value == 0) {
            curWinId = 0;
            return false;
        } else {
            curWinId = parseInt(e.value);
        }
    }

    function getInputCardData() {
        let out1 = [{ "status": 0, "remark": "备注1", "type": 1 }, { "status": 7, "remark": "", "type": 2 }, { "status": 0, "remark": "备注2", "type": 3 }, { "status": 0, "remark": "", "type": 4 }];
        InputInterfaceListView.innerHTML = "";
        inputCardPortList.length = 0;
        var id = 0;
        if (out1.length > 0) {
            for (var i = 0; i < out1.length; i++) {
                id++;
                var svp = new vp();
                svp.id = id;
                svp.type = out1[i].type;
                svp.status = out1[i].status;
                svp.name = "列表项" + id;
                let r = out1[i].remark;
                if (!r) {
                    svp.remark = "暂无备注";
                } else {
                    svp.remark = r;
                }
                inputCardPortList.push(svp);
                let bg = svp.status != 7 ? "red" : "green";
                var html_l = "           <div class='weui-cell padding2' curType='" + svp.type + "' id='inputCard" + svp.id + "' onclick='changepageOneSrc(event)'>" +
                    "                    <div class='weui-cell__bd'>" +
                    "                        <h4 class='weui-media-box__title'>" + svp.name + "</h4>" +
                    "                        <p class='weui-media-box__desc' style='display: table-cell;'><span class=\"status-light\" style='background:" + bg + "'></span>" + svp.remark + "</p>" +
                    "                    </div>" +
                    "                    <div class='weui-cell__ft'>" +
                    "                        <button class='weui-btn'>设置</button>" +
                    "                    </div>" +
                    "                    </div>" +
                    "                </div>";
                InputInterfaceListView.innerHTML += html_l;
            }
        } else {
            var noData = " <div class='weui-loadmore weui-loadmore_line'><span class='weui-loadmore__tips'>暂无数据</span></div>";
            InputInterfaceListView.innerHTML = noData;
        }
    }
    //加载页面二列表
    function initDevicepageTwo() {
        devicepageTwoLists = [];
        let data = [{ "id": 1, "name": "11", "pid": 1 }, { "id": 2, "name": "", "pid": 2 }, { "id": 3, "name": "33", "pid": 2 }];
        for (let i = 0; i < data.length; i++) {
            let item = data[i];
            let pageTwoInfoTemp = new pageTwoInfo(item.id, item.name, item.pid);
            devicepageTwoLists.push(pageTwoInfoTemp);
        }
    }
    //更新页面二列表视图
    function updatepageTwoView() {
        secenListView.innerHTML = "";
        let list = devicepageTwoLists.filter(function (item) {
            return item.pid == pid;
        })
        if (list.length > 0) {
            for (let i = 0; i < list.length; i++) {
                let sname = "数据" + list[i].id;
                let l_HTML = "         <div class='weui-cell padding2' id='pageTwo" + list[i].id + "' onclick='changepageTwo(event)'>" +
                    "                    <div class='weui-cell__bd'>" +
                    "                        <h4 class='weui-media-box__title'>" + sname + "</h4>" +
                    "                        <p class='weui-media-box__desc' style='display: table-cell;'>" + list[i].name + "</p>" +
                    "                    </div>" +
                    "                    <div class='weui-cell__ft'>" +
                    "                        <button href='javascript:;' class='weui-btn' class='show-actions'>设置</button>" +
                    "                    </div>" +
                    "                </div>";
                secenListView.innerHTML += l_HTML;
            }
        } else {
            let noData = "<div class='weui-loadmore weui-loadmore_line'>" +
                "                    <span class='weui-loadmore__tips'>暂无数据</span>" +
                "                </div>";
            secenListView.innerHTML += noData;
        }
    }

    function changepageOneSrc(event) {
        var n = event.currentTarget.id.replace(/[^0-9]/ig, "");
        clickType = event.currentTarget.getAttribute("type");
        let children = InputInterfaceListView.childNodes;
        for (let i = 0; i < children.length; i++) {
            if (children[i].nodeType === 1) {
                children[i].style.background = "#fff";
            }
        }
        event.currentTarget.style.background = "#c9fffd";
        if (event.target.className === "weui-btn") {
            if (curWinId == 0 || curWinId == undefined) {
                alertTips('请先选择再进行操作!）', 'warning');
                return;
            }
            var sub = pageOneList.filter(function (item) {
                return item.id === curWinId;
            });
            sub = sub[0];
            var vp = inputCardPortList.filter(function (item) {
                return item.id == n;
            });
            vp = vp[0];
            if (vp.type !== sub.type) {
                alertTips("子选项" + (curWinId) + "切换为:" + vp.name, 'success');
                for (var i = 0; i < pageOneList.length; i++) {
                    if (pageOneList[i].id == curWinId) {
                        pageOneList[i].inslot = vp.slot;
                        pageOneList[i].inport = vp.port;
                        pageOneList[i].name = "子选项" + curWinId + " (" + vp.type + ")";
                        pageOneList[i].intype = vp.type;
                    }
                }
                let index = pageOneSelectView.selectedIndex;
                pageOneSelectView.options[index].text = "子选项" + curWinId + " (" + vp.name + ")";
            } else {
                alertTips("子选项" + curWinId + "当前已为" + vp.name, 'warning');
            }
        }
    }
    var curpageTwoId;//点击当前id
    function changepageTwo(event) {
        curpageTwoId = event.currentTarget.id.replace(/[^0-9]/ig, "");
        let children = secenListView.childNodes;
        for (let i = 0; i < children.length; i++) {
            if (children[i].nodeType === 1) {
                children[i].style.background = "#fff";
            }
        }
        event.currentTarget.style.background = "#c9fffd";
        if (event.target.className === "weui-btn") {
            alertTips("设置" + curpageTwoId, "success");
        }
    }

    function pageTwoInfo(id, name, pid) {
        var that = this;
        this.id = id;
        this.name = name;
        this.pid = pid;
    }

    function MyWin(name, id, type, pid) {
        this.name = name;
        this.id = id;
        this.pid = pid;
        this.type = type;
    }
    function vp(name, remark, type, id, status) {
        this.name = name;
        this.remark = remark;
        this.id = id;
        this.type = type;
        this.status = status;
    }

    //自定义弹框
    function alertTips(str, status) {
        let add_alert = window.document.createElement("span");
        add_alert.innerText = str;
        add_alert.className = "alert-tips";
        if (status === 'success') {
            add_alert.className += ' success_css';
        } else if (status === 'info') {
            add_alert.className += ' info_css';
        } else if (status === 'danger') {
            add_alert.className += ' danger_css';
        } else if (status === 'warning') {
            add_alert.className += ' warning_css';
        }
        document.body.appendChild(add_alert);
        setTimeout(() => {
            let index = 10;
            let interval = setInterval(function () {
                if (index === 0) {
                    clearInterval(interval);
                    add_alert.remove();
                }
                add_alert.style.opacity = index / 10;
                console.log('===>', index);
                index--;
            }, 50)
        }, 1000);
    }

    function sortNumber(a, b) {
        return a > b ? 1 : -1
    }
    
</script>

Guess you like

Origin blog.csdn.net/qq_40015157/article/details/129951343
Recommended
Ranking
SpringBoot-integrate redis
[Sword pointing to offer] Interview question 03: Repeated numbers in an array
Arrangement "Offer Penalty for prove safety" string
Browser prevent the automatic generation of fill and Echo have been saved account solutions
Work hard and never slacken——2022 Yinmai Information Year-End Summary
Install jdk7 on Linux system
App common dependency management tools
EduCoder-Web程序设计基础-html5— 给表单组件添加说明-第1关：label标签相关概念
Machine learning - clustering - density clustering algorithm notes
Ant's large model is exposed, AI+ finance enters the "big model" era
Daily
More
2024-04-30(36)
2024-04-29(5)
2024-04-28(12)
2024-04-27(29)
2024-04-26(22)
2024-04-25(32)
2024-04-24(30)
2024-04-23(30)
2024-04-22(5)
2024-04-21(0)

Code World

© 2018 codetd.com