上拉加载
2021年02月24日 | 分类: 常用组件 | 评论: 0 | 浏览: 1592
<div ref="lis"><slot v-for="(v,k) in value" :data="v" ></slot><div><div v-if="!is_end"><span>加载中 </span><div></div></div><div v-else>没有更多了</div></div></div> <style> <script> return { props:{ value:{ default:[] }, //触发距离 trigger:{ default:0 }, load:{ default(){} } }, data(){ var vue = this; return { is_load:false, is_end:false, on:{ async up(){ if(vue.is_load){ vue.is_load = false; var d = vue.load() if(Object.prototype.toString.call(d) === '[object Promise]')d = await d; if(d === false)vue.is_load = false; if(vue.is_load){ if(vue.$refs.lis && vue.$refs.lis.offsetHeight == vue.$refs.lis.scrollHeight){ vue.on.up(); } }else{ vue.is_end = true; } } } } } }, mounted(){ var vue = this; vue.$refs.lis.addEventListener('scroll',function(){ if(vue.$refs.lis.scrollTop+vue.$refs.lis.offsetHeight+vue.trigger >= vue.$refs.lis.scrollHeight){ vue.on.up(); } }); window.addEventListener('resize',function(){ if(vue.$refs.lis.offsetHeight == vue.$refs.lis.scrollHeight){ vue.on.up(); } }); vue.is_load = true; vue.on.up(); }, watch:{ value(v){ var vue = this; vue.is_load = true; if(!v.length){ vue.is_end = false; vue.on.up(); } } } } </script>
.__NAME__{ .state{ text-align: center;font-size: 12px;color:#888;height: 30px;line-height: 30px; .load{ .t{vertical-align: middle;} .loading { display: inline-block; vertical-align: middle; position: relative;top: 1px; width:12px; height:12px; border:1px solid #aaa; border-bottom:#333333 1px solid; border-radius:50%; animation:load 1.1s infinite linear; -webkit-animation:load 1.1s infinite linear; -moz-animation:load 1.1s infinite linear; -o-animation:load 1.1s infinite linear; } @keyframes load{from{transform:rotate(0deg);-ms-transform:rotate(0deg);}to{transform:rotate(360deg);-ms-transform:rotate(360deg);}} @-webkit-keyframes load{from{-webkit-transform:rotate(0deg);}to{-webkit-transform:rotate(360deg);}} @-moz-keyframes load{from{-moz-transform:rotate(0deg);}to{-moz-transform:rotate(360deg);}} @-o-keyframes load{from{-o-transform:rotate(0deg);}to{-o-transform:rotate(360deg);}} } } }
顶一下 ▲()
踩一下 ▼()
发表留言
登录后才能发表留言,立即 登录 或 注册
提交 (Ctrl+Enter)