vue使用better-scroll实现横向滚动的方法实例

一、滚动的实现原理

better-scroll的滚动原理和浏览器原生滚动原理是一样的，当子盒子的高度大于父盒子的高度，就会出现纵向滚动；同理，如果子盒子的宽度大于父盒子的宽度，那么就会出现横向滚动。

二、better-scroll的 html 结构

先来看一下 better-scroll 常见的 html 结构：

betterscroll应用于外部wrapper容器，并且滚动部分是content。请注意，wrapper默认情况下，betterscroll处理容器（）的第一个子元素（内容）的滚动，这意味着其他元素将被忽略。

三、在vue中使用better-scroll

下面是插件原作者说的：

四. 容易出现问题的点：

1. 必须等到页面dom渲染完成再去执行bscroll的实例化，建议在mounted 钩子函数里执行
2. 子盒子的宽度大于父盒子的宽度

最后

better-scroll插件作者的文章，发现better-scroll真强大啊！

当 better-scroll 遇见 vue

在vue中用better-scroll实现横向滚动

到此这篇关于vue使用better-scroll实现横向滚动的文章就介绍到这了,更多相关vue better-scroll实现横向滚动内容请搜索www.887551.com以前的文章或继续浏览下面的相关文章希望大家以后多多支持www.887551.com！