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

【学习打卡】第13天 打造音乐App 第十三讲

标签:
Vue.js

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

课程章节:推荐页面开发

主讲老师:usthuangyi

课程内容:搭建推荐页

今天学习内容包括:

  1. 搭建推荐页

课程收获:

该项目为移动端的项目,我们要设置缩放比例为 1,并且禁止用户双击缩放。

  • 导入轮播图核心滚动和滑动栏

  • 定义滑动栏和当前页

  • new BScroll() 可以接收多个参数,第二个参数可以是对象的形式,里面添加多个参数

什么是BetterScroll?

BetterScroll 是一款重点解决移动端(已支持 PC)各种滚动场景需求的插件。它的核心是借鉴的 iscroll(opens new window)的实现,它的 API 设计基本兼容 iscroll,在 iscroll 的基础上又扩展了一些 feature 以及做了一些性能优化。

BetterScroll 是使用纯 JavaScript 实现的,这意味着它是无依赖的。

BetterScroll 提供了一个类,实例化的第一个参数是一个原生的 DOM 对象。当然,如果传递的是一个字符串,BetterScroll 内部会尝试调用 querySelector 去获取这个 DOM 对象。

滚动原理:

浏览器的滚动原理: 浏览器的滚动条大家都会遇到,当页面内容的高度超过视口高度的时候,会出现纵向滚动条;当页面内容的宽度超过视口宽度的时候,会出现横向滚动条。也就是当我们的视口展示不下内容的时候,会通过滚动条的方式让用户滚动屏幕看到剩余的内容。

课程学习截图:

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





点击查看更多内容
TA 点赞

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

评论

作者其他优质文章

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

100积分直接送

付费专栏免费学

大额优惠券免费领

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

举报

0/150
提交
取消