关于使用uni-app中的uni.previewImage(OBJECT)在移动端无法适配的解决方法之一

原因：使用uni.previewImage(OBJECT)好处就是很方便将图片进行预览，能够放大缩小或者是滑动，这些真的在h5体现的出来，但是由于最近遇到pad端上出现了图片不适配的情况，情况:在h5上能够很方便的查看全图，但是在pad上感觉异常的困难，滑动的时候就体验出来，特别是当图片比较大的时候很想骂x，而且使用这个方法的话会导致路径跳转，项目采用单页时就会出现一些问题，比如：数据被刷新掉（有可能的哦）。
解决过程：本人就这个问题吃饱没事干的去研究uni-app发现其中有一些很有意思的东西：movable-area
这个就是可放大，缩小，滑动的容器。
官方的表述是：

movable-area
可拖动区域

由于app和小程序的架构是逻辑层与视图层分离，使用js监听拖动时会引发逻辑层和视图层的频繁通讯，影响性能。为了方便高性能的实现拖动，平台特封装了movable-area组件。

还有movable-view，这个是用来存放具体拖动的东西的块，它必须放在movable-area里面不然放大缩小的就不行了
结合uni.previewImage(OBJECT)打开的图片能够滑动到下一张，这个不就是相当于轮播图的结构吗，两者结合一下：

<template>
	<view class="hAndW100">
		<swiper class="hAndW100" style="overflow: hidden;" :current="point">
			<swiper-item class="SwiperItem" v-for="(item,index) in listImages">
				<movable-area class="hAndW100 overhideAu">
					<movable-view direction="all" :disabled="disabled" :scale="scaleControl" class="hAndW100 displayIJcenter overhideAu">
						<image :src="item.picturePath" mode="aspectFit" class="hAndW100"></image>
					</movable-view>
				</movable-area>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		props: {
			listImages: {
			type:Array,
			default:[]
			},
			point: {
				type:Number,
				default:0
			}
		},
		data() {
			return {
				scaleControl:true,
				disabled:false,
				bindsOut:false,
				currentId:0,
				/* listImages:[
					{src:'../../static/logo.png'},
					{src:'../../static/0001.png'},
					{src:'../../static/0002.jpeg'}
				] */
			}
		},
		methods: {
		}
	}
	
</script>

<style scoped>
	uni-page-body{
		width: 100%;
		height: 100%;
	}
	.overhideAu{
		overflow: auto;
		white-space: normal;
		
	}
	.SwiperItem{
		overflow: scroll;
		background-color: #333333;
		touch-action: auto
	}
	.hAndW100{
		width: 100%;
		height: 100%;
	}
	.displayIJcenter{
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
</style>

如果是要加上关闭功能的话可以在引用组件再加上一层进行自定义
用上面的方式去做就是pad中的app也可行