Ringkaskan penyelesaian kepada masalah ketinggian karusel leret dalam applet perkongsian

Teg leret dalam program mini akan mempunyai ketinggian tetapnya sendiri iaitu 150px, tetapi kami sebenarnya berharap ketinggian karusel ini boleh ditukar secara dinamik, jika tidak, ketinggiannya akan sentiasa 150px pada peranti berbeza dan gaya akan muncul soalan . Artikel ini akan memperkenalkan kepada anda penyelesaian kepada masalah ketinggian ini. Saya harap ia akan membantu anda!

1 Gambaran Keseluruhan

Applet menetapkan ketinggian tetap 150px untuk label karusel , ini gaya tidak kelihatan begitu jelas pada peranti skrin besar, tetapi jika anda bertukar kepada model skrin kecil seperti iPhone5, ketinggian gambar tidak akan mencapai 150px. Oleh kerana mod yang saya tetapkan untuk imej ialah widthFix, ketinggian imej menyesuaikan mengikut lebar. Jadi masalah yang perlu diselesaikan ialah membuat ketinggian karusel berubah dengan ketinggian gambar.

2. Penyelesaian

1) Tetapkan gaya sebaris untuk leret dan mengikat ketinggian kepada satu Dinamik data dan tetapkan id="swiper-image" pada teg imej dalaman dan teg imej mempunyai peristiwa: bindload, peristiwa ini akan dicetuskan apabila imej dimuatkan dan mengikat peristiwa ini pada imej

Dokumentasi tapak web rasmi: https://developers.weixin.qq.com/miniprogram/dev/component/image.html

Nota: di sini Mengapa tidak 't saya mendapat ketinggian imej dalam kitaran hayat onLoad Ini kerana jika saya menggunakan beberapa kaedah untuk mendapatkan maklumat imej dalam onLoad, saya hanya boleh mendapatkan maklumat yang tepat daripada imej tempatan, tetapi imej yang diminta daripada rangkaian? , apabila komponen dimuatkan, imej mungkin tidak diminta, jadi data khusus tidak boleh diperoleh, jadi gunakan acara bindload yang disertakan dengan imej untuk mendapatkan maklumat khususnya

2), isytiharkan pembolehubah swiperHeight dalam data dalam fail index.js untuk menyimpan ketinggian tag swiper

3), Kemudian tulis fungsi pengendali acara bindloadSwiperImageLoaded terikat pada imej, gunakan program mini wx.createSelectorQuery() dan selepas mencipta pemilih nod, panggil kaedah query.select('#swiper-image').boundingClientRect().exec((res) => {}) untuk mendapatkan maklumat khusus imej. Akhir sekali, tetapkan liputan imej yang diperoleh kepada swiperHeight, supaya ia terikat secara dinamik pada tag swiper, dan paparan gaya halaman adalah normal

3. Pengoptimuman

1). sepuluh kali, jadi saya hanya perlu menulis fungsi anti-goncang untuk menyelesaikan masalah ini. Saya mencipta fail hook.js baharu dalam direktori until.js di bawah direktori akar untuk menyimpan fungsi js terkapsul saya, saya menulis fungsi anti goncang di dalamnya dan mengeksport

2), memperkenalkan fungsi anti-goncang terkapsul dalam index.js dalam direktori muzik rumah

3), dalam kaedah handleSwiperImageLoaded Just gunakan fungsi anti goncang. Kaedah ini hanya akan dicetuskan selepas memuatkan gambar terakhir

[Cadangan pembelajaran berkaitan:

Tutorial Pembangunan Program Mini】

Atas ialah kandungan terperinci Ringkaskan penyelesaian kepada masalah ketinggian karusel leret dalam applet perkongsian. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!