Question

我试图在一行中显示图像，但我希望它是动态的，如果屏幕尺寸改变它不包装并在下面显示它们而是显示一个重定向到另一个页面的按钮...我不知道如何这样做

到目前为止，html：

<ion-row align-items-center>
    <ion-col col-auto>
        <img src="assets/images/image.png" />
    </ion-col>
    <ion-col col-auto>
        <img src="assets/images/image.png" />               
    </ion-col>
    <ion-col col-auto>
        <img src="assets/images/image.png" />               
    </ion-col>
    <ion-col col-auto>
        <img src="assets/images/image.png" />               
    </ion-col>
    <ion-col col-auto>
        <img src="assets/images/image.png" />               
    </ion-col>
    <ion-col col-auto>
        <img src="assets/images/image.png" />               
    </ion-col>
</ion-row>

如果屏幕方向改变/更小的屏幕设备（不是所需的效果）：

期望的效果应该是这样的：

我知道我必须在.ts方面生成列但不知道从哪里开始以及如何计算屏幕宽度大小...或者可能有更好的方法来做...任何建议，感谢名单

Answer 1

首先，您应该在html中添加一个按钮：

<ion-row id="myRow" align-items-center style="position: relative; width: 100%; overflow: hidden">
    <ion-col col-auto>
        <img src="assets/images/image.png" />
    </ion-col>
    ...
    <button id="button1" style="display: none; position: absolute; right: 0; top: 0">
       It is your button. It has postion absolute and placed in right top of the row. 
       But it display none now.
    </button>
</ion-row>

在.ts文件中，您可以检查行的宽度并决定显示或隐藏按钮：

let row = document.getElementById('myRow');
let width = row.clientWidth;
let button = document.getElementById('button1');
if(width <= xxx){
   button.style.display = "block";
}

希望这有帮助：）

连续动态添加列

1 个答案: