Screen
筛选漏斗。Screen UI提供与WeLink规范一致的视图。
效果示例
HTML
<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>