vue橱窗横向滚动组件

最新推荐文章于 2024-08-22 15:31:06 发布

maliu_

最新推荐文章于 2024-08-22 15:31:06 发布

阅读量449

点赞数

分类专栏： vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_41171651/article/details/128830689

版权

vue 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

在这里插入图片描述

<template>
  <div class="scroll" :style="{'width':width,'height':height}" id="suScroll">
    <i v-show="btn" class="el-icon-arrow-left circle-icon arrow-left" :class="{'disabled':lbtnDisabled}" @click="arrowClick('left')" :style="{'width':arrowWidth,'height':arrowWidth}" id="suScrollArrowLeft"></i>
    <i v-show="btn" class="el-icon-arrow-right circle-icon arrow-right" :class="{'disabled':rbtnDisabled}" @click="arrowClick('right')" :style="{'width':arrowWidth,'height':arrowWidth}" id="suScrollArrowRight"></i>
    <div class="show-window" id="showWindow">
      <div class="content-wrapper" id="contentWrapper">
        <slot></slot>
      </div>
    </div>
  </div>
</template>
<script>
export default{
  name:'su-scroll',
  props:{
    width:{
      type:String,
      default:'100%'
    },
    height:{
      type:String,
      default:'100%'
    },
    arrowWidth:{
      type:String,
      default:'40px'
    },
    step:{
      type:Number,
      default:100
    },
    gutter:{
      type:Number,
      default:15
    }
  },
  data(){
    return{
      btn:true,
      lbtnDisabled:true,
      rbtnDisabled:false
    }
  },
  mounted(){
    this.$nextTick(()=>{
      const $suScroll = document.getElementById('suScroll')
      const $suScrollArrowLeft = document.getElementById('suScrollArrowLeft')
      const $suScrollArrowRight = document.getElementById('suScrollArrowRight')
      const $showWindow = document.getElementById('showWindow')
      const $contentWrapper = document.getElementById('contentWrapper')
      const suScrollWidth = $suScroll.offsetWidth
      const suScrollHeight =  $suScroll.offsetHeight
      const suScrollArrowLeftWidth = $suScrollArrowLeft.offsetWidth
      const suScrollArrowLeftHeight = $suScrollArrowLeft.offsetHeight

      // 设置插入元素间距
      $contentWrapper.children.forEach(item=>{
        item.style.paddingRight = this.gutter + 'px'
      })

      // 设置显示窗口宽度
      $showWindow.style.width = suScrollWidth - 2*suScrollArrowLeftWidth + 'px'

      // 设置箭头高度
      $suScrollArrowLeft.style.top = suScrollHeight/2 + 'px'
      $suScrollArrowRight.style.top = suScrollHeight/2 + 'px'
      $suScrollArrowLeft.style.marginTop = -suScrollArrowLeftHeight/2 + 'px'
      $suScrollArrowRight.style.marginTop = -suScrollArrowLeftHeight/2 + 'px'

      // 获取每个插入元素的宽度
      const length = Array.prototype.reduce.call($contentWrapper.children,(a,b)=>{
        return a+b.offsetWidth
      },0)

      // 设置整体宽度
      $contentWrapper.style.width = length + 'px'

      // 根据宽高度设置左右按钮箭头大小
      $suScrollArrowLeft.style.fontSize = $suScrollArrowLeft.offsetWidth*0.8 + 'px'
      
      // 若整体<=显示窗口，隐藏按钮
      if ($contentWrapper.offsetWidth <= $showWindow.offsetWidth) {
        this.btn = false
        $contentWrapper.style.width = suScrollWidth + 'px'
        $showWindow.style.width = suScrollWidth + 'px'
        $contentWrapper.style.display = 'flex'
        $contentWrapper.style.justifyContent = 'space-between'
      }
    })
  },
  methods:{
    arrowClick(type){
      const $showWindow = document.getElementById('showWindow')
      const $contentWrapper = document.getElementById('contentWrapper')
      

      if (type==='left') {
        $showWindow.scrollLeft -= this.step
      }else{
        $showWindow.scrollLeft += this.step
      }
      
      // 设置滚动尽头按钮颜色变浅
      this.lbtnDisabled = parseFloat($showWindow.scrollLeft)===0
      this.rbtnDisabled = parseFloat($showWindow.scrollLeft)+parseFloat($showWindow.offsetWidth) >= parseFloat($contentWrapper.style.width)
    }
  }
}
</script>
<style scoped lang="scss">
.scroll{
  position: relative;
  .show-window{
    overflow-x: scroll;
    white-space: nowrap;
    margin: 0 auto;
    height: 100%;
    padding: 5px 10px;
    box-sizing: border-box;
    .content-wrapper{
      &>div{
        display: inline-block;
        // padding-right: 15px;
      }
      &>div:last-child{
        padding-right: 0;
      }
    }
  }

.arrow-left,.arrow-right{
  position: absolute;
  z-index: 100;
  top: 127px;
  cursor: pointer;
}
  .arrow-left{
    left: 0;
  }
  .arrow-right{
    right: 0;
  }
  ::-webkit-scrollbar{
    display: none; /*ChromeSafari*/
  }
  .circle-icon{
    background: #85C4FB;
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
  }
}
.disabled{
  opacity: 0.4;
}
</style>