ios手机浏览在H5页面中使用movable-view放大后的图片会变得很模糊。原理还不懂。但是自己研究了一下,用下面的代码就可以清晰一点,但是还是会有一点模糊。
template
<view class="content">
<image src="图片地址" mode="widthFix" @click="previewImage('图片')"> </image>
<view class="over" v-if="over" @click="over=0">//黑幕
<movable-area>
<movable-view class="max" direction="all" out-of-bounds="false" scale="true" scale-min="1" scale-max="4">//缩放倍数
<image :src="moveImg" mode="widthFix"></image>//要放大的图片
</movable-view>
</movable-area>
</view>
</view>
script
export default {
data() {
return {
over: 0,//是否预览的判断
moveImg: ''//需要放大图片的地址
};
},
methods: {
previewImage(val) {
this.moveImg = val//点击触发时间,赋值需要放大的图片地址
this.over = 1//显示黑幕
}
}
};
style
page {
width: 100%;
height: 100%;
}
.content {
width: 100%;
height: 100%;
}
.over {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000000;
}
movable-area {
width: 100%;
height: 100%;
}
movable-view {
width: 100%;
height: auto;
display: flex;
align-items: center;
justify-content: center;
}