??
下拉可刷新
- 1
- 2
- 3
- 4
- 5
- 6
- 7
html,body { overflow:hidden; } .page { width:100%; height:100%; background:#f7f7f7; position:absolute; top:0; left:0; overflow:scroll; } .content { /* padding:20px; */ /* max-height:340px; */ /* overflow:auto; */ transition:0.2s; } li { padding:20px; height:20px; margin:10px; background:white; } .refresh-loading { height:50px; line-height:50px; overflow:hidden; display:flex; align-items:center; justify-content:center; margin-top:-50px; } .type-1 .con,.refresh-loading .g-m--c { width:16px; height:16px; border-radius:50%; -webkit-animation-name:locate-loading; -moz-animation-name:locate-loading; animation-name:locate-loading; -webkit-animation-duration:1.58s; -moz-animation-duration:1.58s; animation-duration:1.58s; -webkit-animation-timing-function:linear; -moz-animation-timing-function:linear; animation-timing-function:linear; -webkit-animation-iteration-count:infinite; -moz-animation-iteration-count:infinite; animation-iteration-count:infinite; border-top:2px solid #f43939; border-left:2px solid #df5555; margin-right:10px; } @keyframes locate-loading { 0% { opacity:1; -webkit-transform:rotate(0deg); -moz-transform:rotate(0deg); transform:rotate(0deg); } 100% { opacity:1; -webkit-transform:rotate(360deg); -moz-transform:rotate(360deg); transform:rotate(360deg); } }@-webkit-keyframes locate-loading { 0% { opacity:1; -webkit-transform:rotate(0deg); -moz-transform:rotate(0deg); transform:rotate(0deg); } 100% { opacity:1; -webkit-transform:rotate(360deg); -moz-transform:rotate(360deg); transform:rotate(360deg); } }@-moz-keyframes locate-loading { 0% { opacity:1; -webkit-transform:rotate(0deg); -moz-transform:rotate(0deg); transform:rotate(0deg); } 100% { opacity:1; -webkit-transform:rotate(360deg); -moz-transform:rotate(360deg); transform:rotate(360deg); } }.refresh-text { color:#999; text-align:center; font-size:12px; } .refresh-down { display:none; margin-right:10px; } .refresh-down.is-rotate { transform:rotate(180deg); } .finish { color:#999; font-size:12px; height:50px; line-height:50px; text-align:center; } .more-c { font-size:12px; color:#999; } .more-c .con { margin:0 5px 0 0; } .more-c .type { height:50px; line-height:50px; display:flex; align-items:center; justify-content:center; } .type-1:after { content:'加载中...'; display:inline-block; }
更新时间:2021-07-16 00:58:23
<div class="page"></div>
作为最外层滚动盒子,可以根据自己需求进行修改
<div class="content"></div>
作为下拉刷新动画盒子
<div class="scrollview"></div>
作为上拉加载内容承载
/* 加载内容的动画内容,top:bottom */ <div class="refresh-loading"></div>
下拉刷新动画内容
<div class="more-c"></div>
上拉加载动画内容
/* 完成加载时的样式 */ <div class="finish"></div>