vue插件-BetterScroll使用
BetterScroll 是一款重点解决移动端(已支持PC)各种滚动场景需求的插件。它的核心是借鉴的 iscroll 的实现,它的 API 设计基本兼容 iscroll,在 iscroll 的基础上又扩展了一些 feature 以及做了一些性能优化。BetterScroll 提供了很多灵活的 API,当我们基于 better-scroll 去实现一些 feature 的时候,会用到这些 API,了解他们会有助于开发更加复杂的需求。
使用
参数
方法
使用插件的安装请看BetterScroll
html
123<div class="wrapper" ref="wrapper"> <div class="container"></div></div>
JS
123this.wrapperScroll = new BScroll(this.$refs.wrapper, {click: true //还可以添加其他参数(具体看下方)})
参数
start ...
div高度自适应页面宽度
宽度的自适应是根据viewport的width来调整的,而css属性中的padding也是根据viewport的width来计算的,那么通过设置这个属性就可以跟width达成某种比例关系。
css实现高度自适应123width: 100%;height: 0;padding-bottom: 30%; //div的高度为宽度的30%
文字溢出隐藏
文本溢出隐藏在前端是很常见的需求,例如文章的标题过长,需要超出几行后隐藏,显示省略号(…)。
单行文字溢出隐藏
多行文字溢出隐藏
单行文字溢出隐藏123overflow: hidden;white-space: nowrap;text-overflow: ellipsis;
多行文字溢出隐藏12345overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3; //文本超出三行后隐藏