Screen

筛选漏斗。Screen UI提供与WeLink规范一致的视图。

    <div class="page">
        <div class="page__bd">       
            <div class="weui-select_view__area">
                <div class="weui-select_view">
                    <p class="weui-select__header"><span class="weui-select__header_item">全部</span></p>
                    <div class="weui-select__body_bg weui-select__body_toggle">
                        <div class="weui-select__bg"></div>
                        <ul class="weui-select__body">
                            <li class="checked" data-value=""><p>全部</p></li>
                            <li data-value="上将"><p>上将</p></li>
                            <li data-value="中将"><p>中将</p></li>
                            <li data-value="少将"><p>少将</p></li>
                            <li data-value="大校"><p>大校</p></li>
                            <li data-value="上校"><p>上校</p></li>
                            <li data-value="中校"><p>中校</p></li>
                            <li data-value="少校"><p>少校</p></li>
                            <li data-value="上尉"><p>上尉</p></li>
                            <li data-value="中尉"><p>中尉</p></li>
                            <li data-value="少尉"><p>少尉</p></li>
                        </ul>
                    </div>
                </div>
                <div class="weui-select_view">
                    <p class="weui-select-sort__header"><span class="weui-select__header_item">发布时间</span></p>
                </div>
                <div class="weui-select_view">
                    <p class="weui-select__header"><span class="weui-select__header_item">All</span></p>
                    <div class="weui-select__body_bg weui-select__body_toggle">
                        <div class="weui-select__bg"></div>
                        <ul class="weui-select__body">
                            <li class="checked" data-value=""><p>All</p></li>
                            <li data-value="Elizabeth Anderson"><p>Elizabeth Anderson</p></li>
                            <li data-value="Sarah Martin"><p>Sarah Martin</p></li>
                            <li data-value="Cynthia Hall"><p>Cynthia Hall</p></li>
                            <li data-value="Anthony Miller"><p>Anthony Miller</p></li>
                            <li data-value="Karen Hall"><p>Karen Hall</p></li>
                            <li data-value="Steven Jones"><p>Steven Jones</p></li>
                            <li data-value="Jennifer Martinez"><p>Jennifer Martinez</p></li>
                            <li data-value="Joseph Jones"><p>Joseph Jones</p></li>
                            <li data-value="Maria Davis"><p>Maria Davis</p></li>
                            <li data-value="Jose Robinson"><p>Jose Robinson</p></li>
                            <li data-value="Brenda Harris"><p>Brenda Harris</p></li>
                            <li data-value="Charles Martin"><p>Charles Martin</p></li>
                            <li data-value="Eric Lopez"><p>Eric Lopez</p></li>
                            <li data-value="Anna Smith"><p>Anna Smith</p></li>
                            <li data-value="Jose Lopez"><p>Jose Lopez</p></li>
                            <li data-value="Michelle Perez"><p>Michelle Perez</p></li>
                            <li data-value="Angela Smith"><p>Angela Smith</p></li>
                            <li data-value="Susan Clark"><p>Susan Clark</p></li>
                            <li data-value="Lisa Martin"><p>Lisa Martin</p></li>
                            <li data-value="Sandra Williams"><p>Sandra Williams</p></li>
                            <li data-value="Dorothy Thomas"><p>Dorothy Thomas</p></li>
                            <li data-value="Kenneth Perez"><p>Kenneth Perez</p></li>
                            <li data-value="Larry Lewis"><p>Larry Lewis</p></li>
                            <li data-value="Frank Taylor"><p>Frank Taylor</p></li>
                        </ul>
                    </div>
                </div>
                <div class="weui-screen_view">
                    <p class="weui-screen__header">
                        <span class="weui-screen__header_item">筛选</span>
                    </p>
                    <div class="weui-screen__dropdown_bg weui-select__body_toggle">
                        <div class="weui-select__bg "></div>
                        <div class="weui-screen__dropdown">
                            <div class="weui-screen__dropdown_view">
                                <section class="weui-screen__dropdown_box">
                                    <p>维度一</p>
                                    <ul class="screen-datasource">
                                        <li class="checked">选项1</li>
                                        <li class="">选项1</li>
                                        <li class="">123</li>
                                        <li class="">选项1</li>
                                        <li class="">选项1</li>
                                        <li class="">选项1</li>
                                        <li class="">选项1</li>
                                        <li class="">选项1</li>
                                    </ul>
                                </section>
                                <section class="weui-screen__dropdown_box">
                                    <p>维度二</p>
                                    <ul class="screen-datasource">
                                        <li class="checked">选项1</li>
                                        <li class="">选项1</li>
                                        <li class="">选项1</li>
                                        <li class="">选项1</li>
                                        <li class="">123</li>
                                        <li class="">选项121111</li>
                                        <li class="">选项33411</li>
                                        <li class="">选项1</li>
                                    </ul>
                                </section>
                                <section class="weui-screen__dropdown_box">
                                    <p>维度三</p>
                                    <ul class="screen-datasource">
                                        <li class="checked">选项1</li>
                                        <li class="">选项1</li>
                                        <li class="">123</li>
                                        <li class="">选项1</li>
                                        <li class="">选项1</li>
                                        <li class="">选项1</li>
                                        <li class="">选项1</li>
                                        <li class="">选项1</li>
                                    </ul>
                                </section>
                            </div>
                            <div class="weui-screen__dropdown_footer weui-btn-area_inline">
                                <a class="weui-btn weui-btn_default screen__footer_first">重置条件</a>
                                <a class="weui-btn weui-btn_primary screen__footer_last">确定</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        let isfalg = false;
        $(function () {
            // 下拉菜单的单击事件
            $('.weui-select__header').click(function(e){
                $('.weui-screen__dropdown_bg').each(function () {
                    if (!$(this).hasClass('weui-select__body_toggle')) {
                        $(this).addClass('weui-select__body_toggle');
                        $(this).parent().find('.weui-screen__header').removeClass('active');
                    }
                });
                e.stopPropagation();
                const _dropwdown = $(this).parent().find('.weui-select__body_bg');  
                const isShow = $(_dropwdown).hasClass('weui-select__body_toggle');

                $('.weui-select__header').parent().find('.weui-select__body_bg').addClass('weui-select__body_toggle');
                $('.weui-select__header').removeClass('active');

                if(isShow){
                    $(this).addClass('active');
                    $(_dropwdown).removeClass('weui-select__body_toggle');
                    return;
                }
                $(_dropwdown).addClass('weui-select__body_toggle');
                if(isShow) $(_dropwdown).removeClass('weui-select__body_toggle');
            });

            $('.weui-select__body li').each(function () {
                $(this).click(function () {
                    const value = $(this).attr('data-value');
                    const text = $(this).find('p').text();
                    const _parent = $(this).parent().parent();
                    const _title = $(_parent).parent().find('.weui-select__header');
                    const _text = $(_title).find('.weui-select__header_item');
                    $(_parent).addClass('weui-select__body_toggle');
                    $(_title).removeClass('active');
                    $(_text).text(text);
                    $(this).parent().find('li').removeClass('checked');
                    $(this).addClass('checked');
                    console.log({ value, text });
                });
            });

            $('.weui-select__body').click(function (e) {
                e.stopPropagation();
            });

            // 筛选的单击事件
            $('.weui-screen__header').click(function(e){
                $('.weui-select__body_bg').each(function () {
                    if (!$(this).hasClass('weui-select__body_toggle')) {
                        $(this).addClass('weui-select__body_toggle');
                        $(this).parent().find('.weui-select__header').removeClass('active');
                    }
                });
                e.stopPropagation();
                const _dropwdown = $(this).parent().find('.weui-screen__dropdown_bg');  
                const isShow = $(_dropwdown).hasClass('weui-select__body_toggle');

                $('.weui-screen__header').parent().find('.weui-screen__dropdown_bg').addClass('weui-select__body_toggle');
                $('.weui-screen__header').removeClass('active');
                $('.weui-screen__header').removeClass('active_checked');

                if(isShow){
                    $(this).addClass('active');
                    $(_dropwdown).removeClass('weui-select__body_toggle');
                    return;
                }
                $(_dropwdown).addClass('weui-select__body_toggle');
                if(isShow) $(_dropwdown).removeClass('weui-select__body_toggle');
            });

            $('.screen-datasource li').click(function(){
                $(this).parent().find('li').removeClass('checked');
                $(this).addClass('checked');
            })

            $('.screen__footer_last').click(async function(){
                $('.weui-screen__dropdown_bg').addClass('weui-select__body_toggle');
                const $parent = $(this).parent().parent().parent().parent().find('.weui-screen__header');
                !isfalg && $parent.addClass('active');
            });

            $('.screen__footer_first').click(function(){
                $('.screen-datasource li').removeClass('checked');
                const $parent = $(this).parent().parent().parent().parent().find('.weui-screen__header');
                $parent.removeClass('active');
                isfalg = true;
            });

            $('.weui-screen__dropdown').click(function (e) {
                e.stopPropagation();
            });

            $('.weui-select-sort__header').click(function(e){
                if(!$(this).hasClass('asc') && !$(this).hasClass('desc')) {
                    $(this).addClass('asc');
                } else if($(this).hasClass('asc')){
                    $(this).removeClass('asc');
                    $(this).addClass('desc');
                } else if($(this).hasClass('desc')){
                    $(this).removeClass('desc');
                    $(this).addClass('asc');
                }
            });
            $(document).click(function () {
                $('.weui-select__body_bg').each(function () {
                    if (!$(this).hasClass('weui-select__body_toggle')) {
                        $(this).addClass('weui-select__body_toggle');
                        $(this).parent().find('.weui-select__header').removeClass('active');
                    }
                });

                $('.weui-screen__dropdown_bg').each(function () {
                    if (!$(this).hasClass('weui-select__body_toggle')) {
                        $(this).addClass('weui-select__body_toggle');
                        $(this).parent().find('.weui-screen__header').removeClass('active');
                    }
                });
            });
        });
    </script>