vue向下滚动后动态显示页面

前言

最近一直在鼓捣怎么给自己的个人博客(Vue项目)添加一个功能---向下滚动的时候,用一些动画展示页面,最终自己瞎折腾用Vue的自定义指令找出了看起来比较优雅的方法,不多说了,上代码!


代码

// 'animated bounceIn' 为animated.css里的 <div class="newBlog" v-scroll-show>     <p class="headline animated bounceIn">最近更新</p>     <div class="posts animated fadeIn">         <p>文章</p>     </div> </div>
.newBlog {     min-height: 500px; } .headline, .posts {     display: none; }
export default {     directives: {         scrollShow: {             bind: (el) => {                 window.addEventListener('scroll', () => {                     if (document.body.scrollTop + 400 > el.offsetTop) {                         for (let i = 0; i < el.children.length; i++) {                             setTimeout(() => {                                 el.children[i].style.display = 'block'                             }, 1000 * i)                         }                     }                 })             }         }     } }

结尾

这是自己想的一个方法,如果各位有什么更优雅的方法去实现的话,欢迎告知,先谢谢啦!

脚本宝典为你提供优质服务
脚本宝典 » vue向下滚动后动态显示页面

发表评论

提供最优质的资源集合

立即查看 了解详情