** Vue下js点击按钮元素左右滚动效果 **
** Vue下js点击按钮元素左右滚动效果 **小程序、前端交流群:609690978先上效果图代码:<div id="classifyScroll" :class="showLeftIcon ? 'active' : ''"><div class="classifys"><van-icon name="arrow" class="rightIcon" v-show=
·
** Vue下js点击按钮元素左右滚动效果 **
小程序、前端交流群:609690978
先上效果图
代码:
<div id="classifyScroll" :class="showLeftIcon ? 'active' : ''">
<div class="classifys">
<van-icon name="arrow" class="rightIcon" v-show="showRightIcon" @click="rightClick" />
<van-icon name="arrow-left" class="leftIcon" v-show="showLeftIcon" @click="leftClick" />
<p class="classifys-item" v-for="(item, index) in classify" :key="index" :ref="`item${index}`">{{ item.name }}</p>
</div>
</div>
export default {
data() {
return {
showRightIcon: true, // 是否显示右箭头
maxClickNum: 0, // 最大点击次数
lastLeft: 0, // 上次滑动距离
clickNum: 0, // 点击次数
classify: [{ name: '牛仔裤' }, { name: '夹克' }, { name: '衬衫' }, { name: '卫衣' }, { name: '皮夹克' }, { name: '玩儿' }, { name: '长裙' }, { name: '短裙' }, { name: '鞋' }]
}
},
computed: {
showLeftIcon() {
return this.clickNum > 0
}
},
methods: {
// 点击右箭头(左侧滚动)
rightClick() {
// 如果点击次数小于数组长度-1时,执行左滑动效果。
if (this.clickNum < this.classify.length - 1) {
// 获取当前元素宽度
let width = document.querySelectorAll('.classifys-item')[this.clickNum].offsetWidth
// 获取最后一个元素距离左侧的距离
let lastItemOffsetLeft = document.getElementsByClassName('classifys-item')[this.classify.length - 1].offsetLeft
// 获取可视区域宽度
const lookWidth = document.getElementById('classifyScroll').clientWidth
// 如果最后一个元素距离左侧的距离大于可视区域的宽度,表示最后一个元素没有出现,执行滚动效果
if (lastItemOffsetLeft > lookWidth) {
// 公示:滚动距离(元素的magin-left值) = 负的它自己的长度 + 上一次滑动的距离
document.getElementsByClassName('classifys')[0].style.marginLeft = `${-width + this.lastLeft}px`
this.lastLeft = -width + this.lastLeft
// 点击次数+1
this.clickNum += 1
// 记录到最后一个元素出现在可视区域时,点击次数的最大值。用于后面点击左侧箭头时判断右侧箭头的显示
this.maxClickNum = this.clickNum
}
/*
如果最后一个元素距离左侧的距离大于可视距离+自身的宽度,说明没有到最后一个, 显示右侧箭头,否则隐藏右侧箭头
注意:这里要加上其自身的宽度,否则要多点击一下才会隐藏。因为点击的时候实际上最后一个元素还没有滚动,
它距离左侧的距离是大于可视区域的(也就是说获取的是上一次点击之后,距离左侧的距离)
所以这里要加上其自身的宽度
看不懂的话不用管,反正加上就对了
*/
this.showRightIcon = lastItemOffsetLeft > lookWidth + width
}
},
// 点击左箭头(右侧滚动)
leftClick() {
// console.log(this.lastLeft, 'lastLeft')
// console.log(document.querySelectorAll('.classifys-item')[this.clickNum - 1].offsetWidth, '上一个的宽度')
// 当点击次数大于0时才触发,这样当点击次数clickNum等于1的到时候,clickNum--等于0.根据计算属性的判断会隐藏掉左箭头
if (this.clickNum > 0) {
// 获取当前元素宽度
let width = document.querySelectorAll('.classifys-item')[this.clickNum - 1].offsetWidth
// 公示:滚动距离(元素的magin-left值) = 它自己的长度 + 上一次滑动的距离
document.getElementsByClassName('classifys')[0].style.marginLeft = `${this.lastLeft + width}px`
this.lastLeft = width + this.lastLeft
// 点击次数-1
this.clickNum--
// 如果点击次数小于最大点击次数,说明最后一个元素已经不在可是区域内了,显示右箭头
if (this.clickNum < this.maxClickNum) {
this.showRightIcon = true
}
}
}
}
}
// 这里是用的scss
@function px($px) {
@return $px * 2px;
}
#classifyScroll {
padding: px(18) 0 px(15);
width: 95%;
overflow: hidden;
transition: all 0.3s;
&.active {
transition: all 0.3s;
width: 90%;
margin: 0 auto;
}
.classifys {
// 注意一下,这里没有用position: relative,,而图标用了position:absolute。因为这个东西是准备做组件的,我把相对定位写在父级的css标签上了。
transition: all 0.3s;
display: flex;
align-items: center;
.rightIcon {
position: absolute;
right: px(-5);
bottom: 47%;
transform: translate(0, 50%);
z-index: 9;
}
.leftIcon {
position: absolute;
left: px(-5);
bottom: 47%;
transform: translate(0, 50%);
z-index: 9;
}
&-item {
font-size: px(11);
font-weight: 400;
color: #ffffff;
line-height: px(16);
// margin-right: px(52);
padding-right: px(52);
white-space: nowrap;
}
}
}
更多推荐
已为社区贡献3条内容
所有评论(0)