uni-app . 實現 圖片 左滑右滑 且能夠圖片手指縮放

// html

<template>
     <view>
            <view class="uni-padding-wrap uni-common-mt" @touchstart="start" @touchend="end">
                <movable-area scale-area>
                    <movable-view direction="all" @scale="onScale" scale="true" scale-min="1" scale-max="4" :scale-value="scale">
                        <image :src="img" mode="widthFix"></image>
                    </movable-view>
                </movable-area>
            </view>
    </view>
</template>

//js

<script>
    export default {
        data() {
            return {
                img:'',
                scale:1,
                startData:{
                    clientX:'',
                    clientY:''
                }
            }
        },
        onLoad(option) {
            this.img = option.imgs;
        },
        methods: {
            onScale(){
                
            },
            start(e){
                                
                this.startData.clientX=e.changedTouches[0].clientX;
                             
                this.startData.clientY=e.changedTouches[0].clientY;
            },
            end(e){
                const subX=e.changedTouches[0].clientX-this.startData.clientX;
                const subY=e.changedTouches[0].clientY - this.startData.clientY;
                if(subY>50 || subY<-50){
                    console.log('上下滑')
                }else{
                    if(subX>100){
                        console.log('右滑')
                    }else if(subX<-100){
                        console.log('左滑')
                    }else{
                        console.log('無效')
                    }
                }
            }
        }
    }
</script>

//css

<style>
movable-view {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height:100%;
}

movable-area {
    height: 100%;
    width: 100%;
    position:fixed;
    overflow: hidden;
}
    
movable-view image{
    width:100%;
}
</style>