组件展示效果图

该页面是一个step组件内嵌一个右下角的按钮组件

关键代码

首先，el-scrollbar组件包住一个被内容撑开的横向列

......

获取el-scrollbar的scrollWidth（元素实际宽度，包括超出隐藏的部分），减去el-scrollbar的scrollLeft（元素距离左边窗口的距离），再减去el-scrollbar的clientWidth（元素包括padding、内容区的宽度，不含边框），得到可以向右移动的最边界位置。点击一次按钮，给scrollLeft或scrollRight赋一次值以更改位置。

// 滚动

handelScroll(action) {

var scrollbar = this.$refs.scrollbar.wrap;

// 点击按钮移动一次的步长

var width = 500;

// 向右可以移动的距离

let scrollRight =

scrollbar.scrollWidth -

scrollbar.scrollLeft -

scrollbar.clientWidth;

if (action == "left") {

if (scrollbar.scrollLeft > width) { // 判断滚动到最右时

scrollbar.scrollLeft -= width;

} else {

scrollbar.scrollLeft -= scrollbar.scrollLeft;

}

} else {

if (scrollRight > width) { // 判断滚动到最右时

scrollbar.scrollLeft += width;

} else {

scrollbar.scrollLeft += scrollRight;

}

}

}

is-horizontal隐藏el-scrollbar自身的滚动条

::v-deep .scrollbar {

.is-horizontal {

height: 0;

left: 0;

}

}

横向排列宽度由内容撑开需要父元素加入white-space：nowrap，子元素加入display: inline-block;

.step {

height: 540px;

white-space: nowrap;

padding-top: 50px;

.event-item {

width: 320px;

height: 100%;

display: inline-block;

}

}

step组件代码

按钮组件代码

这个按钮组件预留了翻页、纵向的功能

好文链接

评论可见，请评论后查看内容，谢谢！！！评论后请刷新页面。