QQ图片20181226153539.png
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
</head>
<body class="tui">
<div id="" class="flex center bottom-nav fixed" style="z-index: 1;">
<div class="tanchu button" onclick="show()">弹出</div>
</div>
<div id="li" class="flex center fixed column bottom-nav">
<div id="" class="toubu">
<div class="toubu-list flex">
<div id="" class="left relative">
<div id="" class="img absolute">
图片
</div>
</div>
<div id="" class="right item flex column line-height6">
<div id="" class="title">
<span></span><span style="color: red;">￥28.9</span>
</div>
<div id="" class="text">
已选：<span class="tag">香辣</span>
</div>
</div>
</div>
</div>
<div id="list" class="list flex column" style="box-sizing: border-box;">
</div>
<div class="tanchu button tanchu-button" onclick="show()" >关闭</div>
</div>
<style type="text/css">
*{
font-size:16px;
}
.tui{
width: 100%;
position:relative;
/* font-size:16px; */
}
.tui .line-height6{
line-height: 1.6;
}
.tui .flex{
display: flex;
}
.tui .flex .item{
flex:1;
}
.tui .column{
flex-direction: column;
}
.tui .relative{
position: relative;
}
.tui .fixed{
position:fixed;
}
.tui .absolute{
/* z-index: 2; */
position: absolute;
}
.tui .tag{
font-size:0.9em;
padding: 2px 5px;
background: #e0e0e0;
border-radius: 2px;
}
.tui .toubu .text{
font-size: 0.8em;
}
.tui .bottom-nav{
width: 100%;
bottom:0;
}
.tui .toubu{
display: flex;
flex-direction: column;
justify-content: flex-end;
height: 150px;
/* background: #0062CC; */
}
.tui .toubu >.toubu-list{
height: 100px;
width: 100%;
background: #fff;
}
.tui .toubu .toubu-list >.left{
width:180px ;
}
.tui .toubu .toubu-list .left >.img{
background: #808080;
bottom: 0;
height: 100px;
width: 100px;
/* background: #fff; */
padding:20px ;
border-radius: 10px;
text-align:center;
margin-left: 20px;
}
.tui .toubu .toubu-list >.right{
justify-content: center;
padding: 10px;
box-sizing: border-box;
}
.tui .center{
justify-content: center;
}
.tui .tanchu-button{
/* margin-bottom:130px; */
background: #48C23D;
}
.tui .button{
text-align: center;
color:#fff;
line-height: 40px;
background:#007AFF;
border-radius: 3px;
border:#f9f9f9 solid 1px;
/* padding:5px; */
}
.tui .button:hover{
opacity:0.6;
/* background: rgba(0,0,0,0.5); */
}
.tui .tanchu{
width: 100%;
}
#li{
/* box-sizing: border-box; */
padding-bottom: 100px;
top:0;
height: 100vh;
bottom: 0px;
background: rgba(0,0,0,0.1);
transition:top 1s;
-moz-transition:top 1s;
-webkit-transition:top 1s;
-o-transition:top 1s;
}
#li .list{
box-sizing: border-box;
/* position:relative; */
height: 200px;
overflow-y:auto;
/* margin-bottom:100px; */
}
.list::-webkit-scrollbar {
display: none;
}
.tui #li > .item{
margin: 10px;
height: 40px;
width: 100%;
line-height: 40px;
}
</style>
<script type="text/javascript">
var li=document.getElementById('li');
var list=document.getElementById('list');
var buttomHtml='';
for(let i=0;i<10;i++){
buttomHtml+='<div class="button item">列表'
+i+'</div>';
}
list.innerHTML=buttomHtml+list.innerHTML;
var visibility=false;
li.style.top='100vh';
var show =function (){
if(visibility){
visibility=false
li.style.top='100vh';
}else{
visibility=true;
li.style.top='0';
}
}
</script>
</body>
</html>
