基于swiper5做的轮播图

<template>
  <div class="slideshow" :class="{'showBottomBtn':pageMode}">
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="(item,index) in picList" :key="index">
              <div class="img swiper-zoom-container imgOver" >
                <img :style="'height: ' + item.height + 'px;width:' + item.width +'px;'" :data-src="item.path" id="image" class="swiper-lazy"/>
                <div class="swiper-lazy-preloader"></div>
              </div>
              <div class="maskLayer abottom"  v-if="item.description">
                <div class="content">
                    <label class="info" v-if="item.description.length > 150" @click.stop="showInfo(item.description)">{{ item.description.substring(0,150) }}...</label>
                    <label class="info" v-else>{{ item.description }}</label>
                </div>
              </div>
            </div>
        </div>
        <div class="swiper-button-prev" @click="prev" v-if="pageMode"></div>
        <div class="swiper-button-next" @click="next" v-if="pageMode"></div>
    </div>
    <el-dialog top="20vh" class="abottom" :visible.sync="dialogInfo" @close="closeDialog">
        <div class="dia-info">{{ info }}</div>
    </el-dialog>
    <div class="theme" v-if="showBtn">
        <div class="content">
            <div class="theme-item" id="menuClick" :class="initId == t.id? 'active': ''" v-for="(t,i) in theme" :key="i" @click.stop="changeTheme(t)">{{ t.name }}</div>
            <div class="theme-item" :class="initId==-99? 'active': ''" id="menuClick" @click.stop="changeTheme({id: -99})">全部</div>
            <div class="theme-item full-mode"  id="menuClick" @click.stop="fullBtn">{{ fullScreenType }}</div>
            <div class="theme-item full-mode"  id="menuClick" @click.stop="prevNext">{{ pageMode?'底部翻页':'左右翻页' }}</div>
        </div>
    </div>
    <div class="mask-click" v-else @click="showBottom"></div>
    <div class="footer" v-if="!pageMode">
        <div class="footBtn" @click.stop="first">首页</div>
        <div class="footBtn" @click.stop="prev">上一页</div>
        <div class="footBtn" @click.stop="next">下一页</div>
        <div class="footBtn" @click.stop="last">尾页</div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
