Cara menggunakan pembangunan komponen kontena dalam uniapp

Cara menggunakan pembangunan komponen kontena dalam uniapp

Ikhtisar:
Dalam uniapp, komponen kontena ialah komponen biasa dalam halaman, digunakan untuk membalut komponen atau kandungan lain, dan memainkan peranan reka letak dan paparan elemen kawalan. Dalam artikel ini, kami akan memperkenalkan cara menggunakan pembangunan komponen kontena dalam uniapp dan memberikan contoh kod yang berkaitan.

1. Komponen bekas biasa dalam uniapp

1. view: digunakan untuk membungkus komponen atau kandungan lain dan menyediakan reka letak dan kawalan gaya asas. Atribut yang biasa digunakan termasuk warna latar belakang, ketinggian, lebar, jidar, padding, dsb.
2. pandangan tatal: bekas kawasan boleh tatal. Dengan menetapkan ketinggian dan lebar paparan tatal dan atribut limpahan, paparan kandungan boleh tatal boleh dicapai.
3. swiper: Komponen bekas yang digunakan untuk mencapai kesan karusel. Dengan menetapkan laluan imej dan ketinggian leret, anda boleh mencapai kesan karusel imej.
4. item swiper: Sub-item dalam komponen swiper setiap item swiper sepadan dengan peluncur dan boleh mengandungi gambar, teks dan kandungan lain.

Kedua, gunakan contoh pembangunan komponen bekas paparan

1. Tambahkan komponen paparan pada halaman

d477f9ce7bf77f53fbcf36bec1b69b7a
661f23f3f62b88de99ee859876b2524e

rreee

babaa5b04192746ccb837e762f915b5f

2. Tetapkan gaya komponen paparan

11c3ce0c461c5f3456e141a9a29adefa
.bekas {
lebar: 100%;
tinggi: 200rpx;
warna latar belakang: #f5:rf5 ;
padding : 10rpx;
}

.text {

font-size: 32rpx;
color: #333333;
}
531ac245ce3e4fe3d50054a55f265927

Kod di atas melaksanakan ketinggian dan bekas paparan dengan arpx warna latar belakang #f5f5f5 , dengan elemen teks bersarang di dalamnya. Dengan menetapkan sifat margin dan padding, pemisahan antara bekas dan elemen luaran dan pemisahan antara elemen dalaman dicapai.

3. Contoh pembangunan menggunakan komponen bekas scroll-view

Tambah komponen scroll-view pada halaman

d477f9ce7bf77f53fbcf36bec1b69b7a

32ce4af5baa878d1e388c81f01e55bcb
&rreee ;/scroll-view>

21c97d3a051048b8e55e3c8f199a54b2

Tetapkan gaya komponen tatal-lihat

2. c9ccee2e6ea535a969eb3f532ad9fe89

.bekas {

lebar: 100%;
tinggi latar belakang: 100%;
rpx; : # f5f5f5;
jidar atas: 10rpx;
pelapik: 10rpx;
}
.teks {
saiz fon: 32rpx;
warna: #333333;
ruang putih: pra-balut;
<}
gaya>

Kod di atas melaksanakan bekas paparan tatal yang boleh ditatal secara menegak dan kandungannya ialah sekeping teks. Dengan menetapkan sifat ketinggian dan limpahan paparan tatal, kesan boleh ditatal dicapai apabila kandungan melebihi ketinggian bekas.

4. Contoh pembangunan menggunakan komponen bekas swiper dan swiper-item

Tambah komponen swiper dan swiper-item pada halaman

1. d477f9ce7bf77f53fbcf36bec1b69b7a

d031038d2c2bdfaf13b672a3f3696d59

<text class="text">Hello, Uniapp!</text>

00d60d359d79ef3ad471162a03ef38f0

21c97d3a051048b8e55e3c8f199a54b2

Tetapkan gaya komponen leret dan item lebar leret

2. <<

< : 100%;
tinggi: 300rpx;
margin-top: 10rpx;
}
531ac245ce3e4fe3d50054a55f265927

Kod di atas melaksanakan kesan karusel gambar dengan menetapkan ketinggian komponen leret dan item leret, gambar direalisasikan paparan gelongsor.

Ringkasan:

Komponen bekas memainkan peranan penting dalam reka letak dan paparan elemen kawalan dalam pembangunan uniapp. Artikel ini memperkenalkan komponen bekas biasa dalam uniapp dan menyediakan contoh kod yang sepadan. Saya harap ia akan membantu semua orang dalam membangunkan menggunakan komponen kontena. Dengan mempelajari dan menguasai penggunaan komponen kontena, anda boleh membangunkan halaman uniapp dengan lebih baik.

Atas ialah kandungan terperinci Cara menggunakan pembangunan komponen kontena dalam uniapp. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!