【Web前端问题】Web页面，vue技术环境，怎么实现像微信公众号文章内的图片点击放大，并可滑动到下一张的效果

Z时代
2024-01-10
分类：技术分享

微信公众号文章的图片都能够点击放大，包括像朋友圈下面购物，那个京东页面的轮播图也是可以实现点击放大的，再点击就变回原样，从Web的角度怎么在页面上添加这项功能？需要哪些技术？

回答：

不说插件，就说说原生实现

要用到的技术点：

vue组件

css3·transform

css3·transition

实现：

views.vue：点击后图片放大的那个组件

算了我就不写es6了（其实是不会），就用es5写吧，如果是在es6下开发应该知道怎么改，如果是在普通html开发的话，直接复制script下的代码到js文件中就行了。。。

<style>
    .m-img-view{
        /*样式自己写吧，不是很难*/
    }
    .u-mask{
        /*背景全屏全黑，应该知道怎么写吧。。。*/
    }
    .u-img{
        /*中间那块图片部分*/
    }
</style>
<template id="img_view">
    <div class="m-img-view" @click="eClick">
        <div class="u-mask"></div>
        <div class="u-img">
            <img :src="src"/>
        </div>
    </div>
</template>
<script>
/* es6...
    export default {
        props:['src'],
        methods:{
            eClick(){
                this.$emit('click')
            }
        }
    }
*/
Vue.component('img-views',{
    template:'#img_view',
    props:['src'],
    methods:{
        eClick:function(){
            this.$emit('clickit');
        }
    }
});</script>

然后是主界面的。。。

<style>
    ts-enter-active,
    ts-leave-active{
        transition:all .5s;
    }
    ts-enter,
    ts-leave-active{
        transform: translate(100%,0);
    }
</style>
<!--假设这个是那个轮播图的img标签中的一个。。-->
    <img src="abcdefg.png" @click="eImgClick($event)"/>
<!--假设这里放的是views的组件-->
<transition name="ts">
    <img-views v-if="isImgViewsShow" :src="imgViewsSrc" @clickit="eImgViewClick"></img-views>
</transition>
<script>
    new Vue({
        /*....*/
        data:{
            //...
            isImgViewsShow:0,
            imgViewsSrc:''
            //...
        },
        methods:{
            eImgClick:function(e){
                this.isImgViewsShow=1;
                this.imgViewsSrc=e.currentTarget.src
            },
            eImgViewClick:function(){
                this.isImgViewsShow=0;
            }
        }
    })</script>