Question

我一直在尝试使用Ionic2开发应用程序，但由于缺乏我发现的信息，我一直遇到麻烦。

我希望我能让这个易于理解，但我的主要问题是生成一个全屏滑块或滑块本身占据整个屏幕宽度。

但是，这不是我想要的。我想要一个带有许多不同图片的部分及其相应的标题。但由于你只能在屏幕上看到一些照片，你必须水平滚动才能看到其余的照片。此外，滚动必须比

更平滑

我已经启动了网络和应用程序开发，所以请原谅我，如果这太简单了。你怎么能用Ionic2做水平可滚动部分？

这就是我所拥有的：

HTML

    <div class="tus-anuncios-slider-slides">
        <ion-slides pager (change)="onSlideChanged($event)" (move)="onSlideMove($event)" loop="true" autoplay="true">

        <ion-slide>
            <div class="tus-anuncios-slider-slides-1">
                <img src="http://www.wormsandgermsblog.com/files/2009/02/PETS_0803_dog_bath1.jpg">
                <p>Cuidador de Mascotas</p>
            </div>
        </ion-slide>



        <ion-slide>
            <div class="tus-anuncios-slider-slides-2">
                <img src="http://static1.squarespace.com/static/53f8d1ace4b0f0d1ac1219aa/56717c8da2bab81949502181/56717ebd25981dd75e7d5a89/1450278591780/Aviator+Boy.jpg?format=1500w">
               <p>Niñera con experienc...</p>
            </div>
        </ion-slide>


        <ion-slide>
            <div class="tus-anuncios-slider-slides-3">
                <img src="https://orangecountyeldercare.files.wordpress.com/2012/06/dreamstime_m_16251832.jpg">
                <p>Cuidado de ancianos</p>
            </div>
        </ion-slide>
    </ion-slides>
    </div>

Answer 1

我不确定如果我理解你的问题但要回答你，是的，可以这样做而不是全屏：

我想要一个带有许多不同图片的部分及其对应的部分字幕。

<ion-slides> 
    <ion-slide>
        <ion-card>
            <img src="http://www.wormsandgermsblog.com/files/2009/02/PETS_0803_dog_bath1.jpg" />
            <ion-card-content>
                <ion-card-title>
                    Nine Inch Nails Live
                </ion-card-title>
                <p>Cuidador de Mascotas</p>
            </ion-card-content>
        </ion-card>
    </ion-slide>

    <ion-slide>
        <ion-card>
            <img src="http://www.wormsandgermsblog.com/files/2009/02/PETS_0803_dog_bath1.jpg" />
            <ion-card-content>
                <ion-card-title>
                    Nine Inch Nails Live
                </ion-card-title>
                <p>Ninera con experienc...</p>
            </ion-card-content>
        </ion-card>
    </ion-slide>

</ion-slides>

Answer 2

<ion-item-group>
<ion-item-divider color="light">PHOTOS<span style="float:right;">MORE</span></ion-item-divider>
</ion-item-group>


<ion-scroll scrollX="true" class="ion-scroll-thumbnail">           
<img width="90" height="90" class="avatarImage" src="http://www.wormsandgermsblog.com/files/2009/02/PETS_0803_dog_bath1.jpg">
<img width="90" height="90" class="avatarImage" src="http://www.wormsandgermsblog.com/files/2009/02/PETS_0803_dog_bath1.jpg">

<img width="90" height="90" class="avatarImage" src="http://www.wormsandgermsblog.com/files/2009/02/PETS_0803_dog_bath1.jpg">

<img width="90" height="90" class="avatarImage" src="http://www.wormsandgermsblog.com/files/2009/02/PETS_0803_dog_bath1.jpg">

<img width="90" height="90" class="avatarImage" src="http://www.wormsandgermsblog.com/files/2009/02/PETS_0803_dog_bath1.jpg">

</ion-scroll> 

/* CSS */

.ion-scroll-thumbnail {
white-space: nowrap;
height: 90px;
}

Ionic2＆＃39; <ion-slide>

2 个答案: