不要进行滚动缩放

Question

我正在制作具有缩放/滚动（xy）的简单图像视图。但我无法通过使用 ion-scroll 获得正确的结果。对不起，我是离子新手。 这是我的 .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;
}

怎么了？ 谢谢你的提前。 问候。

Answer 1

我假设缩放不起作用？这是因为您尚未将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>