uni-app点击预览大图，并可进行缩放

uni-app预览大图且可进行缩放，我们可以使用uni-app内置的组件movable-area

首先为了我们点击预览功能可以被更多地方调用使用，避免重复的代码出现，我们可以封装一个预览的组件

效果图

   --------->>>         

 组件：

<template>
    <div class="bigImgComponent" @click="bigImgclick()">
        <movable-area>
            <movable-view  direction="none" scale-value="1" scale-min="1" scale="true" scale-max="4">
                <img :src="imgVal" alt="">
            </movable-view>
        </movable-area>
    </div>
</template>

<script lang="ts">
import Vue from "vue";
export default Vue.extend({
    name: "bigImg",
    props: {
        imgVal:String,
        closeBigImg: {
            type: Function,
            default: null
        }
    },
    data() {
        return {

        }
    },
    methods:{
        // 通过调用父组件关闭大图方法，帮助关闭大图
        bigImgclick(){
            this.$emit('closeBigImg')
        }
    }
})
</script>

<style lang="scss">
.bigImgComponent{
    width: 100%;
    overflow: hidden;
    height: 100vh;
    top: auto;
    position: absolute;
    left: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);//灰色背景
    img{
        width:100%;
        height:100%;
    }
}
//movable-area需要设置宽高
movable-area{
    width: 100%;
    height: 100%;
    top: auto;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 9999;
    movable-view{
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        img {
            width: 90% !important;
            height: auto !important;
        }
    }
}
</style>

在需要调用的地方引用组件

具体其他css大家可以自己补全

<template>
    <div>
        <p  @click="showBigImg(imgs)">
             <img :src="imgs" alt="" class="Imgss">
        </p>
    </div>
    <bigImg  v-if="showBigImage" class="big-img-boxs" :imgVal="imgVals" @closeBigImg="closeBigImg"></bigImg>
</template>
<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
    data() {
        return {
            imgs: '',//可以先写死一个进行调试
            imgVals:'', // 大图地址
            showBigImage:false,//控制是否显示大图
            
        }
    }
    methods: {
        // 查看大图
        showBigImg (val:any) {
            this.showBigImage = true
            this.imgVals = val
        },
        //关闭大图
        closeBigImg () {
            this.showBigImage = false
            this.imgVals = ''
        },
    }
})
</script>
<style scoped lang="scss">
.Imgss{
    max-width: 100%;
}
.big-img-boxs{
    position: sticky;
    bottom: 0;
    top: 0;
}
</style>

如果大家是一个列表，列表过长点击弹出大图时滑动会穿透到底部内容也被滑动，那可以给最外成dom做一个动态的样式变换

当大图弹出时设置为overflow: hidden !important;

帮助解决内容过多时，弹出大图后滑动穿透到底部内容被滑动

切记关闭时要恢复为原样式