关于使用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)打开的图片能够滑动到下一张,这个不就是相当于轮播图的结构吗,两者结合一下:








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

你可能感兴趣的:(关于使用uni-app中的uni.previewImage(OBJECT)在移动端无法适配的解决方法之一)