下拉筛选。DropDown UI UI提供与WeLink规范一致的视图,包含:

效果示例

HTML
    <div class="weui_dropdown_continer">
        <div class="weui-flex">
            <div class="weui-flex__item weui-flex-dropdown__item">
                <div class="weui-dropdown-view_header">
                    <div class="weui-dropdown-header__item">
                        审核中
                    </div>
                    <div class="weui-dropdown-header_active">
                        <i class="icon-12 icon-12-arrowBottom" />
                    </div>
                </div>

                <div class="weui_dropdown_body weui_dropdown_body_toggle">
                    <div class="weui_dropdown_body_bg" />
                    <div class="weui-cells weui-cells_radio weui_dropdown_body_list">
                        <label class="weui-cell weui-cell-list weui-check__label" for="all1">
                            <div class="weui-cell__bd">
                                <p>全部</p>
                            </div>
                            <div class="weui-cell__ft">
                                <input type="radio" name="radiogroup1" class="weui-check" id="all1" />
                                <span class="weui-icon-checked"></span>
                            </div>
                        </label>

                        <label class="weui-cell weui-cell-list weui-check__label" for="a1">
                            <div class="weui-cell__bd weui-cells__active">
                                <p>审核中</p>
                            </div>
                            <div class="weui-cell__ft">
                                <input type="radio" name="radiogroup1" class="weui-check" checked="checked" id="a1" />
                                <span class="weui-icon-checked"></span>
                            </div>
                        </label>

                        <label class="weui-cell weui-cell-list weui-check__label" for="b1">
                            <div class="weui-cell__bd">
                                <p>驳回</p>
                            </div>
                            <div class="weui-cell__ft">
                                <input type="radio" name="radiogroup1" class="weui-check" id="b1" />
                                <span class="weui-icon-checked"></span>
                            </div>
                        </label>

                        <label class="weui-cell weui-cell-list weui-check__label" for="c1">
                            <div class="weui-cell__bd">
                                <p>完成</p>
                            </div>
                            <div class="weui-cell__ft">
                                <input type="radio" name="radiogroup1" class="weui-check" id="c1" />
                                <span class="weui-icon-checked"></span>
                            </div>
                        </label>
                    </div>
                </div>

            </div>
            <div class="weui-flex__item weui-flex-dropdown__item">
                <div class="weui-dropdown-view_header">
                    <div class="weui-dropdown-header__item">
                        求助
                    </div>
                    <div class="weui-dropdown-header_active">
                        <i class="icon-12 icon-12-arrowBottom" />
                    </div>
                </div>


                <div class="weui_dropdown_body weui_dropdown_body_toggle">
                    <div class="weui_dropdown_body_bg" />
                    <div class="weui-cells weui-cells_radio weui_dropdown_body_list">
                        <label class="weui-cell weui-cell-list weui-check__label" for="all2">
                            <div class="weui-cell__bd ">
                                <p>全部</p>
                            </div>
                            <div class="weui-cell__ft">
                                <input type="radio" name="radiogroup2" class="weui-check" id="all2" />
                                <span class="weui-icon-checked"></span>
                            </div>
                        </label>

                        <label class="weui-cell weui-cell-list weui-check__label" for="a2">
                            <div class="weui-cell__bd weui-cells__active">
                                <p>求组</p>
                            </div>
                            <div class="weui-cell__ft">
                                <input type="radio" name="radiogroup2" class="weui-check" checked="checked" id="a2" />
                                <span class="weui-icon-checked"></span>
                            </div>
                        </label>

                        <label class="weui-cell weui-cell-list weui-check__label" for="b2">
                            <div class="weui-cell__bd">
                                <p>讨论</p>
                            </div>
                            <div class="weui-cell__ft">
                                <input type="radio" name="radiogroup2" class="weui-check" id="b2" />
                                <span class="weui-icon-checked"></span>
                            </div>
                        </label>

                        <label class="weui-cell weui-cell-list weui-check__label" for="c2">
                            <div class="weui-cell__bd">
                                <p>博客</p>
                            </div>
                            <div class="weui-cell__ft">
                                <input type="radio" name="radiogroup2" class="weui-check" id="c2" />
                                <span class="weui-icon-checked"></span>
                            </div>
                        </label>

                        <label class="weui-cell weui-cell-list weui-check__label" for="d2">
                            <div class="weui-cell__bd">
                                <p>社区</p>
                            </div>
                            <div class="weui-cell__ft">
                                <input type="radio" name="radiogroup2" class="weui-check" id="d2" />
                                <span class="weui-icon-checked"></span>
                            </div>
                        </label>
                    </div>
                </div>

            </div>
            <div class="weui-flex__item weui-flex-dropdown__item">
                <div class="weui-dropdown-view_header">
                    <div class="weui-dropdown-header__item">
                        学士
                    </div>
                    <div class="weui-dropdown-header_active">
                        <i class="icon-12 icon-12-arrowBottom" />
                    </div>
                </div>


                <div class="weui_dropdown_body weui_dropdown_body_toggle">
                    <div class="weui_dropdown_body_bg" />
                    <div class="weui-cells weui-cells_radio weui_dropdown_body_list">
                        <label class="weui-cell weui-cell-list weui-check__label" for="all3">
                            <div class="weui-cell__bd">
                                <p>全部</p>
                            </div>
                            <div class="weui-cell__ft">
                                <input type="radio" name="radiogroup3" class="weui-check" id="all3" />
                                <span class="weui-icon-checked"></span>
                            </div>
                        </label>

                        <label class="weui-cell weui-cell-list weui-check__label" for="a3">
                            <div class="weui-cell__bd weui-cells__active">
                                <p>学士</p>
                            </div>
                            <div class="weui-cell__ft">
                                <input type="radio" name="radiogroup3" class="weui-check" checked="checked" id="a3" />
                                <span class="weui-icon-checked"></span>
                            </div>
                        </label>

                        <label class="weui-cell weui-cell-list weui-check__label" for="b3">
                            <div class="weui-cell__bd">
                                <p>硕士</p>
                            </div>
                            <div class="weui-cell__ft">
                                <input type="radio" name="radiogroup3" class="weui-check" id="b3" />
                                <span class="weui-icon-checked"></span>
                            </div>
                        </label>

                        <label class="weui-cell weui-cell-list weui-check__label" for="c3">
                            <div class="weui-cell__bd">
                                <p>博士</p>
                            </div>
                            <div class="weui-cell__ft">
                                <input type="radio" name="radiogroup3" class="weui-check" id="c3" />
                                <span class="weui-icon-checked"></span>
                            </div>
                        </label>

                        <label class="weui-cell weui-cell-list weui-check__label" for="d3">
                            <div class="weui-cell__bd">
                                <p>顾问</p>
                            </div>
                            <div class="weui-cell__ft">
                                <input type="radio" name="radiogroup3" class="weui-check" id="d3" />
                                <span class="weui-icon-checked"></span>
                            </div>
                        </label>

                        <label class="weui-cell weui-cell-list weui-check__label" for="d3">
                            <div class="weui-cell__bd">
                                <p>专家</p>
                            </div>
                            <div class="weui-cell__ft">
                                <input type="radio" name="radiogroup3" class="weui-check" id="d3" />
                                <span class="weui-icon-checked"></span>
                            </div>
                        </label>
                    </div>
                </div>

            </div>
        </div>
    </div>

    <div class="weui_dropdown_continer" style="margin-top: 200px;">
        <div class="weui-dropdown-view_header">
            <div class="weui-dropdown-header__item">
                全部
            </div>
            <div class="weui-dropdown-header_active">
                <i class="icon-12 icon-12-arrowTopRed" />
            </div>
        </div>

        <div class="weui_dropdown_body">
            <div class="weui_dropdown_body_bg" />
            <div class="weui-cells weui-cells_radio weui_dropdown_body_list">
                <label class="weui-cell weui-cell-list weui-check__label" for="all">
                    <div class="weui-cell__bd weui-cells__active">
                        <p>全部</p>
                    </div>
                    <div class="weui-cell__ft">
                        <input type="radio" name="radiogroup" class="weui-check" checked="checked" id="all" />
                        <span class="weui-icon-checked"></span>
                    </div>
                </label>

                <label class="weui-cell weui-cell-list weui-check__label" for="a">
                    <div class="weui-cell__bd">
                        <p>上尉</p>
                    </div>
                    <div class="weui-cell__ft">
                        <input type="radio" name="radiogroup" class="weui-check" id="a" />
                        <span class="weui-icon-checked"></span>
                    </div>
                </label>

                <label class="weui-cell weui-cell-list weui-check__label" for="b">
                    <div class="weui-cell__bd">
                        <p>中尉</p>
                    </div>
                    <div class="weui-cell__ft">
                        <input type="radio" name="radiogroup" class="weui-check" id="b" />
                        <span class="weui-icon-checked"></span>
                    </div>
                </label>

                <label class="weui-cell weui-cell-list weui-check__label" for="c">
                    <div class="weui-cell__bd">
                        <p>上尉</p>
                    </div>
                    <div class="weui-cell__ft">
                        <input type="radio" name="radiogroup" class="weui-check" id="c" />
                        <span class="weui-icon-checked"></span>
                    </div>
                </label>

                <label class="weui-cell weui-cell-list weui-check__label" for="d">
                    <div class="weui-cell__bd">
                        <p>少校</p>
                    </div>
                    <div class="weui-cell__ft">
                        <input type="radio" name="radiogroup" class="weui-check" id="d" />
                        <span class="weui-icon-checked"></span>
                    </div>
                </label>

                <label class="weui-cell weui-cell-list weui-check__label" for="d">
                    <div class="weui-cell__bd">
                        <p>中校</p>
                    </div>
                    <div class="weui-cell__ft">
                        <input type="radio" name="radiogroup" class="weui-check" id="d" />
                        <span class="weui-icon-checked"></span>
                    </div>
                </label>

                <label class="weui-cell weui-cell-list weui-check__label" for="d">
                    <div class="weui-cell__bd">
                        <p>上校</p>
                    </div>
                    <div class="weui-cell__ft">
                        <input type="radio" name="radiogroup" class="weui-check" id="d" />
                        <span class="weui-icon-checked"></span>
                    </div>
                </label>

                <label class="weui-cell weui-cell-list weui-check__label" for="d">
                    <div class="weui-cell__bd">
                        <p>少将</p>
                    </div>
                    <div class="weui-cell__ft">
                        <input type="radio" name="radiogroup" class="weui-check" id="d" />
                        <span class="weui-icon-checked"></span>
                    </div>
                </label>

                <label class="weui-cell weui-cell-list weui-check__label" for="d">
                    <div class="weui-cell__bd">
                        <p>中将</p>
                    </div>
                    <div class="weui-cell__ft">
                        <input type="radio" name="radiogroup" class="weui-check" id="d" />
                        <span class="weui-icon-checked"></span>
                    </div>
                </label>

                <label class="weui-cell weui-cell-list weui-check__label" for="d">
                    <div class="weui-cell__bd">
                        <p>上将</p>
                    </div>
                    <div class="weui-cell__ft">
                        <input type="radio" name="radiogroup" class="weui-check" id="d" />
                        <span class="weui-icon-checked"></span>
                    </div>
                </label>

                <label class="weui-cell weui-cell-list weui-check__label" for="d">
                    <div class="weui-cell__bd">
                        <p>将军</p>
                    </div>
                    <div class="weui-cell__ft">
                        <input type="radio" name="radiogroup" class="weui-check" id="d" />
                        <span class="weui-icon-checked"></span>
                    </div>
                </label>

                <label class="weui-cell weui-cell-list weui-check__label" for="d">
                    <div class="weui-cell__bd">
                        <p>元帅</p>
                    </div>
                    <div class="weui-cell__ft">
                        <input type="radio" name="radiogroup" class="weui-check" id="d" />
                        <span class="weui-icon-checked"></span>
                    </div>
                </label>

            </div>
        </div>
    </div>

result. ""

    Not Found. ""