这几天研究项目时,看到了 better-scroll 插件,看着感觉功能挺强,这篇文章主要给大家介绍了关于vue使用better-scroll实现横向滚动的相关资料,需要的朋友可以参考下
一、滚动的实现原理
本文来源gao*daima.com搞@代#码&网6better-scroll的滚动原理和浏览器原生滚动原理是一样的，当子盒子的高度大于父盒子的高度，就会出现纵向滚动；同理，如果子盒子的宽度大于父盒子的宽度，那么就会出现横向滚动。
二、better-scroll的 html 结构
先来看一下 better-scroll 常见的 html 结构：
<div class="wrapper"> <ul class="content"> <li>...</li><li>...</li> ... </ul></div>
BetterScroll应用于外部wrapper容器，并且滚动部分是content。请注意，wrapper默认情况下，BetterScroll处理容器（）的第一个子元素（内容）的滚动，这意味着其他元素将被忽略。
三、在Vue中使用better-scroll
npm install better-scroll --save //npm 安装 import BScroll from 'better-scroll' //组件文件中引入better-scroll
/* 横向滚动 */ /* 这里是父盒子*/ <div class="wrapper_box" style="min-height:100vh"> /* 这里是子盒子，即滚动区域*/ <div class="content"> <div class="imgItem"> </div></div></div>
下面是插件原作者说的：
四. 容易出现问题的点：
- 必须等到页面DOM渲染完成再去执行BScroll的实例化，建议在mounted 钩子函数里执行
- 子盒子的宽度大于父盒子的宽度
最后
better-scroll插件作者的文章，发现better-scroll真强大啊！
当 better-scroll 遇见 Vue
在Vue中用better-scroll实现横向滚动
到此这篇关于vue使用better-scroll实现横向滚动的文章就介绍到这了,更多相关vue better-scroll实现横向滚动内容请搜索gaodaima搞代码网以前的文章或继续浏览下面的相关文章希望大家以后多多支持gaodaima搞代码网！
以上就是vue使用better-scroll实现横向滚动的方法实例的详细内容，更多请关注gaodaima搞代码网其它相关文章！
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：vue使用better-scroll实现横向滚动的方法实例
转载请注明原文链接：vue使用better-scroll实现横向滚动的方法实例
