vue 点击按钮左右滑动 功能实现
点击按钮固定区域左右滑动
·
效果图:
完整代码:
<template>
<div ref="teacher" class="teacher_out">
<div class="teacher_list_out_out flexBetween">
<div class="teacher_btn" @click="fnPrev()" v-if="canScroll">
// 当currentClickNumber大于1表示右滑过,左滑标志亮起
<img
v-if="currentClickNumber > 1"
class="btn_active_icon"
src="../../assets/images/pc/teacher/left_active_icon.png"
alt=""
/>
// 当currentClickNumber小于1表示未右滑过,左滑标志置灰
<img
v-else
class="btn_icon"
src="../../assets/images/pc/teacher/left_icon.png"
alt=""
/>
</div>
<div class="teacher_list_out flexBetween">
<div class="teacher_list_box" :ref="`fixedBox`">
// 判断可以滑动,当teacherList的容量大于外层设定宽度,则可以滑动
<div
v-if="canScroll"
class="teacher_list flexCenter"
:style="
`width:${signleWidth *
teacherList.length}px;transform:translate(${scrollResultWidth}px,0);transition:0.7s;`
"
>
<img
:class="
teacherIndex == i
? 'teacher_imgs teacher_active'
: 'teacher_imgs'
"
:src="item.pictureSmall"
alt=""
v-for="(item, i) in teacherList"
:key="i"
@click="selectTeacherInfo(i, item)"
/>
</div>
// 判断不可以滑动,内容居中对齐,并且不显示左右按钮
<div v-else class="teacher_list flexVerticalCenter">
<img
:class="
teacherIndex == i
? 'teacher_imgs teacher_active'
: 'teacher_imgs'
"
:src="item.pictureSmall"
alt=""
v-for="(item, i) in teacherList"
:key="i"
@click="selectTeacherInfo(i, item)"
/>
</div>
</div>
</div>
<div
class="teacher_btn"
@click="fnNext(activeName)"
v-if="canScroll"
>
// 当noScrollRight为true表示可以右滑,右滑标志亮起
<img
v-if="noScrollRight"
class="btn_active_icon"
src="../../assets/images/pc/teacher/right_active_icon.png"
alt=""
/>
// 当noScrollRight为false表示不可以右滑,右滑标志置灰
<img
v-else
class="btn_icon"
src="../../assets/images/pc/teacher/right_icon.png"
alt=""
/>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
scrollResultWidth: 0, //transform滚动的距离
signleWidth: 100, //单个流程的宽度
activeName: 0,
currentClickNumber: 1,
noScrollRight: true,
canScroll: true,
teacherList: [],
teacherIndex: 0
}
},
methods: {
//初始化判断是否可以向右滚动
initgoRightArrow() {
const currentScrollWidth = this.$refs[`fixedBox`].clientWidth
const canNumber = Math.floor(currentScrollWidth / this.signleWidth) //可以放下的个数
//如果最后一个流程图标已经展示出来,则停止滚动
if (
this.currentClickNumber + canNumber >=
this.teacherList.length
) {
this.noScrollRight = false
this.canScroll = false
} else {
this.noScrollRight = true
this.canScroll = true
}
},
//点击上一个
fnPrev() {
//如果右点击的次数大于1,才可以左滚
if (this.currentClickNumber > 1) {
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.teacherList.length
) {
return
}
//说明放不下有滚动条
if (this.teacherList.length > canNumber) {
this.currentClickNumber += 1
if (
this.currentClickNumber + canNumber >=
this.teacherList.length
) {
this.noScrollRight = false
}
this.fnScrollWidth('add')
}
},
//translate的宽度
fnScrollWidth(type) {
let result = 0
if (type === 'reduce') {
result = 110
} else if (type === 'add') {
result = -110
} else {
result = 0
}
this.scrollResultWidth += result
},
}
}
</script>
<style lang="scss" scoped>
.flexVerticalCenter {
display: flex;
align-items: center;
justify-content: center;
}
.flexCenter {
display: flex;
align-items: center;
}
.teacher_list_out_out {
width: 1000px;
height: 90px;
margin: 30px auto 0;
.teacher_list_out {
width: 915px;
height: 90px;
position: relative;
margin: 0 auto;
padding: 0 24px;
box-sizing: border-box;
.teacher_list_box {
width: 915px;
flex: 1;
overflow: hidden;
.teacher_list {
width: 100%;
box-sizing: border-box;
padding: 20px 0;
white-space: nowrap;
.teacher_imgs {
width: 68px;
height: 68px;
margin-right: 30px;
border-radius: 50%;
cursor: pointer;
}
.teacher_imgs:last-child {
margin-right: 0;
}
.teacher_active {
width: 90px;
height: 90px;
}
}
}
}
.teacher_btn {
width: 42px;
height: 42px;
.btn_icon {
width: 42px;
height: 42px;
}
.btn_active_icon {
width: 42px;
height: 42px;
cursor: pointer;
}
}
}
</style>
更多推荐
所有评论(0)