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

<el-dialog class="material-dialog" title="" :visible.sync="showMaterial" width="50%" max-height="50%" top="10vh" center :close-on-click-modal=false> <!-- <div v-if="this.materialList.length>1" class="arrow-left" @click="materialKeyEdit(-1)"><img src="../../assets/image/arrow-left.png" alt=""></div> --> <div class="material-scroll" ref="material-scroll"> <div class="material-left" id="material-scroll"> <div class="material-box" v-for="(item,index) in materialList" :key="index" @click="materialKeyEdit(index)" :class="{'blue':index==materialKey}"> <div v-if="item.match(/((http|https):\/\/)/ig) && item.match(/((.jpg|.png|.gif))/ig)"><img style="max-width:100%;max-height:100%" class="" :src="item" alt=""> </div> <div v-else-if="item.match(/((http|https):\/\/)/ig) && item.match(/((.mp4|.rmvb|.rm|.3gp|.mov|.avi))/ig)"><video style="max-width:100%;max-height:100%" :src="item" alt=""></video> </div> <div style="width:80%" v-else>{{item}}</div> </div> </div> </div> <div class="material-right" style="" v-for="(item,index) in materialList" :key="index" v-show="index==materialKey"> <div class="arrow-left" @click="materialKeyAdd(-1)"><i class="el-icon-arrow-up"></i></div> <div v-if="item.match(/((http|https):\/\/)/ig) && item.match(/((.jpg|.png|.gif))/ig)"><img class="" :src="item" alt="" style="max-height:45vh"> </div> <div v-else-if="item.match(/((http|https):\/\/)/ig) && item.match(/((.mp4|.rmvb|.rm|.3gp|.mov|.avi))/ig)"><video style="max-height:45vh" :src="item" alt="" controls="controls"></video> </div> <div v-else>{{item}}</div> <div class="arrow-right" @click="materialKeyAdd(1)"><i class="el-icon-arrow-down"></i></div> <p style="text-align:center">{{index+1}} / {{materialList.length}}</p> </div> <!-- <div v-if="this.materialList.length>1" class="arrow-right" @click="materialKeyEdit(1)"><img src="../../assets/image/arrow-right.png" alt=""></div> --> </el-dialog>

轉載于:https://www.cnblogs.com/s-quan/p/9189303.html

總結

以上是生活随笔為你收集整理的vue element 框架 自定义轮播图，点击上下翻图，并让图片居中的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。