点击左右箭头左右滑动效果

代码：

<template><div class="vertical-scroll-wrap"><svg class="left-prev"v-if="showPrevIcon"@click="prevItem"><use href="#icon-icon-active-star"></use></svg><div class="vertical-scroll"><div class="vertical-item"><p v-for="(item,index) in list"class="item":key="index">{{item.symbol}}</p></div></div><svg class="right-next"v-if="showNextIcon"@click="nextItem"><use href="#icon-icon-active-star"></use></svg></div>
</template>
<script>
export default {name: "test_new",data () {return {showNextIcon: true,clickNum: 0,lastLeft: 0,maxClickNum: 0, // 最大点击次数};},props: {list: {type: Array,default () {return [{symbol: 'ETC/USDT'},{symbol: 'ETH/USDT'},{symbol: 'ETQ/USDT'},{symbol: 'ETW/USDT'},{symbol: 'ETR/USDT'},{symbol: 'ETT/USDT'},{symbol: 'ETY/USDT'},{symbol: 'ETU/USDT'},{symbol: 'ETI/USDT'},{symbol: 'ETO/USDT'}]}}},computed: {showPrevIcon () {return this.clickNum > 0}},methods: {nextItem () {// 如果点击次数小于数组长度-1时，执行左滑动效果。if (this.clickNum < this.list.length - 1) {//获取当前元素宽度let width = document.querySelectorAll('.item')[this.clickNum].offsetWidth// 获取最后一个元素距离左侧距离let lastItemOffsetLeft = document.querySelectorAll('.item')[this.list.length - 1].offsetLeft// 获取可视区域宽度let lookWidth = document.querySelector('.vertical-scroll').clientWidthconsole.log('移动前》》》', lastItemOffsetLeft, lookWidth);// 如果最后一个元素距离左侧的距离大于可视区域的宽度，表示最后一个元素没有出现，执行滚动效果if (lastItemOffsetLeft > lookWidth) {// 公示：滚动距离（元素的magin-left值） = 负的它自己的长度 + 上一次滑动的距离document.querySelector('.vertical-item').style.marginLeft = `${-width + this.lastLeft}px`this.lastLeft = -width + this.lastLeftthis.clickNum += 1// 记录到最后一个元素出现在可视区域时，点击次数的最大值。用于后面点击左侧箭头时判断右侧箭头的显示this.maxClickNum = this.clickNum}/* 如果最后一个元素距离左侧的距离大于可视距离+自身的宽度，说明没有到最后一个, 显示右侧箭头，否则隐藏右侧箭头注意：这里要加上其自身的宽度，否则要多点击一下才会隐藏。因为点击的时候实际上最后一个元素还没有滚动，它距离左侧的距离是大于可视区域的（也就是说获取的是上一次点击之后，距离左侧的距离）所以这里要加上其自身的宽度看不懂的话不用管，反正加上就对了*/this.showNextIcon = lastItemOffsetLeft > lookWidth + width}},prevItem () {// 当点击次数大于0时才触发，这样当点击次数clickNum等于1的到时候，clickNum--等于0.根据计算属性的判断会隐藏掉左箭头if (this.clickNum > 0) {//获取当前元素宽度let width = document.querySelectorAll('.item')[this.clickNum - 1].offsetWidth// 公示：滚动距离（元素的magin-left值） = 它自己的长度 + 上一次滑动的距离document.querySelector('.vertical-item').style.marginLeft = `${width + this.lastLeft}px`this.lastLeft = width + this.lastLeft//点击次数-1this.clickNum--if (this.clickNum < this.maxClickNum) {this.showNextIcon = true}}}},
}
</script>
<style lang="scss" scoped>
.vertical-scroll-wrap {margin-top: 50px;display: flex;justify-content: space-around;align-items: center;.vertical-scroll {overflow: hidden;flex: 1;transition: all 0.3s ease;.vertical-item {transition: all 0.3s ease;display: flex;align-items: center;p {padding: 0 60px 0 0;color: #fff;}}}.left-prev {padding-right: 10px;}.right-next {padding-left: 10px;}.left-prev,.right-next {width: 30px;height: 30px;vertical-align: middle;}
}
</style>

抽取组件

<template><div class="optional-header"><div class="vertical-scroll-wrap"><div class="next-icon-wrap"><i class="el-icon-arrow-left slide-arrow-left pointer":style="`color:${preIconColor}`"v-if="showPrevIcon"@click="prevItem"></i></div><div class="vertical-scroll":style="`height:${height}`"><div class="content vertical-item-market"><!-- 可滑动内容 --><slot></slot></div></div><div class="next-icon-wrap"><i class="el-icon-arrow-right slide-arrow-right  pointer"v-if="showNextIcon":style="`color:${nextIconColor}`"@click="nextItem"></i></div></div></div>
</template><script>
export default {name: 'slider',data () {return {showOptionalHeader: true,showNextIcon: true,clickNum: 0,lastLeft: 0,maxClickNum: 0, // 最大点击次数}},props: {//高度height: {type: String,default: '60px'},//prev颜色preIconColor: {type: String,default: '#fff'},// next 颜色nextIconColor: {type: String,default: '#fff'},//   数据条数dataLength: {type: [Number, String],required: true}},computed: {showPrevIcon () {return this.clickNum > 0},},methods: {nextItem () {console.log('点击', this.dataLength);// 如果点击次数小于数组长度-1时，执行左滑动效果。if (this.clickNum < this.dataLength - 1) {//获取当前元素宽度let width = document.querySelectorAll('.item')[this.clickNum].getBoundingClientRect().width + 30let lastItemOffsetLeft = document.querySelectorAll('.item')[this.dataLength - 1].offsetLeftlet lookWidth = document.querySelector('.vertical-scroll').clientWidth// 如果最后一个元素距离左侧的距离大于可视区域的宽度，表示最后一个元素没有出现，执行滚动效果if (lastItemOffsetLeft > lookWidth) {// 公示：滚动距离（元素的magin-left值） = 负的它自己的长度 + 上一次滑动的距离document.querySelector('.vertical-item-market').style.marginLeft = `${-width + this.lastLeft}px`this.lastLeft = -width + this.lastLeftthis.clickNum += 1// 记录到最后一个元素出现在可视区域时，点击次数的最大值。用于后面点击左侧箭头时判断右侧箭头的显示this.maxClickNum = this.clickNum}/* 如果最后一个元素距离左侧的距离大于可视距离+自身的宽度，说明没有到最后一个, 显示右侧箭头，否则隐藏右侧箭头注意：这里要加上其自身的宽度，否则要多点击一下才会隐藏。因为点击的时候实际上最后一个元素还没有滚动，它距离左侧的距离是大于可视区域的（也就是说获取的是上一次点击之后，距离左侧的距离）所以这里要加上其自身的宽度看不懂的话不用管，反正加上就对了*/this.showNextIcon = lastItemOffsetLeft > lookWidth + width}},prevItem () {// 当点击次数大于0时才触发，这样当点击次数clickNum等于1的到时候，clickNum--等于0.根据计算属性的判断会隐藏掉左箭头if (this.clickNum > 0) {//获取当前元素宽度let width = document.querySelectorAll('.item')[this.clickNum].getBoundingClientRect().width + 30// 公示：滚动距离（元素的magin-left值） = 它自己的长度 + 上一次滑动的距离document.querySelector('.vertical-item-market').style.marginLeft = `${width + this.lastLeft}px`this.lastLeft = width + this.lastLeft//点击次数-1this.clickNum--if (this.clickNum < this.maxClickNum) {this.showNextIcon = true}}},async setNextIcon () {//获取当前元素宽度let lastItemOffsetLeft = document.querySelectorAll('.item')[this.optionalArr.length - 1]?.offsetLeftlet lookWidth = document.querySelector('.vertical-scroll')?.clientWidththis.showNextIcon = lastItemOffsetLeft > lookWidth}},mounted () {}
}
</script>
<style lang='scss' scoped >
.vertical-scroll-wrap {display: flex;height: 100%;width: 100%;justify-content: space-around;align-items: center;.label-value {color: var(--trade-symbol-market-table-symbol-color);line-height: 16px;margin-top: 3px;font-size: 13px;font-style: bold;}.slide-arrow-left {margin-right: 6px;color: var(--trade-heaer-nav-text-color);}.slide-arrow-right {margin: 0 9px 0 6px;color: var(--trade-heaer-nav-text-color);}.label {color: var(--trade-common-font-color);line-height: 16px;}.vertical-scroll {overflow: hidden;flex: 1;transition: all 0.3s ease;display: flex;align-items: center;.item {flex-shrink: 0;}.vertical-item,.vertical-item-market {transition: all 0.3s ease;display: flex;align-items: center;#item {margin-right: 30px;}}}.left-prev {padding-right: 10px;}.right-next {padding-left: 10px;}.left-prev,.right-next {width: 30px;height: 30px;vertical-align: middle;}
}
</style>

vue点击左右箭头左右滑动效果相关推荐

Vue点击左右箭头改变数据
vue点击左右箭头改变数据 html中绑定数据 <div class="content"><div class="text"><p ...
js点击按钮向左侧滑动效果
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" ...
vue点击实现箭头的向上与向下
html代码 <span class="iconfont icon-jiantouarrow486" v-if="show" @click="p ...
vue列表左右箭头滑动_Vue实现点击箭头上下移动效果
{{item.name}} //i ↓ ↑ Vue.config.productionTip = false//不去提示 new Vue({ el: "#app", data() ...
vue 上下键li_Vue实现点击箭头上下移动效果
{{item.name}} //i ↓ ↑ Vue.config.productionTip = false//不去提示 new Vue({ el: "#app", data() ...
vue列表左右箭头滑动_vue.js+elementUI实现点击左右箭头切换头像功能（类似轮播图效果）...
1.效果图如下 2.vue代码如下 indicator-position="none" :autoplay="false"> > {{items.b ...
** Vue下js点击按钮元素左右滚动效果 **
** Vue下js点击按钮元素左右滚动效果 ** 小程序.前端交流群:609690978 先上效果图代码: <div id="classifyScroll" :class= ...
微信小程序实现slideUp、slideDown滑动效果及点击空白隐藏功能示例
本文实例讲述了微信小程序实现slideUp.slideDown滑动效果及点击空白隐藏功能.分享给大家供大家参考,具体如下: 怎样实现jq中的slideUp或者slideDown这种动画效果呢,我的思路 ...
html仿微信滑动删除,使用Vue实现移动端左滑删除效果附源码
左滑删除在移动端是很常见的一种操作,常见于删除购物车中的商品,删除收藏夹中文章等等场景.我们只需要手指按住要删除的对象,然后轻轻向左滑动,便会出现删除按钮,然后点击删除按钮即可删除对象. 点击下载源码 ...

vue点击左右箭头左右滑动效果

点击左右箭头左右滑动效果

抽取组件

vue点击左右箭头左右滑动效果相关推荐

最新文章

热门文章