Vux: Tabbar tidak dapat diperbaiki di bagian bawah

Dibuat pada 21 Jun 2016  ·  21Komentar  ·  Sumber: airyland/vux

Versi: kapan

"vux": "^0.1.1-rc3"

Android atau iOS, browser yang mana?

Chrome, iOS, alat pengembang web WeChat

Kode Anda

<div>
  <cell title="..." value="..."></cell> 
  ...(*20)...
  <tabbar>...</tabbar>
</div>

Ketika ada lebih banyak sel dari satu layar, bilah tab akan menggulir ke atas dengan halaman dan tidak akan diperbaiki di bagian bawah

componentabbar demo needed doc needed
Sumber
picture moxuandeng

Komentar yang paling membantu

Jika tabbar ada di halaman modul, metode di atas masih akan membuat tabbar menggulir dengan halaman, menggunakan

.weui_tabbar {
  position: fixed;
}

Larut

picture mougua pada 28 Nov 2016
👍3

Semua 21 komentar

Lihat latihan WeUI, atur html, body, dan div superior ke ketinggian: 100%

airyland picture airyland pada 21 Jun 2016

Apakah itu diselesaikan? tinggi: 100% tampaknya tidak berpengaruh

aplusgain picture aplusgain pada 23 Jun 2016

Bukan bug
"Tampaknya tidak berpengaruh" yang terbaik adalah memberikan demo yang tampaknya tidak berpengaruh

airyland picture airyland pada 23 Jun 2016

Tabbar.vue dalam demo digunakan. Bagian dari kode di Panel.vue ditambahkan dan ada masalah. Apakah tidak ada komponen yang sesuai untuk weui_tab_bd?

aplusgain picture aplusgain pada 23 Jun 2016

Apakah mungkin untuk mengatur html dan body menjadi 100%? Untuk komponen yang tidak tersedia, cukup tulis tag html langsung sesuai dengan dokumen WeUI.

airyland picture airyland pada 23 Jun 2016

html, badan termasuk div superior ditambahkan
qq 20160623110247

aplusgain picture aplusgain pada 23 Jun 2016

Tangkapan layar

airyland picture airyland pada 23 Jun 2016

Saya juga sudah mencoba html, body dan superior div telah menambahkan height:100% , tetapi tidak berpengaruh, dan saya masih mencoba modifikasi lainnya

moxuandeng picture moxuandeng pada 23 Jun 2016

Lihatlah demo WeUI

airyland picture airyland pada 23 Jun 2016

https://weui.io/#/tabbar

Untuk level atas, Anda perlu mengatur posisi ke relatif

<div class="weui_tab">
    <div class="weui_tab_bd">
    </div>
    <TABBAR>
</div>
airyland picture airyland pada 23 Jun 2016

Nah, cara ini baik-baik saja, terima kasih. .

aplusgain picture aplusgain pada 23 Jun 2016 
<div class=h100>
  <group>
    <cell></cell>
  </group>
  <div class="weui_tab">
    <div class="weui_tab_bd">
    </div>
    <TABBAR>
  </div>
</div>

Saya juga mencoba cara ini, tetapi bilah tab berada di belakang halaman alih-alih diperbaiki di bagian bawah

moxuandeng picture moxuandeng pada 23 Jun 2016

Anda dapat menempatkan paragraf grup di weui_tab_bd

aplusgain picture aplusgain pada 23 Jun 2016

Ternyata seperti ini, dan memang terpecahkan, terima kasih, akhirnya akan seperti ini

<body>
  <div id=app, class=h100>
    <div class="weui_tab">
      <div class="weui_tab_bd">
        <group>
          <cell></cell>
          ...
          <cell></cell>
        </group>
      </div>
      <TABBAR>
    </div>
  </div>
</body>
moxuandeng picture moxuandeng pada 23 Jun 2016

Jika tabbar ada di halaman modul, metode di atas masih akan membuat tabbar menggulir dengan halaman, menggunakan

.weui_tabbar {
  position: fixed;
}

Larut

mougua picture mougua pada 28 Nov 2016
👍3

Jika Anda menggunakan komponen tabbar, Anda dapat mempertimbangkan untuk menggunakannya

  .weui-tabbar {
    position: fixed !important;
  }

Perhatikan bahwa - bukan _

aristotll picture aristotll pada 26 Jan 2018
👍2

@aristotll versi 2.x berubah? Versi saya masih 1.x.

mougua picture mougua pada 26 Jan 2018

@mougua Mungkin saya bisa merujuk pada temuan Anda. Saya mengubahnya dan mengeluarkannya untuk kepentingan generasi mendatang.

aristotll picture aristotll pada 26 Jan 2018

Saya sarankan Anda beristirahat dari tata letak statis dan berlatih css. Tidak ada jalan pintas untuk hal ini.

Jiiiiiin picture Jiiiiiin pada 27 Jan 2018

css，
gaya{
posisi: tetap;
bagian bawah:0;
}

lovefishmiao picture lovefishmiao pada 9 Jun 2018

.weui-tabbar{
posisi: tetap !penting;
atas: 0;
kiri: 0;
bawah: otomatis !penting;
}
Ini baik-baik saja,

lotherli picture lotherli pada 9 Okt 2018
Apakah halaman ini membantu?
0 / 5 - 0 peringkat

Masalah terkait

wangchaolonglls picture wangchaolonglls  ·  4Komentar
RenShine picture RenShine  ·  4Komentar
wonghoman picture wonghoman  ·  4Komentar
ty850454 picture ty850454  ·  3Komentar
hezhiwen940420 picture hezhiwen940420  ·  4Komentar