** Vue下js点击按钮元素左右滚动效果 **

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// 点击次数+1this.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// 点击次数-1this.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;}}
}

Vue下js点击按钮元素左右滚动效果相关推荐

js点击按钮实现全屏效果
多读多写多记录,多学多练多思考.----------- Grapefruit.Banuit Gang(香柚帮) 写一个点击按钮实现全屏的效果,话不多说,直接上代码: 首先准备一个按钮,写上点击事件 & ...
js点击按钮向左侧滑动效果
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" ...
vue如何输出一个值_如何利用vue获取当前点击的元素并传值（图文教程） -
thinkphp开发的一个项目,登录成功后又跳转到登录页面,在提交信息后输出session都是正常的,没有问题,但是页面跳转后,session出现丢失现象,无法正常完成登陆.通过查找资料,发现原来是b ...
Vue 中实现点击按钮
在 Vue 中实现点击按钮复制功能: 因为之前做过一个项目,有网关标识和场景标识,都是32个长度的随机字符串,后期需要用到这两个标识,以前用户可以手动复制过去用,但是随着数据的增多,这两个标识可能太 ...
js中点击按钮时变色，松开后恢复原来的颜色
js中点击按钮时变色,松开后恢复原来的颜色 // class.active{background: #1AB394;}//js<script type="text/javascript ...
Viewer.js点击按钮放大图片用法
1.Viewer.js点击按钮放大图片用法 <div onclick="getHideBig('hide_img_weight1')" id="btn_img_we ...
点击a标签，跳转到同一页面的指定内容，类似于点击按钮回到页面顶部效果
点击a标签,跳转到同一页面的指定内容,类似于点击按钮回到页面顶部效果这个效果实现方式很简单,只需要在a标签href内填上id名,在内容标签内加入id="名"便可. 下面是实现效果 ...
Space.js – HTML 驱动的页面 3D 滚动效果
为了让我们的信息能够有效地沟通,我们需要创建用户和我们的媒体之间的强有力的联系.今天我们就来探讨在网络上呈现故事的新方法,并为此创造了一个开源和免费使用的 JavaScript 库称为 space.j ...
Vue环境下，点击按钮进行上下页的切换
案例效果: 完整代码如下: <template><div id="page"><button class="btn" @clic ...

Vue下js点击按钮元素左右滚动效果

Vue下js点击按钮元素左右滚动效果

Vue下js点击按钮元素左右滚动效果相关推荐

最新文章

热门文章

** Vue下js点击按钮元素左右滚动效果 **

** Vue下js点击按钮元素左右滚动效果 **

** Vue下js点击按钮元素左右滚动效果 **相关推荐

最新文章

热门文章

Vue下js点击按钮元素左右滚动效果

Vue下js点击按钮元素左右滚动效果

Vue下js点击按钮元素左右滚动效果相关推荐