为了账号安全,请及时绑定邮箱和手机立即绑定

【学习打卡】第14天 打造音乐App 第十四讲

标签:
Vue.js

课程名称:Vue3.0高阶实战:开发高质量音乐Web app

课程章节:推荐页面开发

主讲老师:usthuangyi

课程内容:图片懒加载,v-loading 指令

今天学习内容包括:

  1. 实现图片懒加载

  2. 开发和优化v-loading指令

课程收获:

图片懒加载:

  • 安装 vue3-lazy,在 main.js 文件中导入并使用

  • 传入两个参数,一个是 lazyPlugin,一个是要加载的图片的相对地址

  • 修改 :src 为 v-lazy,实现图片的懒加载

v-loading 指令

  • 该文件自定义 loading 指令

  • 挂载和更新的时候做出相应变化

  • 仅适用于 absolute | fixed | relative 的定位(后面还会优化)

优化:

  • 当没有设置 position 为 absolute | fixed | relative 其中一个时,自动添加 position: relative

  • 如果没有 absolute | fixed | relative,则添加样式

  • binding.value 为 false 时,移出样式

  • 至此,推荐页面的基本开发先告一段落,接下来将进行歌手页面的开发

课程学习截图:

https://img1.sycdn.imooc.com//62fb4c1f0001929411970671.jpg






点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消