Как я могу реализовать защемление / защемление с помощью Ionic?

Question

Я использую 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"

Теперь вы можете сжимать / сжимать экран на своем смартфоне. Но я не знаю почему и почему.

Кроме того, если высота достаточно велика, чтобы требовать вертикальной прокрутки, я не могу прокручивать горизонтально после сжатия экрана.

Не знаю почему. Я хочу, чтобы после увеличения экрана работала горизонтальная прокрутка.

Пожалуйста, дайте мне знать, если кто знает как.

Answer 1

Вы можете использовать Pinch zoom for Angular.

В модуле предусмотрены возможности увеличения, уменьшения и позиционирования изображения с помощью жестов на сенсорном экране.

Посмотрите живую демонстрацию. его легко установить.

1 - Установите пакет npm.

npm i ngx-pinch-zoom

2 - Модуль импорта в у вас ц. нравитьсяhome.module.ts:

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

@NgModule({
    imports: [ PinchZoomModule ]
})

3 - в вашем html

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

Answer 2

Это работает в ionic 4+. Проверено на ionic 5.

Сведите пальцы, чтобы увеличить всю страницу, определенный раздел или изображение.

Вы можете сделать следующее.

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

Вышеупомянутый метод позволяет масштабировать всю страницу в Интернете. Не для мобильных платформ.

Для мобильных платформ. Установите щипок для увеличения - http://ivylab.space/pinch-zoom

или же npm i ngx-pinch-zoom

следуйте за решением @AliGhassan для оставшейся настройки.

Теперь, чтобы включить масштабирование всей веб-страницы, установите теги html для ионного контента следующим образом в файле page.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 и т. д.

Спасибо :)

Answer 3

В моем случае злоупотребление ионными слайдами было совершенно нормальным, когда я использовал только одно изображение, которое я хотел увеличить или масштабировать. Он также поддерживает двойное касание, что делает его использование более плавным.

используя vue и ionic, например:

      <template>
...
        <ion-slides :options="sliderOptions" zoom>
          <ion-slide>
            <div class="swiper-zoom-container">
              <img :src="`${yourImageUrl}`" />
            </div>
          </ion-slide>
        </ion-slides>
...
</template>

если вы используете параметры API, передайте объект конфигурации

      let sliderOptions = {
  zoom: {
    maxRatio: 2,
  },
};

если вы затем создадите его и дважды коснетесь изображения или уменьшите масштаб