Ionic-framework: ionic2 - pengguliran vertikal di dalam slide

Dibuat pada 25 Apr 2016 · 30Komentar · Sumber: ionic-team/ionic-framework

Saya memiliki beberapa slide yang memiliki konten dinamis yang ditambahkan ke dalamnya. Masalahnya adalah konten di dalam slide tidak bergulir. Jadi jika saya memiliki banyak item, hanya beberapa yang ditampilkan dan tidak ada kemampuan untuk meluncur. Bagaimana saya bisa membuatnya agar konten dalam daftar saya meluncur di dalam slide mereka?

<ion-content>
    <ion-slides (change)="onSlideChanged($event)">
        <ion-slide >
            <ion-list>
            <ion-item *ngFor="#item of items1; #i = index">
            <h2>{{item}</h2>
            </ion-item>
            </ion-list>
        </ion-slide>
         <ion-slide>
                 <ion-list>
            <ion-item *ngFor="#item of items2; #i = index">
            <h2>{{item}</h2>
            </ion-item>
            </ion-list>
        </ion-slide>
    </ion-slides>
</ion-content>

Sumber

susanlinsfu

Komentar yang paling membantu

Hai @susanlinsfu , sayangnya saya belum melihat untuk memperbaiki ini dalam kerangka kerja, tetapi Anda harus dapat mengganti ketinggian elemen ion-slides untuk memperbaikinya untuk kasus penggunaan khusus Anda:

ion-slides {
  height: auto;
}

Beri tahu saya jika ini tidak berhasil!

brandyscarney pada 6 Mei 2016

👍42 🎉16 😄3 ❤2

Semua 30 komentar

@susanlinsfu Terima kasih telah membuka masalah dengan kami! Maukah Anda membuat plunker atau codepen yang dapat kami gunakan untuk mereproduksi masalah Anda? Berikut adalah template yang dapat Anda gunakan untuk membuat plunker Anda: http://plnkr.co/edit/L8JN6w5mqwbMY2E14dbk?p=preview

jgw96 pada 25 Apr 2016

Hai,

Saya telah membuat punker: http://plnkr.co/edit/G0LbU4SL9uVFgj6zCJYE?p=preview . Pada dasarnya ada slide. Slide ini memiliki daftar dengan banyak item. Daftar ini adalah daftar yang besar sehingga pengguna harus dapat menggulir ke bawah untuk melihat semuanya, tetapi pengguliran tidak dimungkinkan.

Saya telah mencoba menambahkan style="overflow-y:scroll" ke slide dan pengguliran diaktifkan, tetapi jika Anda melihat, Anda akan melihat item sedang dipotong sehingga seluruh daftar tidak ditampilkan.

Bersulang

susanlinsfu pada 25 Apr 2016

@brandyscarney Maaf mau bertanya, tapi saya ingin tahu apakah ada kemajuan dalam hal ini?

susanlinsfu pada 6 Mei 2016

ion-slides {
  height: auto;
}

Beri tahu saya jika ini tidak berhasil!

brandyscarney pada 6 Mei 2016

👍42 🎉16 😄3 ❤2

@brandyscarney itu memungkinkan pengguliran dan semua elemen pas, tetapi tingginya menjadi sebesar slide terbesar untuk semua slide. Ini berarti jika slide satu memiliki lebih banyak elemen daripada slide 2, maka slide 2 setelah menggulir ke elemen terakhir akan dapat terus menggulir melalui ruang putih kosong.

susanlinsfu pada 11 Mei 2016

👍1

Mencoba
.slide-zoom{
tinggi: 100%;
}

Elfwines pada 11 Mei 2016

👍6 🎉1 👎1

@Elfwines Hai, saya sudah mencobanya dan tidak berhasil.

susanlinsfu pada 13 Mei 2016

@susanlinsfu : Lihat di sini http://plnkr.co/edit/SjYtZYdBCIph5ipyyrn6?p=preview . Maksudku selain overflow-y, maaf.

Elfwines pada 13 Mei 2016

👍6 ❤2 🎉1

@Elfwines AHHHHHh saya minta maaf, ya ini berfungsi persis seperti yang saya inginkan! Terima kasih banyak untuk punknya!

susanlinsfu pada 15 Mei 2016

Perbaikan berhasil bagi saya.
Apakah ini akan menjadi bagian dari rilis mendatang? Atau mungkin sudah?

reisenmachtfreude pada 11 Agu 2016

Jadi tidak ada yang berhasil untuk saya. Saya akhirnya harus membungkus konten saya dalam tag ion-scroll dan menambahkan yang berikut ke sass saya sehingga bagian bawah akan menggulir di atas titik pagination.

ion-scroll
  height: 100%
  .scroll:after
    content: " "
    display: block
    height: rem(100)

samcdavid pada 23 Agu 2016

humm.. dapatkan bug yang sama di sini dan solusi itu tidak berfungsi. Saya seorang pemula dalam aplikasi dan belum dapat membuat plunker yang berfungsi ... ada hal lain untuk dicoba ?? https://plnkr.co/edit/9BMTxpdUUIB4NMZiUXin?p=preview

NitrofMtl pada 8 Okt 2016

bekerja di sekitar !!! Saya baru saja menambahkan tag <ion-content> dan itu berfungsi dengan baik.

<ion-view view-title="programs">
<ion-content padding="benar" >
<ion-slides options="options" slider="data.slider">
<ion-slide-page ng-repeat="alarm di alarms">
<ion-content>
<div class="list">`

NitrofMtl pada 9 Okt 2016

👍1

Mencoba

ion-slide{
      ion-list{
          height: 100vh;
          overflow-y: scroll;
      }
}

reneszabo pada 22 Okt 2016

👍7

Saya dapat mengonfirmasi bahwa menambahkan <ion-content scroll="true"> di dalamakan memungkinkan pengguliran tampilan secara vertikal.

Konten, bagaimanapun, akan tumpang tindih dengan indikator halaman slider: Saya tidak yakin bagaimana menyelesaikannya, tetapi pendekatan yang mungkin adalah menggunakan calc (css3) pada ketinggian ion-content untuk mengurangi tinggi konten, sehingga tidak akan tumpang tindih dengan indikator, tetapi tidak akan berfungsi di setiap perangkat.

Atau, Anda mungkin ingin menata indikator agar memiliki warna latar belakang yang solid.

briosheje pada 25 Okt 2016

👎1 👍1

Saya memiliki penggeser yang meluncur "secara vertikal". salah satu halaman berisi daftar kartu yang perlu digulir secara vertikal juga. dapatkah kita melakukannya, apakah ada perbaikan untuk masalah ini?
```javascript

halaman pertama

Kemarin

khaledwj90 pada 1 Mar 2017

Saya telah memecahkan ini dengan css sederhana ini:

ion-slides { height: initial; }

jalbertos pada 11 Mar 2017

👍11 👎3 🎉1

@jalbertos
ini tidak bekerja untuk saya. tidak ada item yang ditampilkan di halaman setelah "CSS" ini

yang perlu saya lakukan adalah membiarkan pengguna meluncur ke bawah kemudian pelanggan dapat menggulir transaksi (Gulir ke bawah dan ke atas) dan ketika dia mencapai akhir dia bisa meluncur lagi ke atas.

Contoh: Snapchat ketika pengguna menggeser ke bawah dia akan melihat daftar gambar dan dia dapat menggulirnya dan ketika dia menggulir ke atas dan mencapai ke akhir dan terus menggulir halaman akan meluncur ke atas lagi ke kamera.

khaledwj90 pada 12 Mar 2017

fokus dari bidang input kelima dan seterusnya tidak menggulir elemen dengan menambahkan bantalan bawah

<ion-content>
    <ion-slides>
    <ion-slide>
        <ion-list>
      <ion-item>
        <ion-label floating>item1</ion-label>
        <ion-input type="text"></ion-input>
      </ion-item>
      <ion-item>
        <ion-label floating>item2</ion-label>
        <ion-input type="text"></ion-input>
      </ion-item>
      <ion-item>
        <ion-label floating>item3</ion-label>
        <ion-input type="text"></ion-input>
      </ion-item>
      <ion-item>
        <ion-label floating>item4</ion-label>
        <ion-input type="text"></ion-input>
      </ion-item>
      <ion-item>
        <ion-label floating>item5</ion-label>
        <ion-input type="text"></ion-input>
      </ion-item>
      <ion-item>
        <ion-label floating>item6</ion-label>
        <ion-input type="text"></ion-input>
      </ion-item>
      <ion-item>
        <ion-label floating>item7</ion-label>
        <ion-input type="text"></ion-input>
      </ion-item>
      <ion-item>
        <ion-label floating>item8</ion-label>
        <ion-input type="text"></ion-input>
      </ion-item>      
    </ion-list>
    </ion-slide>
  </ion-slides>
</ion-content>

kevendra pada 30 Apr 2017

Seperti yang dikatakan @brandyscarney , menyetel ketinggian dalam CSS menyelesaikan masalah untuk satu penggeser. Tetapi ketika Anda pindah ke slide berikutnya yang mungkin lebih kecil dari yang pertama, ada ruang kosong di bagian bawah konten karena ketinggian diterapkan untuk seluruh slider.

prantikv pada 21 Feb 2018

Ini adalah perbaikan sementara css saya (ini sangat _hacky_ dan saya membencinya):

ion-slide {
    .slide-zoom {
        height: calc(100vh - 143px);
        overflow-y: auto;
    }
}

143px berasal dari penambahan 60px untuk header atas, 41px untuk tab bawah, ditambah padding vertikal 16px pada ion-content

pistou pada 14 Mar 2018

👍3 🎉1

Solusi itu bekerja dengan sempurna sampai Anda menginginkan di ujung bawah, maka itu tidak dipicu ...
Adakah yang memiliki masalah yang sama dan solusi yang berfungsi?

guillermogfer pada 2 Mei 2018

Saya berakhir dengan

.html

<ion-slides>
<ion-slide>
  <ion-content>
    <ion-infinite-scroll (ionInfinite)="doInfiniteFetchProducts($event)" *ngIf="...">
      <ion-infinite-scroll-content></ion-infinite-scroll-content>
    </ion-infinite-scroll>
  </ion-content>
</ion-slide>
<ion-slide>
  <ion-content>
    <...>
 </ion-content>
</ion-slide>
</ion-slides>

.scss

ion-slide {
.slide-zoom {
  height: 100%;
  ion-content {
    .scroll-content {
      margin-bottom: 0px !important;
    }
  }
}

}

guillermogfer pada 2 Mei 2018

🎉2

ion-slide{
    overflow: auto;
}

.slide-zoom {
    text-align: center;
    position: absolute;
    top: 0;
    display: block;
    width: 100%;
    height: auto;
    padding: 50px 10px;
}

rhrahul pada 3 Jun 2018

Tidak ada yang berhasil untuk saya

sameerj1985 pada 11 Jun 2018

ini bekerja untuk saya pada slide dengan ketinggian berbeda

.swiper-slide {
   display: block;
}

ion-slide{ 
  ion-list{
      height: 90vh; // padding for footer
      overflow-y: scroll;
  }
}

bulbul-ismail pada 16 Jun 2018

👍1

.swiper-slide{
overflow-y: gulir;
tampilan: blok;
}

ion-slide{
tinggi: otomatis;
}

Bekerja untuk slide dengan panjang variabel.

prateekkembhavi pada 20 Jun 2018

🎉1

Sekarang, penyegar ion tidak berfungsi dengan baik. Itu disegarkan setiap kali saya menggulir ke bawah meskipun ada lebih banyak item dalam daftar.

vishavjeetnokhwal pada 15 Jul 2018

Terima kasih untuk masalah ini! Kami telah memindahkan kode sumber dan masalah untuk Ionic 3 ke dalam repositori terpisah. Saya memindahkan masalah ini ke repositori untuk Ionic 3. Harap lacak masalah ini di sana.

Terima kasih telah menggunakan Ionic!