首页 文章

如何使用相同的离子html显示不同的图像?

提问于
浏览
1

我正在构建壁纸/画廊离子应用程序 . 我正在尝试以这样的方式设计应用程序,用户可以点击显示为离子卡的图像,并且用户将全屏显示图像,可能使用带有按钮的离子幻灯片下载图片如下 .

我知道一个事实是,使用相同的代码不止一次全屏显示图像并不是一个好习惯 .

有什么办法我可以多次使用相同的离子滑动代码显示相应的图像全屏 .

仅供参考,这是代码,

<ion-slidesj zoom="true">
  <ion-slide>
    <div class="swiper-zoom-container">
      <img src="assets/img/dog.jpg">
    </div>
    <ion-label>Woof</ion-label>
  </ion-slide>
  <ion-slide>

我希望多次使用相同的代码,使用不同的img srcs进行相应的图像用户点击 .

谢谢 .

2 回答

  • 1

    你只需要在这里创建 Angular/Ionic custom component .

    ionic generate component MyImageSlider
    

    之后将图像滑块包裹在其中,并在用户单击 ionic card 时将图像URL动态发送到该自定义组件 .

    您可以在此处查看如何创建custom Component .

  • 0

    您可以使用循环来遍历所有 . 将所有图像路径存储在字符串数组中,然后遍历该数组 . 并在此循环中打包您的代码块 .

相关问题