遇到一个需求,商品的详情页是富文本形式的,需要点击图片的时候查看大图。解析富文本的插件用的是uParse修复版-html富文本加载按照文档处理可以获取图片的点击事件,但是点击预览图片的时候,小图没有问题,但是长图的时候,图片高度最多是屏幕高度,它会把图片宽度缩小,导致看起来是一个细长的图片。没办法只能自己处理图片预览
首先把uParse点击图片的改一下,因为它默认会预览图片
preview(src, $event) {
console.log("typeof this.imgOptions", typeof this.imgOptions);
// if (!this.imageUrls.length || typeof this.imgOptions === 'boolean') {
// } else {
// uni.previewImage({
// current: src,
// urls: this.imageUrls,
// loop: this.imgOptions.loop,
// indicator: this.imgOptions.indicator,
// longPressActions: this.imgOptions.longPressActions
// });
// }
if (this.imageUrls.length) {
this.$emit("preview", src, $event);
}
},
自己写预览长图的时候,最大的问题,长图的话,用image标签的widthFix
就可以滑动,但是无法实现缩放,,只有结合movable-area
才可以缩放,但是这个时候又无法实现滑动,我的解决版本就是在movable-area
里面放scroll-view
,用scroll-view
来包裹image。
<template>
<view @click="back">
<view class="img-page">
<movable-area scale-area>
<movable-view direction="all" scale="true" scale-min="1" scale-max="4">
<scroll-view scroll-y class="scroll-Y">
<view class="image_bg">
<image
class="item_image"
:src="imgs[0]"
mode="widthFix"
/>
</view>
</scroll-view>
</movable-view>
</movable-area>
</view>
</view>
</template>
<script>
export default {
data() {
return {
imgs: [],
currentImg: 0,
isPop: false,
};
},
onLoad(options) {
//上一个页面的图片参数,这里只处理一张图片的情况
let { imgs, current } = options;
this.imgs = JSON.parse(imgs);
},
methods: {
back() {
if (this.isPop) {
this.isPop = false;
return;
}
try {
this.$Router.back(1);
} catch (e) {
//TODO handle the exception
uni.navigateBack();
}
},
},
};
</script>
<style lang="scss" scoped>
movable-view {
display: flex;
align-items: center;
justify-content: center;
width: 750rpx;
height: 100vh;
}
movable-area {
height: 100vh;
width: 750rpx;
position: fixed;
overflow: hidden;
}
.img-page {
height: 100vh;
}
.scroll-Y {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
width: 100vw;
}
.image_bg {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
width: 100vw;
background-color: #000000;
}
.item_image {
width: 100%;
margin: auto; //这里有个小问题,flex布局下居中,如果不写这个,图片上面一部分会被截取掉
}
</style>