iscroll
<!DOCTYPE html>
<head>
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
html{
font-size: 13.33vw;
}
li{
list-style: none;
}
a{
text-decoration: none;
}
body,h1,h2,h3,h4,h5,h6,p{
padding: 0;
margin: 0;
}
footer{
width: 7.5rem;
height: 1.5rem;
position: absolute;
background: #2bbEFC;
bottom:0
}
header{
top:0;
width:7.5rem;
height:1.4rem;
position: absolute;
}
#header{
width: 100%;
height: 1.5rem;
font-size: 0;
background: #2bbEFC;
display: flex;
justify-content:space-around;
overflow: hidden;
}
#header li{
width:1.5rem;
height:1.5rem;
color: white;
}
#header li img{
width: 1rem;
height: 1rem;
border-radius: 50%;
}
#header li:nth-child(1){
padding-top: 0.2rem;
}
#header li:nth-child(2){
padding-top: 0.4rem;
text-align: center;
font-size: 0.45rem;
}
#header li:nth-child(3){
text-align:right;
}
#header li:nth-child(3) a{
color: white;
font-size: 0.9rem;
}
#content{
left: 5rem;
width: 7.5rem;
position: absolute;
bottom: 1.5rem;
top: 1.5rem;
}
.view{
width:7.5rem;
font-size: 0;
margin-top: 0.1rem;
border-bottom: 0.01rem solid #666;
}
.box{
width: 8.5rem;
overflow: hidden;
}
.new{
width: 7.5rem;
font-size: 0.2rem;
overflow: hidden;
float: left;
}
.new li{
float: left;
}
.new li:nth-child(1){
width:1.2rem;
height: 1.2rem;
padding: 0.1rem 0.1rem;
}
.new li:nth-child(1) img{
width: 1rem;
height: 1rem;
border-radius: 50%;
}
.new .ziti{
width: 4.5rem;
height: 1.2rem;
}
.new .ziti p{
margin-top: 0.1rem;
height: 0.5rem;
}
.new .ziti p:nth-child(1){
font-size: 0.4rem;
color: black;
font-weight:600;
}
.new .ziti p:nth-child(2){
color: #666;
}
.new li:nth-child(3){
height: 1.2rem;
color: #666;
}
.del{
float: left;
background: red;
color: white;
text-align:center;
width: 1rem;
height: 1.2rem;
line-height: 1rem;
font-size: 0.3rem;
}
.cont{
font-size: 0;
}
#tip{
height:1rem;
line-height: 1rem;
text-align: center;
color:#666;
font-size: 0.5rem;
background: #dedede
}
#inp{
width: 7rem;
height: 0.4rem;
text-align: center;
margin: 0 auto;
background: #f3f3f3;
border: none;
margin-left: 0.3rem;
}
#heti{
width: 7.5rem;
position: absolute;
top: 0;
bottom: 0;
overflow: hidden;
}
.baoguo{
width: 12.5rem;
height: 100%;
overflow: hidden;
position: relative;
}
.baoguo>div{
float: left;
}
.menu{
width: 5rem;
height: 100%;
background: red;
}
.neirong{
width: 7.5rem;
}
#mark{
width: 7.5rem;
position: absolute;
top: 0;
right: 0;
background: black;
opacity: 0;
display: none;
}
</style>
</head>
<body>
菜单</div>
<!-- 主页内容 -->
<header>
<li>1.jpg"alt=""></li>
<li>消息</li>
<li>#">+</a></li>
</ul>
</header>
<!-- 主题内容 -->
下拉刷新</div>
1.jpg"alt="">
</li>
<p>宝贝</p>
<p>对方撤回一条信息</p>
</li>
<li><span>上午8:30</span></li>
</ul>
删除</div>
</div>
</div>
2.jpg"alt="">
</li>
<p>宝贝</p>
<p>对方撤回一条信息</p>
</li>
<li><span>上午8:30</span></li>
</ul>
删除</div>
</div>
</div>
3.jpg"alt="">
</li>
<p>傻狗1</p>
<p>对方撤回一条信息</p>
</li>
<li><span>上午8:30</span></li>
</ul>
删除</div>
</div>
</div>
4.jpg"alt="">
</li>
<p>傻狗2</p>
<p>对方撤回一条信息</p>
</li>
<li><span>上午8:30</span></li>
</ul>
删除</div>
</div>
</div>
5.jpg"alt="">
</li>
<p>傻狗3</p>
<p>对方撤回一条信息</p>
</li>
<li><span>上午8:30</span></li>
</ul>
删除</div>
</div>
</div>
6.jpg"alt="">
</li>
<p>傻狗4</p>
<p>对方撤回一条信息</p>
</li>
<li><span>上午8:30</span></li>
</ul>
删除</div>
</div>
</div>
7.jpg"alt="">
</li>
<p>傻狗5</p>
<p>对方撤回一条信息</p>
</li>
<li><span>上午8:30</span></li>
</ul>
删除</div>
</div>
</div>
8.jpg"alt="">
</li>
<p>傻狗6</p>
<p>对方撤回一条信息</p>
</li>
<li><span>上午8:30</span></li>
</ul>
删除</div>
</div>
</div>
</div>
</div>
<footer>底部</footer>
</div>
</div>
</div>
</div>
</body>
iscroll.Veb.js"></script>
<script>
new iScroll("content")
var content = document.getElementById("content");
var cont = document.getElementById("cont");
var view = document.getElementsByClassName("view");
var isc=new iScroll("heti",{
snap:true
})
for (var i = 0; i < view.length; i++) {
new iScroll(view[i], {
snap: true,
hScrollbar: false,
momentum: false,
bounce: false
});
view[i].children[0].children[1].onclick = function () {
cont.removeChild(this.parentNode.parentNode);
}
}
isc.scrollToPage(1,0,0);
</script>
</html>