import "swiper/css/swiper.css";
import Swiper from 'swiper'
import objectFitImages from 'object-fit-images'
export default {
    data() {
        return {
            showBtn: false,
            dialogInfo: false,
            info: '',
            theme: [],
            picList: [],
            picInfo: [],
            swiper: null,
            searchForm: {
                pager: {
                    pageSize: 10,
                    page: 1,
                    totalCount: 0,
                },
            },
            containerWidth: '',
            containerHeight: '',
            isIE: Boolean,
            type: 0,
            initId: '',
            fullScreenType: '全屏模式',
            setTime: {},
            timeOut: null, // 菜单计时
            initTimeOut: null, // 初始化计时
            timer: null,
            pageMode: true,
        }
    },
    created() {
        this.isIE = /MSIE|Trident/.test(window.navigator.userAgent)
        objectFitImages()
        this.type = this.$route.query.type
        this.getSet()
        this.getScreen()
        this.getTheme()
        this.timer = setInterval(()=> {
            this.getSet()
        }, 5 * 60 * 1000)
    },
    computed: {
        autoplayDelay() {
            return this.setTime.no3;
        },
    },
    mounted() {
        document.addEventListener('touchmove', function(e) {
            e.preventDefault();
        }, { passive: false });
    },
    methods: {
        fullBtn() {
            const element = document.documentElement;
            if (document.fullscreenElement || document.webkitFullscreenElement) {
                this.fullScreenType = '全屏模式'
                if (document.exitFullscreen) {
                    document.exitFullscreen();
                } else if (document.webkitExitFullscreen) {
                    document.webkitExitFullscreen();
                }
            } else {
                this.fullScreenType = '退出全屏'
                if (element.requestFullscreen) {
                    element.requestFullscreen();
                } else if (element.webkitRequestFullscreen) {
                    element.webkitRequestFullscreen();
                }
            }
            this.hideMenu()
            this.initShow()
        }, 
        getSet() {
            axios({
                url: `${home}/net/showNo`,
                method: 'get',
            }).then(res=> {
                if(res.result.success) {
                    this.setTime = res.data
                    this.initSwiper()
                }
            })
        }, 
        hideMenu() {
            clearTimeout(this.timeOut)
            this.timeOut = setTimeout(()=> {
                this.showBtn = false
            }, this.setTime.no2)
        },
        prevNext() {
            this.pageMode = !this.pageMode
            this.initSwiper()
            this.hideMenu()
            this.initShow()
        },
        initShow() {
            clearTimeout(this.initTimeOut)
            this.initTimeOut = setTimeout(()=> {
                this.getPicList()
            }, this.setTime.no1)
        },
        initSwiper() {
            if (this.swiper) {
                this.swiper.destroy();
                this.swiper = null;
            }
            this.swiper = new Swiper('.swiper-container', {
                mode:'horizontal',
                loop: true,
                autoplay: {
                    delay: this.autoplayDelay,
                    disableOnInteraction: false,
                },
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                },
                touchEventsTarget: 'container',
                lazy: {
                    loadPrevNext: true,
                },
                speed: 600,
                mousewheel: true,
                keyboard: true,
                pagination: false,
                allowTouchMove: true,         
            },);
            this.swiper.lazy.load();
            this.swiper.update();
        },
        showBottom() {
            this.showBtn = true
            this.hideMenu()
            this.initShow()
        },
        getTheme() {
            axios({
                url: `${home}/net/showZts`,
                method: "get",
            }).then(res => {
                if(res.result.success) {
                    this.theme = res.data
                    if(!this.$route.query.type) {
                        this.initId =  res.data[0].id
                        sessionStorage.setItem('initId', res.data[0].id)
                    } else {
                        this.initId =  res.data[Number(this.$route.query.type) - 1].id
                    }
                    this.getPicList()
                }
            });
        },
        async getPicList(id) {
            if(id) {
                this.initId = id
            } else if(this.$route.query.type) {
                this.initId = Number(this.$route.query.type)
            } else {
                this.initId = sessionStorage.getItem('initId')
            }
            await axios({
                url: `${home}/net/findFiles`,
                method: "POST",
                data: {
                    parentId: this.initId
                }
            }).then(async res => {
                this.picList = []
                await Promise.all(res.data.map(async (image)=> {
                    let {img, width, height} = await this.getSize(config.resPre + image.path)
                    if (height > width) {
                        let float = width / height
                        height = this.containerHeight
                        width = float * height
                    } else {
                        let float = height / width
                        width = this.containerWidth
                        height = float * width
                    }
                    this.picList.push({
                        ...image,
                        path: img.src,
                        width,
                        height
                    })
                }))
                this.$forceUpdate()
                this.$nextTick(() => {
                    this.initSwiper()
                }) 
            });
        },
        getSize(src) {
            const imgData = src
            const img = new Image();
            return new Promise(resolve => {
                img.onload = ()=> {
                    const { width, height } = img;
                    resolve({ img, width, height})
                };
                img.src = imgData;
            })
        },
        getScreen() {
            this.containerWidth = window.screen.width 
            this.containerHeight = window.screen.height
        }, 
        changeTheme(item) {
            this.picList.length = 0
            this.getPicList(item.id)
            this.showBtn = false
            this.hideMenu()
            this.initShow()
        },
        first() {
            this.swiper.slideTo(1)
            this.restart()
            this.initShow()
        },
        prev() {
            this.swiper.slidePrev()
            this.restart()
            this.initShow()
        },
        next() {
            this.swiper.slideNext()
            this.restart()
            this.initShow()
        },
        last() {
            this.swiper.slideTo(this.picList.length)
            this.restart()
            this.initShow()
        },
        restart() {
            if(this.isIE) {
                this.swiper.autoplay.start()
            }
        },
        showInfo(info) {
            this.info = info
            this.dialogInfo = true
            this.swiper.autoplay.stop()
            this.initShow()
        },
        closeDialog() {
            this.info = ''
            this.dialogInfo = false
            this.swiper.autoplay.start()
            this.initShow()
        },
    },
    beforeDestroy() {
        clearInterval(this.timer);
        this.timer = null;
    },
}
</script>

