vue左右点击滚动效果
~小仙女~ 人气:1本文实例为大家分享了vue实现左右点击滚动，效果如图
涉及功能点
1、在created中使用r e f s 结 合 refs结合refs结合nextTick仍然无法获取到元素的问题：添加定时器
2、左右按钮是否可点击根据数据以及当前分辨率可放下的个数确认
3、可适应不同分辨率下的情况
代码
<!-- -->
<template>
<div>
<div class="ProgressBoxTool" v-if="progressList && progressList.length">
<div class="processBox">
<div :class="currentClickNumber > 0 ? 'arrow' : 'arrow arrowOpacity'" @click="fnPrev()">
<img :src="arrowL" alt="" />
</div>
<div class="fixedBox" :ref="`fixedBox`">
<div
class="centerScroll"
:style="
`width:${signleWidth *
progressList.length}px;transform:translate(${scrollResultWidth}px,0);transition:1s;`
"
>
<div
class="signleTab"
v-for="(itemP, indexP) in progressList"
:key="indexP + 'progress'"
>
<div class="leftIcon">
<img class="pregressIcon" :src="icon" alt="" />
</div>
<!-- 最后一个不展示箭头 -->
<img
v-if="progressList.length > indexP + 1"
:src="iconArrow"
alt=""
class="arrowSquare"
/>
</div>
</div>
</div>
<div :class="noScrollRight ? 'arrow' : 'arrow arrowOpacity'" @click="fnNext(activeName)">
<img :src="arrowR" alt="" />
</div>
</div>
</div>
</div>
</template>
<script>
import arrowL from '@/assets/images/emergency/arrowL.png';
import arrowR from '@/assets/images/emergency/arrowR.png';
import icon from '@/assets/images/emergency/icon.png';
import iconArrow from '@/assets/images/emergency/iconArrow.png';
export default {
components: {},
data() {
return {
progressList: [
{ type: '1' },
{ type: '2' },
{ type: '1' },
{ type: '2' },
{ type: '1' },
{ type: '2' },
{ type: '1' },
{ type: '2' },
{ type: '1' },
{ type: '2' }
],
arrowL,
arrowR,
icon,
iconArrow,
currentProgressId: '',
scrollResultWidth: 0, //transform滚动的距离
signleWidth: 215, //单个流程的宽度
activeName: 0,
currentClickNumber: 0,
noScrollRight: true
};
},
created() {
this.$nextTick(() => {
setTimeout(() => {
this.initgoRightArrow();
});
});
},
methods: {
//初始化判断是否可以向右滚动
initgoRightArrow() {
const currentScrollWidth = this.$refs[`fixedBox`].clientWidth;
const canNumber = Math.floor(currentScrollWidth / this.signleWidth); //可以放下的个数
//如果最后一个流程图标已经展示出来，则停止滚动
if (this.currentClickNumber + canNumber >= this.progressList.length) {
this.noScrollRight = false;
return;
}
},
//点击上一个
fnPrev() {
//如果右点击的次数大于0，才可以左滚
if (this.currentClickNumber > 0) {
this.currentClickNumber -= 1;
this.noScrollRight = true;
this.fnScrollWidth('reduce');
} else {
return false;
}
},
//点击下一个
fnNext() {
const currentScrollWidth = this.$refs[`fixedBox`].clientWidth;
const canNumber = Math.floor(currentScrollWidth / this.signleWidth); //可以放下的个数
//如果最后一个流程图标已经展示出来，则停止滚动
if (this.currentClickNumber + canNumber >= this.progressList.length) {
return;
}
//说明放不下有滚动条
if (this.progressList.length > canNumber) {
this.currentClickNumber += 1;
if (this.currentClickNumber + canNumber >= this.progressList.length) {
this.noScrollRight = false;
}
this.fnScrollWidth('add');
}
},
//translate的宽度
fnScrollWidth(type) {
let result = 0;
if (type === 'reduce') {
result = 215;
} else if (type === 'add') {
result = -215;
} else {
result = 0;
}
this.scrollResultWidth += result;
},
}
};
</script>
<style lang="scss" scoped>
//中间的时间发展部分
.processBox {
display: flex;
align-items: center;
justify-content: space-between;
.arrow {
width: 60px;
cursor: pointer;
}
.arrowOpacity {
cursor: default;
opacity: 0.4;
}
.fixedBox {
flex: 1;
overflow: hidden;
}
.centerScroll {
// flex: 1;
box-sizing: border-box;
padding: 20px 0;
white-space: nowrap;
// width: calc(100% - 120px);
// overflow-x: auto;
.signleTab {
width: 215px;
position: relative;
display: inline-block;
.leftIcon {
width: 150px;
text-align: center;
cursor: pointer;
& > .pregressIcon {
width: 60px;
height: 60px;
}
}
& > .arrowSquare {
position: absolute;
top: 25px;
right: 0;
}
}
}
}
</style>
加载全部内容