Ajar anda langkah demi langkah cara melaksanakan butang terapung dalam program mini (contoh kod)

Bagaimana untuk melaksanakan butang terapung dalam program mini? Artikel berikut akan memperkenalkan kepada anda bagaimana untuk melaksanakan fungsi butang terapung dalam program mini Saya harap ia akan membantu anda!

Dalam pembangunan program mini harian, kita mungkin perlu menggantung butang dan tidak mengubah kedudukannya semasa halaman slaid, seperti halaman butiran artikel I ingin menjadikan butang perkongsian kelihatan terapung, atau tetapkan butang terapung pada halaman utama untuk melaksanakan beberapa fungsi boleh skala, yang cantik dan mudah

Saya akan menerangkan pelaksanaan butang terapung daripada dua aspek , satu adalah untuk melaksanakan butang gambar, dan satu lagi adalah untuk mengapungkan butang. [Cadangan pembelajaran berkaitan: Tutorial Pembangunan Program Mini]

Pelaksanaan Butang Imej

Dalam komponen butang yang disediakan oleh program mini, tiada fungsi untuk menetapkan gambar secara berasingan sebagai butang. Walaupun program mini tidak mempunyai sokongan komponen semula jadi, kita boleh mencapai kesan sedemikian sendiri

Mula-mula masukkan kod

Kod halaman

<!--pages/content-detail/content-detail.wxml-->
<button plain=&#39;true&#39;   class="circle">
  <image mode=&#39;aspectFill&#39; src=&#39;/images/icon/collect.png&#39; class=&#39;image&#39;></image>
</button>

Kod Gaya css

.circle[plain] {
  padding: 0;
  border: none;
  width: 64rpx;
  height: 64rpx;
}

.image {
  width: 64rpx;
  height: 64rpx;
}

bulatan ialah kelas butang, imej ialah kelas gambar

Kod ini sangat mudah, Xiaodan akan menerangkan kod di atas untuk semua orang

• Paparan butang tersembunyi

  Kami mahu memaparkan imej, dan butang itu dibalut dengan imej, jadi untuk menyembunyikan butang, plain='true' boleh dicapai dengan atribut ini.

• Sembunyikan jidar butang

  Selain menyembunyikan butang, anda juga perlu menyembunyikan jidarnya Gaya css yang sepadan ialah: sempadan: tiada , sila ambil perhatian di sini bahawa [plain]

  mesti ditambahkan pada kelas css Sebagai contoh, .circle[plain] sempadan mungkin tidak hilang.

• Selaraskan imej dan butang

  Saiz imej perlu konsisten dengan saiz butang Untuk mencapai penjajaran, gaya css dalam butang mesti ditetapkan kepada padding: 0

Pelaksanaan butang terapung

Selepas butang gambar ditetapkan, kita perlu mengapungkannya untuk mencapainya kesan terapung, kita hanya perlu menggerakkan butang Kedudukan gaya boleh ditetapkan kepada tetap

.circle[plain] {
  display: flex;
  margin-right: 40rpx;
  right: 0;
  position: fixed;
  bottom: 15%;
  padding: 0;
  border: none;
  width: 64rpx;
  height: 64rpx;
}

kedudukan ialah atribut kedudukan, yang mempunyai banyak nilai yang berbeza. Mari kita lihat definisi rasmi daripada tetap

Tiada ruang Rizab untuk elemen, tetapi nyatakan kedudukan elemen dengan menyatakan kedudukannya berbanding dengan port pandangan skrin. Kedudukan elemen tidak berubah apabila skrin menatal. Semasa mencetak, elemen muncul di lokasi tetap pada setiap halaman. Atribut tetap mencipta konteks tindanan baharu. Apabila atribut transformasi nenek moyang elemen bukan tiada, bekas itu ditukar daripada ruang pandang kepada moyang itu.

Kami telah melaksanakan sepenuhnya kod untuk butang terapung Mari kita lihat kesan khusus

Ringkasan

Keseluruhan Sebenarnya, jumlah kod untuk melaksanakan butang terapung tidak banyak Perkara utama adalah mempunyai pengetahuan yang lebih menyeluruh tentang CSS .

Untuk lebih banyak pengetahuan berkaitan pengaturcaraan, sila lawati: Video Pengaturcaraan! !

Atas ialah kandungan terperinci Ajar anda langkah demi langkah cara melaksanakan butang terapung dalam program mini (contoh kod). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!