<style lang="scss" scoped>
.slideshow.showBottomBtn {
    .abottom {
        bottom: 0 !important;
    }
}
.slideshow {
    width: 100%;
    height: 100%;
    .swiper-container {
        height: 100%;
        width: 100%;

        .swiper-slide {
            position: relative;
            .imgOver {
                width: 100%;
                height: 100%;
                #image {
                    object-fit: contain;
                    font-family: 'object-fit: contain;';
                }
            }
        }
        .maskLayer {
            position: absolute;
            left: 0;
            bottom: 60px;
            width: 100%;
            height: 100px;
            // background-color: #c6e1f257;
            background: #c6e1f29e;
            z-index: 999;
            .content {
                width: 100%;
                height: 100px;
                color: #000;
                font-size: 20px;
                text-align: left;
                margin: auto;
                line-height: 100px;
                padding: 0 25px;
                box-sizing: border-box;
                .info {
                    display: inline-block;
                    vertical-align: middle;
                    line-height: 26px;
                    user-select: none;
                }
            }
        }
        // .abottom {
        //     bottom: 0 !important;
        // }
        
    }

    .mask-click {
        width: 100%;
        height: 60px;
        position: fixed;
        left: 0;
        top: 0;
        z-index: 999 !important;
    }

    /deep/.el-dialog {
        position: absolute;
        left: 50%;
        bottom: 10px;
        transform: translateX(-50%);
        background: #FFF;
    }
    /deep/.el-dialog__headerbtn .el-dialog__close {
        color: red;
    }
    /deep/.el-dialog__headerbtn {
        font-size: 22px;
    }

    .dia-info {
        padding: 10px 20px 20px 20px;
        box-sizing: border-box;
        font-size: 20px;
        color: #000;
    }

    .theme {
        position: fixed;
        top: 0;
        left: 0;
        height: 60px;
        width: 100%;
        background: #c6e1f257;
        background: #c6e1f2f7;
        z-index: 999;
        .content {
            width: 80%;
            height: 100%;
            margin: 0 auto;
            overflow-x: scroll;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 0 20px;
            box-sizing: border-box;
            .theme-item {
                border: 1px solid #0f83cc;
                border-radius: 5px;
                color: #0f83cc;
                margin-right: 40px;
                padding: 8px 15px;
                box-sizing: border-box;
                cursor: default;
            }
            .theme-item:last-child {
                margin-right: 0;
            }
            /deep/.el-button:focus, .el-button:hover {
                color: #044066;
            }
            .full-mode {
                color: #fff;
                background: #0f83cc;
            }
        }
        .content::-webkit-scrollbar {
            display: none
        }
    }
    .footer {
        position: fixed;
        bottom: 0;
        left: 0;
        height: 60px;
        width: 100%;
        // background: #c6e1f257;
        background: #c6e1f29e;
        // padding: 0 600px;
        // box-sizing: border-box;
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 999;
        .footBtn {
            background: #0f83cc;
            color: #FFF;
            padding: 8px 15px;
            box-sizing: border-box;
            border-radius: 5px;
            margin-right: 50px;
            cursor: default;
        }
        .footBtn:last-child {
            margin-right: 0;
        }
    }
    .active {
        background: #0f83cc;
        color: #FFF !important;
    }
}
</style>