IE9下Swiper控件不能准确定位到指定页面问题
应用场景:
采用轮播控件对表格中的图片文件进行展示,当点击表格中的图片文件时,使用轮播控件(Swiper)显示指定的图片,同时,可以左右翻页,前后浏览所有的图片。
实现思路:
(1)使用JS创建Swiper的躯干(Swiper相当于灵魂,灵魂必须依附肉体才能起作用)。
__createPreviewHtml: function(){ if($('#__sc1').length>0) return; var html = '<p id="__sc1" class="swiper-container" style="z-index:9999;">' + ' <a href="javascript:void(0);" id="__sc_closeBtn" class="closeBtn" title="close"> X </a>' + ' <p class="swiper-wrapper"> ' + '</p> ' + '<p class="swiper-pagination"></p>' + '<p class="swiper-button-prev"></p>' + '<p class="swiper-button-next"></p>' + '</p>'; $(document.body).append(html); $('#__sc_closeBtn').on('click',this.__hidePreviewBox); }
(2)遍历表格中的图片文件,并塞入Swiper的躯干,获取点击图片文件的索引号(index),URL(通过文件ID唯一标识)。
var index = 0; var i = 0; me._grid.findRow(function(row){ var fileId2 = row.fileId; var fileName2 = row.fileName.toLowerCase(); if(fileName2 && imgReg.test(fileName2)==true){ if(fileId == fileId2){ index = i; } var picParam = me.fileService + "/preview?fileId=" + encodeURIComponent(fileId2); var imgHtml = '<img src="' + picParam + '"/>'; var $slide = $('<p class="swiper-slide">' + imgHtml + '</p>'); $('.swiper-wrapper').append($slide); i++; } }); if(typeof(mySwiper) != 'undefined'){ mySwiper.removeAllSlides(); }
(3)创建Swiper控件,同时使用Swiper的slideTo(index)方法定位到指定的位置,显示图片。
//$('.swiper-pagination span').eq(index).trigger('click'); });
Atas ialah kandungan terperinci IE9下Swiper控件不能准确定位到指定页面问题 . Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Alat AI Hot

Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool
Gambar buka pakaian secara percuma

Clothoff.io
Penyingkiran pakaian AI

AI Hentai Generator
Menjana ai hentai secara percuma.

Artikel Panas

Alat panas

Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6
Alat pembangunan web visual

SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Topik panas



1. Pasang swiper. Gunakan npminstallswiper untuk memasang swpier plug-in npminstallswiper-s//@9.2.0// atau pasang versi yang ditentukan npminstallswiper@8.4.7-s 2. Gunakan swiper untuk terus mengikut kaedah rujukan pada laman web rasmi. Projek akan melaporkan ralat: diperkenalkan Komponen menggunakan laluan import{Swiper,SwiperSlide}daripada "swiper/vue/swiper-vue";

Cara menggunakan fungsi peta dan kedudukan dalam uniapp 1. Pengenalan latar belakang Dengan populariti aplikasi mudah alih dan perkembangan pesat teknologi penentududukan, fungsi peta dan penentududukan telah menjadi bahagian yang amat diperlukan dalam aplikasi mudah alih moden. uniapp ialah rangka kerja pembangunan aplikasi merentas platform yang dibangunkan berdasarkan Vue.js, yang boleh memudahkan pembangun berkongsi kod pada berbilang platform. Artikel ini akan memperkenalkan cara menggunakan peta dan fungsi kedudukan dalam uniapp dan memberikan contoh kod khusus. 2. Gunakan komponen uniapp-amap untuk melaksanakan fungsi peta

1. Mula-mula, kami membuka Apl [Cari] pada telefon mudah alih dan pilih peranti dalam senarai pada antara muka peranti. 2. Kemudian, anda boleh menyemak lokasi dan klik pada laluan untuk menavigasi ke sana.

Cara menggunakan pemalam WordPress untuk mencapai fungsi lokasi segera Dengan populariti peranti mudah alih, semakin banyak tapak web mula menyediakan perkhidmatan berasaskan geolokasi. Dalam laman web WordPress, kami boleh menggunakan pemalam untuk mencapai fungsi kedudukan segera dan menyediakan pelawat dengan perkhidmatan yang berkaitan dengan lokasi geografi. 1. Pilih pemalam yang betul Terdapat banyak pemalam yang menyediakan perkhidmatan geolokasi dalam pustaka pemalam WordPress untuk dipilih. Bergantung pada keperluan dan keperluan, memilih pemalam yang betul adalah kunci untuk mencapai kefungsian kedudukan segera. Berikut adalah beberapa

Semakin ramai pengguna mula menaik taraf sistem win11 Memandangkan setiap pengguna mempunyai tabiat penggunaan yang berbeza, ramai pengguna masih menggunakan pelayar ie11 Jadi apa yang perlu saya lakukan jika sistem win11 tidak boleh menggunakan pelayar ie. Adakah windows11 masih menyokong ie11? Mari kita lihat penyelesaiannya. Penyelesaian kepada masalah yang win11 tidak boleh menggunakan pelayar ie11 1. Pertama, klik kanan menu mula dan pilih "Command Prompt (Administrator)" untuk membukanya. 2. Selepas dibuka, terus masukkan "Netshwinsockreset" dan tekan Enter untuk mengesahkan. 3. Selepas pengesahan, masukkan "netshadvfirewallreset&rdqu

Bukan rahsia lagi bahawa Internet Explorer telah lama tidak disukai, tetapi dengan ketibaan Windows 11, realiti muncul. Daripada kadangkala menggantikan IE pada masa hadapan, Edge kini menjadi penyemak imbas lalai dalam sistem pengendalian terkini Microsoft. Buat masa ini, anda masih boleh mendayakan Internet Explorer dalam Windows 11. Walau bagaimanapun, IE11 (versi terkini) sudah mempunyai tarikh persaraan rasmi, iaitu 15 Jun 2022, dan jam semakin berdetik. Dengan mengambil kira perkara ini, anda mungkin perasan bahawa Internet Explorer kadangkala membuka Edge, dan anda mungkin tidak menyukainya. Jadi mengapa ini berlaku? wujud

1. Klik untuk memasukkan perisian peta Amap pada telefon mudah alih anda. 2. Klik Saya di penjuru kanan sebelah bawah. 3. Klik untuk memasukkan peta keluarga. 4. Klik Cipta Peta Keluarga Saya. 5. Selepas penciptaan berjaya, kod jemputan akan muncul dan boleh dikongsi dengan telefon bimbit lain.

Kaedah untuk menyelesaikan masalah lokasi kebocoran memori dalam pembangunan bahasa Go: Kebocoran memori adalah salah satu masalah biasa dalam pembangunan program. Dalam pembangunan bahasa Go, disebabkan kewujudan mekanisme pengumpulan sampah automatiknya, masalah kebocoran memori mungkin kurang daripada bahasa lain. Walau bagaimanapun, apabila kita menghadapi aplikasi yang besar dan kompleks, kebocoran memori mungkin masih berlaku. Artikel ini akan memperkenalkan beberapa kaedah biasa untuk mencari dan menyelesaikan masalah kebocoran memori dalam pembangunan bahasa Go. Pertama, kita perlu memahami apa itu kebocoran memori. Ringkasnya, kebocoran memori merujuk kepada
