如何使用 Ionic 实现夹入/夹出？答案

【问题标题】：How can I implement pinch-in / pinch-out with Ionic?如何使用 Ionic 实现夹入/夹出？
【发布时间】：2020-01-31 17:12:22
【问题描述】：

我使用 Ionic4 和 Angular8。

我想在智能手机上张开/张开屏幕。

我尝试了什么 index.html 中添加了以下描述。

<meta name = "viewport" content = "viewport-fit = cover, width = device-width, initial-scale = 1.0, minimum-scale = 1.0, maximum-scale = 4.0, user-scalable = yes" />

但出乎意料的是，在真机上并没有运行。

我也试过了。

以下内容已添加到。

scrollX = "true"

然后，您现在可以在智能手机上捏合/张开屏幕。但我不知道为什么或为什么。

另外，如果的高度大到需要垂直滚动捏住屏幕后无法水平滚动。

我不知道为什么。我想在屏幕放大后进行水平滚动。

如果有人知道，请告诉我。

【问题讨论】：

你的意思是要放大和缩小吗？
是的。我想放大和缩小智能手机的屏幕。

标签： html angular ionic-framework pinch ion-content

【解决方案1】：

您可以使用 Pinch zoom for Angular 。

该模块提供了使用触摸屏上的手势放大、缩小和定位图像的机会。

Check out live demo 。它易于安装。

1 - 安装 npm 包。

npm i ngx-pinch-zoom

2 - 在你的 ts 中导入模块。喜欢home.module.ts:

import { PinchZoomModule } from 'ngx-pinch-zoom';

@NgModule({
    imports: [ PinchZoomModule ]
})

3 - 在你的 html 中

<pinch-zoom>
    <img src="path_to_image" /> 
</pinch-zoom>

【讨论】：

谢谢，我可以按照说明放大和缩小图像。
有没有办法放大和缩小整个页面，而不仅仅是图像？
如果缩放与否，请尝试添加包含您的数据的 div。
很抱歉回复晚了。我不知道如何应用上述支持，所以我在 ion-content 中添加了 scrollX = "true"。非常感谢。

【解决方案2】：

这适用于离子 4+。在离子 5 上测试。

捏合以放大整个页面或特定 div 或图像。

您可以执行以下操作。

<ion-content scrollX="true" scrollY="true">
...your content.
<ion-content>

上面的方法可以让捏放大网页上的整个页面。不适用于移动平台。

适用于移动平台。安装捏缩放从 - http://ivylab.space/pinch-zoom

或 npm i ngx-pinch-zoom

关注@AliGhassan Solution 进行剩余设置。

现在要启用捏缩放整个网页，在 page.html 文件中为 ionic 内容设置 html 标签，如下所示

<ion-content scrollX="true" scrollY="true">
   <pinch-zoom [properties]="zoomProperties">
     <ion-grid>
       ....contents.. 
     </ion-grid>
   </pinch-zoom>
</ion-content>

在 page.ts 文件中为缩放属性创建如下变量

zoomProperties = {
  "double-tap": true, // double tap to zoom in and out.
  "overflow": "hidden",// Am not sure. But Documentation says, it will not render elements outside the container.
  "wheel": false, // Disables mouse - To enable scrolling. Else mouse scrolling will be used to zoom in and out on web.
  "disableZoomControl": "disable", // stops showing zoom + and zoom - images.
  "backgroundColor": "rgba(0,0,0,0)" // Makes the pinch zoom container color to transparent. So that ionic themes can be applied without issues.
 }

现在，您应该也可以在移动平台上进行捏合缩放了。

如果您更感兴趣，您可以在图像或 div 等上实现相同的概念。

谢谢你:)

【讨论】：