Don't工作离子卷轴zoming

Don't work ion-scroll zoming

本文关键字：zoming 工作 Don      更新时间：2024-05-06

我正在使简单的图像视图具有缩放/滚动（xy）功能。但是使用离子卷轴无法得到正确的结果。对不起，我是新来的离子。这是我的.js代码部分和类。

JS-

<ion-content class="bg-color detail-cont">
    <ion-scroll class="filter-image" zooming="true" direction="xy" min-zoom="1" locked="false" has-bouncing="true">
        <div class="my-image" style="background: url('{{ getCurPhotoURI() }}')"></div>
    </ion-scroll>
</ion-content>

CSS

.filter-image {
    height:100% !important;
    width: 100% !important;
    background-color: black;
}
.my-image{
    width: 100% !important;
    height: 100% !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center, center !important;
}

怎么了？感谢您的预付款。当做

我认为缩放不起作用？这是因为您尚未将overflow-scroll属性设置为false。由于某些原因，如果不将其设置为false，ion-scroll元素将无法检测缩放。

所以你的代码看起来是这样的：

<ion-content class="bg-color detail-cont">
<ion-scroll class="filter-image" overflow-scroll="false" zooming="true" direction="xy" min-zoom="1" locked="false" has-bouncing="true">
    <div class="my-image" style="background: url('{{ getCurPhotoURI() }}')"></div>
</ion-scroll>

相关文章：