前端学习笔记-图片预览

前端学习笔记二

使用vant的Swipe 轮播van-swipe 和ImagePreview 图片预览van-image-preview 和Lazyload
懒加载 实现点击哪张轮播图，哪张图预览

ImagePreview组件调用，images需要传入图片数组，当前的需求ImagePreview不需要轮播，只需要显示点击的轮播图的单张图。

HTML

<template>
    <div class="detail_contant">
            <van-swipe :autoplay='3000' @change="onChangeImg" >
                <van-swipe-item v-for="(image, index) in images" :key="index" @click="showImagePreview" >
                    <img v-lazy="image" alt="图片未显示"/>
                </van-swipe-item>
            </van-swipe>  
            <van-image-preview
                v-model="ImagePreviewShow"
                :images="imagesLists"
            >
            </van-image-preview>             
    </div>
</template>

JS

<script>
export default {
    data(){
        return{
            images: [
                require('@/assets/banner_3@2x.png'),
                require('@/assets/banner_4@2x.png'),
                require('@/assets/banner_5@2x.png'),
                require('@/assets/banner_1@2x.png'),
                require('@/assets/banner_2@2x.png'),
            ],
            ImagePreviewShow: false,
            index: 0,
            imagesLists: [],
            imgIndex:0,
        }       
    },
    mounted(){     
    },
    methods: {  
　　　　　//得到图片索引值       
        onChangeImg(index) {
            this.index = index;
        },  
        //显示预览图
        showImagePreview(){ 
            this.imgIndex = this.index;    
            this.ImagePreviewShow = true;      
            this.imagesLists = this.images.map((item)=>{
                return item;
            })        
            this.imagesLists = this.imagesLists.filter((item,index ) =>{  
                return index == this.imgIndex ;
            }) 
        },
    },

}
</script>

CSS

<style lang="scss" scoped>    
    .detail_contant{
        .van-swipe{
            width: 100%;
            .van-swipe-item {
                height: 100%;
                color: #fff;
                font-size: 20px;
                height: 6.16rem;
                text-align: center;
                vertical-align: middle;
                img{
                    width: 100%;
                    height: 100%;
                }
            }
            /deep/ .van-swipe__indicators{
                bottom:.27rem;
                /deep/ .van-swipe__indicator{
                    width: .25rem;
                    height:.25rem;
                    background: #e9e3d8;
                    opacity: 1;
                    &:not(:last-child){
                        margin-right:.26rem;
                    }
                    &.van-swipe__indicator--active{
                        background: #f78927;
                        opacity: 1;
                    }

                }
            }
        }
        .van-image-preview{
            /deep/ .van-image-preview__index{
                display: none;
            }
        }     
    }
</style>