<template>
<view >
<movable-area scale-area :style="{height: imgHeight+'px'}">
<movable-view direction="all" scale scale-min="1" scale-max="10" :out-of-bounds="true" :style="{height: imgHeight+'px',width: imgScorllWidth + 'px'}">
<scroll-view class="scroll-view_H" scroll-x="true" scroll-anchoring="true" :style="{height: imgHeight+'px',width: imgScorllWidth + 'px'}">
<view class="cover-img cover-img-right" :style="{height: imgHeight+'px',width: imgScorllWidth + 'px'}">
<image src="https://cdn.zailianclub.com//article/78a8f61f-5cf1-07f7-79b3-117ecaaf3c35.jpg" :style="{height: imgHeight+'px',width: imgScorllWidth + 'px'}" @load="onImageLoad" mode="heightFix"></image>
</view>
</scroll-view>
</movable-view>
</movable-area>
</view>
</template>
<script>
export default {
data(){
return {
imgHeight: '600',
imgScorllWidth: ''
}
},
methods:{
onImageLoad: function(e){
let oImgW = e.detail.width; //图片原始宽度
let oImgH = e.detail.height; //图片原始高度
this.imgScorllWidth = oImgW / oImgH * this.imgHeight;
},
}
}
</script>
<style lang="scss" scoped>
movable-view {
display: flex;
justify-content: center;
width: 100%;
height:100%;
}
movable-area {
height: 100%;
width: 100%;
position:fixed;
overflow: hidden;
}
</style>
- 发布:2023-05-31 18:33
- 更新:2023-06-02 15:14
- 阅读:462
产品分类: uniapp/小程序/微信
PC开发环境操作系统: Windows
PC开发环境操作系统版本号: Windows 10 家庭中文版
HBuilderX类型: Alpha
HBuilderX版本号: 3.8.1
第三方开发者工具版本号: 1.06.2210310
基础库版本号: 2.30.3
项目创建方式: HBuilderX
示例代码:
操作步骤:
<template>
<view >
<movable-area scale-area :style="{height: imgHeight+'px'}">
<movable-view direction="all" scale scale-min="1" scale-max="10" :out-of-bounds="true" :style="{height: imgHeight+'px',width: imgScorllWidth + 'px'}">
<scroll-view class="scroll-view_H" scroll-x="true" scroll-anchoring="true" :style="{height: imgHeight+'px',width: imgScorllWidth + 'px'}">
<view class="cover-img cover-img-right" :style="{height: imgHeight+'px',width: imgScorllWidth + 'px'}">
<image src="https://cdn.zailianclub.com//article/78a8f61f-5cf1-07f7-79b3-117ecaaf3c35.jpg" :style="{height: imgHeight+'px',width: imgScorllWidth + 'px'}" @load="onImageLoad" mode="heightFix"></image>
</view>
</scroll-view>
</movable-view>
</movable-area>
</view>
</template>
<script>
export default {
data(){
return {
imgHeight: '600',
imgScorllWidth: ''
}
},
methods:{
onImageLoad: function(e){
let oImgW = e.detail.width; //图片原始宽度
let oImgH = e.detail.height; //图片原始高度
this.imgScorllWidth = oImgW / oImgH * this.imgHeight;
},
}
}
</script>
<style lang="scss" scoped>
movable-view {
display: flex;
justify-content: center;
width: 100%;
height:100%;
}
movable-area {
height: 100%;
width: 100%;
position:fixed;
overflow: hidden;
}
</style>
<template>
<view >
<movable-area scale-area :style="{height: imgHeight+'px'}">
<movable-view direction="all" scale scale-min="1" scale-max="10" :out-of-bounds="true" :style="{height: imgHeight+'px',width: imgScorllWidth + 'px'}">
<scroll-view class="scroll-view_H" scroll-x="true" scroll-anchoring="true" :style="{height: imgHeight+'px',width: imgScorllWidth + 'px'}">
<view class="cover-img cover-img-right" :style="{height: imgHeight+'px',width: imgScorllWidth + 'px'}">
<image src="https://cdn.zailianclub.com//article/78a8f61f-5cf1-07f7-79b3-117ecaaf3c35.jpg" :style="{height: imgHeight+'px',width: imgScorllWidth + 'px'}" @load="onImageLoad" mode="heightFix"></image>
</view>
</scroll-view>
</movable-view>
</movable-area>
</view>
</template>
<script>
export default {
data(){
return {
imgHeight: '600',
imgScorllWidth: ''
}
},
methods:{
onImageLoad: function(e){
let oImgW = e.detail.width; //图片原始宽度
let oImgH = e.detail.height; //图片原始高度
this.imgScorllWidth = oImgW / oImgH * this.imgHeight;
},
}
}
</script>
<style lang="scss" scoped>
movable-view {
display: flex;
justify-content: center;
width: 100%;
height:100%;
}
movable-area {
height: 100%;
width: 100%;
position:fixed;
overflow: hidden;
}
</style>
预期结果:
期望movable-area组件中的图片在ios中也能清晰放大
期望movable-area组件中的图片在ios中也能清晰放大
实际结果:
期望movable-area组件中的图片在ios放大十分模糊
期望movable-area组件中的图片在ios放大十分模糊
bug描述:
movable-area 组件中的图片,在ios放大十分模糊,但是安卓手机上就非常清晰甚至能看清图片的纹理,对比非常明显,我将对比图放在附件中。也可运行我的代码示例,对bug进行复现。