vue element 框架 自定义轮播图,点击上下翻图,并让图片居中

1、素材展示窗口,左侧预览滚动区域按分辨率做一屏最大预览数量做均分(超过最大预览数量是滚动条滑动)
 2、左侧预览滚动区域增加浅灰色底色要求与滚动条颜色区分
 3、预览滚动区域单个区域高度固定,素材图按比例缩放
 4、素材图展示大图上下顶部及底部区域增加上下翻页箭头,点击有按压效果
 5、预览的素材大图为左侧预览区域居中的素材,上下翻页,滚动区域居中素材跟随翻滚
  以上是需求,下面贴代码

轮播图效果

 

 css

.material-row {
  display: inline-block;
  width: 55px;
  max-height: 60px;
//   float: left;
  margin-left: 3px;
  cursor: pointer;
//   vertical-align: center;
}


.material-scroll{ //滚动div
  display:flex;
  height:70vh;
  justify-content: center;
  align-items: center;float: left;
  width: 25%;
  overflow-y: auto;
  // background: #ddd;
}

.material-left{
   width: 80%;
   max-height: 70vh;
  //  overflow-y: auto;
  //  display:flex;
  //  justify-content: center;
  //  align-items: center;
   
  //  float: left;
  //  max-height: 300px;
  .material-box{
    margin-bottom: 5px;
    
    >div{
      cursor: pointer;
      display: flex;
      justify-content: center;
      align-items: center;  
      height: 70px;
      width:95%;
      border: 1px solid #ddd;
      background: #fff;
      overflow: hidden;
    }
  }
  .material-box:hover{
    border: 2px solid blue;
  }
  .blue{
    border: 2px solid blue;
  }
}
.material-right{
  height:70vh;
  text-align:center;
  margin-left: 26%;
  position: relative;
  margin-right:10px;
  // display: flex;
  // justify-content: center;
  // align-items: center;  

  >div{
    height: 66vh;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
    .arrow-left {
      position: absolute;
      top: -0%;
      left: 2%;
      cursor: pointer;
      // background: #dcdfe6;
      width:95%;
      height: 6vh;
      font-size: 50px;
      font-weight: bold;
    }
    .arrow-right {
      position: absolute;
      bottom: 5%;
      left: 2%;
      cursor: pointer;
      // background: #dcdfe6;
      width:95%;
      height: 6vh;
      font-size: 50px;
      font-weight: bold;
    }
    .arrow-left:hover{
      background: #dcdfe6;
      opacity: 0.5;
      color: #fff;
    }
    .arrow-right:hover{
      background: #dcdfe6;
      opacity: 0.5;
      color: #fff;
    }
}

  

js

 
  
// 素材弹框
openMaterial(list, item, index) {
// console.log(list)
this.materialList = list;
this.showMaterial = true;
this.materialKey = index;
setTimeout(()=> { //初始化滚动高度,带定时器获取元素
let box = this.$refs['material-scroll']
box.scrollTop = 0
}, 50 )
},
materialKeyEdit(num) {
      // console.log(this.materialKey)
     
      this.materialKey = num
    },
    materialKeyAdd(num){ //上下键函数
      let box = this.$refs['material-scroll']
      // console.log(this.$refs['material-scroll'])
      console.log(window.getComputedStyle(box).height)
      let px = window.getComputedStyle(box).height  //可视范围的高度
      let height = Number(px.substring(0,px.length-2)) //截取字符串,移除px
      console.log(height)
      let number = Math.round(height/150) //一个图片75px,获取高度一半需要多少图片,让其居中
      console.log(number)
      // box.scrollTop = 500
      if(this.materialList.length>1){
        if
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
可以参考以下步骤来自定义一个 Vue 轮播图组件: 1. 创建一个 Vue 组件,并定义需要的属性。例如,轮播图列表、轮播图宽度、轮播时间间隔等。 ```javascript <template> <div class="carousel"> <div class="carousel-wrapper" :style="{ width: wrapperWidth + 'px' }"> <div class="carousel-content" :style="{ transform: 'translateX(' + translateX + 'px)' }"> <div v-for="(item, index) in list" :key="index" class="carousel-item" :style="{ width: itemWidth + 'px' }"> <img :src="item.src" alt=""> </div> </div> </div> </div> </template> <script> export default { name: 'Carousel', props: { list: { type: Array, default: () => [] }, interval: { type: Number, default: 3000 }, width: { type: Number, default: 600 } }, data() { return { currentIndex: 0, itemWidth: 0, wrapperWidth: 0, translateX: 0, timer: null } }, mounted() { this.init() }, methods: { init() { this.itemWidth = this.width this.wrapperWidth = this.width * this.list.length this.autoPlay() }, autoPlay() { this.timer = setInterval(() => { this.next() }, this.interval) }, next() { this.currentIndex = (this.currentIndex + 1) % this.list.length this.translateX = -this.currentIndex * this.itemWidth } } } </script> ``` 2. 在组件中实现轮播图的逻辑。例如,自动播放、手动滑动等。 3. 根据需要添加样式,使组件的 UI 更美观。 4. 在父组件中使用自定义轮播图组件。 ```javascript <template> <div> <carousel :list="list" :interval="3000" :width="600"></carousel> </div> </template> <script> import Carousel from './Carousel.vue' export default { name: 'App', components: { Carousel }, data() { return { list: [ { src: 'https://picsum.photos/600/300?random=1' }, { src: 'https://picsum.photos/600/300?random=2' }, { src: 'https://picsum.photos/600/300?random=3' } ] } } } </script> ``` 以上就是自定义 Vue 轮播图组件的基本步骤。当然,可以根据实际需要进行更多的扩展和优化。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值