美文网首页
web 前端入门之底部三级选择

web 前端入门之底部三级选择

作者: litielongxx | 来源:发表于2018-04-28 11:38 被阅读0次

    前言

    页面中存在不少的多级联动功能,比如省市级或者存在某种层级的选择联动,这次就基于bootstrap+jq+transition实现简单的三级联动。
    核心问题:
    动态生成的li绑定的事件为什么会失效,如何解决?
    swicth的判断在多次条件下为什么优于if?
    尽量使用class切换动画的意义?

    城市天气选择

    拆分结构

    我们做是要做一个左右点击切换的,点击城市显示天气的动态选择列表。左右切换的话最合适的就是类似slider左右排列,产生位移即可。动画可以用animation或者transition都可以.涉及dom元素的动画,尽量采用动态的css添加减少直接js操作的步骤。

    //结构
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <link href="https://cdn.bootcss.com/bootstrap/4.1.0/css/bootstrap.css" rel="stylesheet">
    </head>
    <body>
        <div class="container-fluid">
            <div class="row-fluid">
                <!-- 面板列表 -->
                <div class="list">
                       <p class="flex" id="nav">
                           <span>面板1</span>
                           <span>></span>
                       </p>
                </div>
                <!-- 选项列表 -->
                <div class="span12 tagBox" id="selectBox">
                    <p class="option flex">
                        <span>选线一</span>
                        <span class="closeBtn">x</span>
                    </p>
                    <!-- 横向切换动画 -->
                    <div class="wrap">
                        <ul class="heightAuto ">
                            <li>
                                北京
                            </li>
                            <li>
                            上海
                            </li>
                            <li>
                                武汉
                            </li>
                            <li>
                                成都
                            </li>
                            <li>
                            深圳
                            </li>
                            <li>
                                随州
                            </li>
                            <li>
                            天门
                            </li>
                            <li>
                                黑龙江
                            </li>
                        </ul>
                        <!-- 第二个 -->
                        <ul>
                           
                        </ul>
                        <ul>
                            <li>31</li>
                            <li>32</li>
                            <li>33</li>
                        </ul>
                        <ul>
                            <li>41</li>
                            <li>42</li>
                            <li>43</li>
                            <li>44</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
       </body>
    </html>
    
    <style>
        /* 面板 */
        .list {
            margin-left:-15px;
            margin-right:-15px;
        }
        .list p {
            border:1px solid #ccc;
            padding:0 15px;
          
        }
    
        /* 弹出列表 */
        li {
            list-style:none;
            line-height:30px;
            border-top:1px solid #ccc;
        }
       
        .option {
            padding-left:15px;
            padding-right:15px;
            color:#fff;
            background:#64a281;
          
        }
        .flex {
            display:flex;
            justify-content: space-between;
            align-items: center;
        }
    
        .tagBox {
            position:fixed;
            width:100%;
            bottom:0;
            left:0;
            background:rgba(7,5,5,.1);
            transition: all .75s ease;
            /* 位移 */
            transform: translateY(500px);
            /* 高度变化 */
        }
    
        .act{
            transform: translateY(0)
        }
    
        .wrap {
            /* 根据次级内容决定 */
            width:400%;
            transition: all .75s ease;
        }
        
        .wrap ul {
           /* 样式可调整 */
            width:24.5%;
            display:inline-block;
            overflow: hidden;
            height:30px;
            padding-right:0;
        }
           /* 不同ul的高度会导致顶部空白需修正 */
        .heightAuto {
            height:auto !important;
        }
    
        </style>
    

    事件绑定

    在选择结构li相似的情况下,简单省事点的话可以试着直接给li绑定点击事件,但注意动态添加的元素绑定事件需要委托给父级处理。

    $('par').on('click','li',function(){
    ...
    })
    

    在处理接口方面我们既可以用if else进行当前index的判断也可以用给你的switch进行条件筛选。因为if每个都会检测的缘故这里使用switch更合适些。

    $(function(){
        var box=$('#selectBox');
        var uls=box.find('ul');
        var index=0;
        var wrap=$('.wrap');
        var width=uls.eq(0).width()+parseFloat(uls.eq(0).css('padding-left'));
        var close=$('.closeBtn')
    
        //弹出选择框基于transition动画
        $('#nav').on('click',function(){
            if(box.hasClass('act')) {
                box.removeClass('act');
            }else{
            box.addClass('act');
            }
        })
    
        close.on('click',function(){
            box.removeClass('act');
        })
    
        // 底部滑动
        uls.each(function(i){
                // ul替代为that单纯修改height问题
                var that=$(this);
                // 事件委托解决动态生成事件失效
                $(this).on('click','li',function(){
                    // 修正高度变化
                   that.next().addClass('heightAuto').siblings().removeClass('heightAuto')
                    // 处理api 结构相同省个事 index
                    let api;
                    switch (index) {
                        case 0:
                            api='https://www.apiopen.top/weatherApi'
                        break;
                        case 1:
                        break;
                        case 2:
                        break;
                        case 3:
                        alert($(this).text())
                        break;
                    }
                    api=api?api:'https://www.apiopen.top/weatherApi';
                    $.post(api,{city:$(this).text().trim()},function(data,status){
                        // 状态判断后加,改变第二个内容,可以用js渲染模板或拼接
                        console.log(data)
                        console.log(data.data.forecast)
                        var str='';
                        $.each(data.data.forecast,function(i,ele){
                            str+='<li>'+data.data.city+ele.high+'</li>';
                        })
                        // 添加进去,执行transition动画 1是要改成动态的 index
                        uls.eq(1).html(str);
                    });
                    // 修正动画api
                    if(index>=3) {
                        // 关闭初始化
                        index=0;
                        uls.eq(0).addClass('heightAuto')
                        box.removeClass('act');
                        wrap.css("transform",'translateX(0)');
                        return;
                    }else {
                        index=i+1;
                    }
                    console.log(index);
                    wrap.css("transform",'translateX(-'+index*width+'px)');
                })
    
                
            })
        
    })
    

    参考资料

    demo接口来源 https://blog.csdn.net/c__chao/article/details/78573737

    相关文章

      网友评论

          本文标题:web 前端入门之底部三级选择

          本文链接:https://www.haomeiwen.com/subject/jsvwkftx.html