web 前端入门之底部三级选择
2018-04-28 本文已影响0人
litielongxx
前言
页面中存在不少的多级联动功能，比如省市级或者存在某种层级的选择联动，这次就基于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
