better-scroll的垂直滚动和水平滚动：
.wrapper{background-color:green;高度：300px；宽度：300px；溢出：隐藏；}/*设置后，这个元素中的子元素会水平排列，你可以决定是否设置*垂直滚动不需要设置这个类。*/.content{显示：inline-flex;溢出：隐藏；}/*设置滚动内容的宽度和高度大于wrapper*/.scrollTest,.scrollTest2{background-color:red;宽度：900px；高度：600px；字体大小：30px；字体粗细：粗体；}.scrollTest2{背景颜色：黄绿色；}better-scroll的垂直滚动和水平滚动：前言：最近学习vue，自己在做一个小项目练习，期间需要用到better-scroll实现平滑滚动结果一开始只知道它可以实现垂直滚动（我懵了/(ㄒoㄒ)/~~），后来实现了水平滚动的功能。搜索了一下，发现水平滚动和垂直滚动还是有点区别的，所以在这里总结一下，希望对有此需求的人有所帮助。（无图警告：因为我还没弄明白怎么加图片，所以本文没有demo图片）1.安装better-scrollb我是用npm安装的：npminstallbetter-scroll--save也可以用其他安装方法，这里不再赘述。2.将滚动功能抽取出来作为一个组件：实现滚动功能，肯定会用到很多组件。在这种情况下，我们将把它打包成一个组件。我这里把滚动的组件叫做scroll，把这个组件应用在需要实现滚动的组件中就可以了。并且这样一来，只有这两个组件对better-scroll有依赖，其他需要实现滚动的组件没有，方便项目后期维护。（以下所有组件都在app.vue同目录下）滚动组件封装：垂直滚动：只有当内容（滚动区域）的高度大于包裹它的wrapper高度时，才会滚动。具体原理可以查看：https://zhuanlan.zhihu.com/p/...只要给wrapper一个高度，当滚动内容的高度大于wrapper的高度就会发生滚动.水平滚动：但是，当水平滚动时，html中块级元素的宽度默认为其父元素的100%，所以content的默认宽度为wrapper的宽度，滚动区域的宽度等于包的宽度，所以水平滚动不会发生Scrolled，解决办法是设置content的宽度为其子元素的宽度。设置块级元素的宽度为其子元素的宽度有几种方式，可以参考：https://www.jianshu.com/p/f31...这里我是用来设置显示的到inline-flex:.content{display:inline-flex;溢出：隐藏；}设置后，该元素中的子元素会水平排列。根据自己的需要，决定是否在使用滚动组件的模板中添加这个类。垂直滚动不需要下面是组件的具体代码。关键参数是将scrollX设置为true以启用X轴滚动。更多参数可以查看官方文档或搜索。使用的参数见代码注释scroll.vue
<样式范围>3。纵横滚动实现：使用scroll组件实现纵横滚动：需要scrollTest组件实现滚动功能：只在需要滚动的区域外使用scroll组件。这里为了测试，我直接给wrapper设置了300px的高度和300px的宽度。在实际使用中，可以通过计算确定，也可以自己指定一个高度。注意设置overflow:hidden；的wrapper，如果不设置，不会影响垂直滚动，但会在水平滚动时出现原生滚动条，使整个页面滚动（当滚动区域宽度过大时）scrollTest.vue代码如下：
我想垂直和水平滚动 