原因:使用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也可行