vue 滚动,vue div滚动
这几天研究项目的时候看到了better-scroll插件，看着看着感觉还挺厉害的。本文主要介绍vue使用better-scroll进行水平滚动的相关信息，有需要的朋友可以参考一下。
一、滚动的实现原理
better-scroll的滚动原理和浏览器原生滚动是一样的。当子框高度大于父框高度时，会发生纵向滚动；同样，如果子框的宽度大于父框的宽度，那么就会有横向滚动。
二、better-scroll的 html 结构
让我们先来看看better-scroll的常见html结构：
div class=wrapper
ul class=内容
里./李
里./李
.
/ul
/div
BetterScroll应用于外部包装容器，滚动部分是内容。注意，默认情况下，包装器处理容器()的第一个子元素(内容)的滚动，这意味着其他元素将被忽略。
三、在Vue中使用better-scroll
m安装更好-滚动-保存//NPM安装
Import scroll从 better-scroll//Better-scroll引入到组件文件中。
模板
/*水平滚动*/
/*这里是父框*/
差异
class=wrapper_box
style=最小高度：100vh
ref=wrapper
v-否则
/*这里是子框，即滚动区*/
div class= content ref= wrapper child
差异
v-for=(item，index) in currentImgList
:key=index
imgItem
img:src= item . img class= img style= margin:0 10px；/
/div
/div
/div
/模板
脚本
从“better-scroll”导入b scroll；
导出默认值{
data() {
返回{
当前列表：[
{ img: require(././assets/image/zzb_1.png) }，
{ img: require(././assets/image/zzb_2.png) }，
{ img: require(././assets/image/zzb_3.png) }
],
};
},
已安装(){
this . slide _ x()；//水平滚动
},
方法：{
//初始化
_initScroll() {
如果(！this.scroll) {
this . scroll=new scroll(this。$ refs.wrapper，{//实例化bscroll需要两个参数，第一个是父框的dom节点。
StartX: 0，///配置详情请参考better-scroll的官方文档，在此不再赘述。
点击：真的，
没错，
Scroll: false，//忽略垂直滚动
eventPassthrough:垂直，
UseTransition: false //防止快速滑动触发的异常反弹。
});
}否则{
this . scroll . refresh()；//如果dom结构发生变化，调用此方法重新计算，保证正常滚动效果。
}
},
//计算宽度
_calculateWidth() {
//获取类名为imgItem的标签
让横冲直撞列表=这个。$ refs . wrapper child . getelementsbyclassname(
imgItem
);
//设置起始宽度
设init width=0；
//遍历标签
for(设I=0；我横冲直撞。i ) {
const item=横冲直撞列表[I]；
//添加每个标签的宽度。
init width=item . client width；
}
//设置可滚动的宽度
这个。$ refs . wrapper child . style . width=` { init width } px `；
},
slide_x() {
这个。$ NextTick (()={//this。$ NextTick是一个异步函数，目的是确保DOM已经呈现。
这个。_ init scroll()；//初始化
这个。_ calculate width()；//计算宽度
});
},
},
};
/脚本
插件的原作者是这样说的：
四. 容易出现问题的点：
在实例化BScroll之前，必须等到页面的DOM呈现完成。建议在挂接功能中进行。
子框的宽度大于父框的宽度。
最后
better-scroll插件作者的文章发现better-scroll真的很厉害！
当更好的卷轴遇到Vue
在Vue中实现水平滚动和更好的滚动
这就是这篇关于vue使用better-scroll实现水平滚动的文章。有关vue better-scroll实现水平滚动的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。