首页 文章

不要工作离子滚动zoming

提问于
浏览 次
0

我正在制作简单的图像视图有缩放/滚动（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;
}

怎么了？谢谢你提前 . 问候 .

javascript css angularjs ionic-framework

1 回答

  • 0

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

相关问题