vue element 框架 自定义轮播图，点击上下翻图，并让图片居中
生活随笔
收集整理的這篇文章主要介紹了
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{ //滾動divdisplay: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)) //截取字符串，移除pxconsole.log(height)let number = Math.round(height/150) //一個圖片75px,獲取高度一半需要多少圖片，讓其居中 console.log(number)// box.scrollTop = 500if(this.materialList.length>1){if ((this.materialKey == 0 && num > 0) ||(this.materialKey == this.materialList.length - 1 && this.materialList.length - 1>0 && num < 0) ||(this.materialKey > 0 &&this.materialKey < this.materialList.length - 1)) {this.materialKey += num;if(this.materialKey<number || this.materialKey+(number +1) > this.materialList.length){ //開始或結尾不滾動if(this.materialKey<number){box.scrollTop = 0}if(this.materialKey+(number +1) > this.materialList.length){box.scrollTop = (this.materialList.length)*75}} else {box.scrollTop += 75*num //一次滾動一個圖片的高度}}}},?
template
轉載于:https://www.cnblogs.com/s-quan/p/9189303.html
總結
以上是生活随笔為你收集整理的vue element 框架 自定义轮播图，点击上下翻图，并让图片居中的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： c#中string的操作
- 下一篇： 【软件需求工程与建模 - 小组项目】阶段