Belajar menggunakan jquery iScroll.js bar skrol mudah alih plug-in

Belajar menggunakan jquery iScroll.js bar skrol mudah alih plug-in_jquery

WBOY

Lepaskan： 2016-05-16 15:13:28

asal

1231 orang telah melayarinya

Apakah pemalam yang paling biasa digunakan dalam kerja harian anda, jQurey? Lazyload? Tetapi ini semua pada bahagian PC, tetapi pemalam yang paling biasa digunakan pada bahagian mudah alih ialah iScroll Apakah sebenarnya iScroll dan bagaimana ia harus digunakan? iScroll ialah pemalam yang sangat berkuasa, dan saya hanya mempunyai pemahaman yang cetek mengenainya. Di sini kami akan memperkenalkannya secara ringkas.
Penjanaan iScroll:

iScroll dicipta sepenuhnya kerana penyemak imbas webkit mudah alih, seperti pada peranti mudah alih iPhone dan Android.
Cara menggunakan iScroll:

Prinsip iScroll ialah terdapat limpahan tersembunyi (overflow:hidden;) DOM di lapisan luar, dan kemudian struktur DOM pertama di kawasan ini akan dijadikan instantiated, dan kandungan yang dibalut boleh ditatal secara menegak atau mendatar, jadi dalam Apabila menggunakan iScroll, elemen tatal hendaklah semudah mungkin, kurangkan bilangan DOM dan kurangkan sarang, kerana lebih kompleks struktur DOM, lebih sukar untuk iScroll dijalankan, yang mungkin menyebabkan beberapa nod untuk dipaparkan secara tidak normal. Oleh itu, struktur DOM yang disyorkan adalah seperti berikut:

<div id="wrapper">//overflow:hidden;
 <ul>
 //只有第一个DOM结构（ul）被实例化，这个DOM可以纵向或者横向的滚动，
 //多出的内容会被wrapper的样式hidden。
  <li>1</li>
  <li>2</li>
  <li>3</li>
 </ul>
</div>

Salin selepas log masuk

Nota: Sekali lagi, hanya elemen anak pertama (ul) dalam pembungkus boleh dijadikan instantiat untuk menatal dan penatalan mesti dicapai bersama-sama dengan DOM luar (pembungkus).
Bagaimana jika terdapat berbilang ul dalam pembungkus? Ia sangat mudah. Ingat ayat itu, hanya unsur anak pertama (ul) dalam pembungkus boleh dijadikan instantiated dan ditatal:

<div id="wrapper">//overflow:hidden;
 <div id="first">
  //只有第一个DOM结构(ul)被实例化，这个DOM可以纵向或者横向的滚动，
  //多出的内容会被wrapper的样式hidden
  <ul>
   <li>1</li>
   <li>2</li>
   <li>3</li>
  </ul>
  <ul>
   <li>4</li>
   <li>5</li>
   <li>6</li>
  </ul>
 </div>
</div>

Salin selepas log masuk

Seperti yang anda lihat, hanya yang pertama akan dibuat seketika. Nota: ID struktur DOM pertama (pertama) tidak perlu ditulis di sini Saya hanya menulis ID untuk memudahkan pengenalan semua orang, tetapi ID paling luar (pembungkus) mesti ditulis kerana ia diperlukan apabila JS diisi dalam ID ini:

var myScroll = new iScroll("wrapper");

Salin selepas log masuk

Cara iScroll harus disegerakan:

Memandangkan kita bercakap tentang instantiasi, bilakah kita harus membuat instantiat? Dikatakan terdapat banyak kaedah instantiasi, tetapi saya tidak pernah menggunakannya hanya satu:
(1) Muatkan iscroll.js dan uw3c.js halaman semasa di bahagian bawah halaman HTML (uw3c.html) (selepas badan dan sebelum html) untuk memastikan struktur DOM HTML boleh dimuatkan.
(2) Instantiate iScroll sebelum JS memasukkan struktur DOM halaman dan data, iaitu, instantiate pada permulaan JS, kerana JS boleh digunakan untuk memasukkan DOM atau data kemudian. Ini memastikan bahawa iScroll telah digunakan sebelum memasukkan data. .

HTML://struktur HTML

<html >
 <body>
  ...code...
 </body>
  //插入iscroll.js文件
 <script type="text/javascript" src="js/iscroll.js" > </script >
 //插入本页面JS文件
 <script type="text/javascript" src="js/uw3c.js" > </script >
</html>

Salin selepas log masuk

Kandungan fail JS://JS

var myscroll;
 function iscroll(data){
  //实例化iScroll
  myscroll=new iScroll("wrapper");
  pageData(data);
 }
 function pageData(obj){
  $("body").html(obj);
  myscroll.refresh();//当DOM结构发生变化的时候，需要刷新iScroll
 }
 iscroll("<div>pagedata</div>");

Salin selepas log masuk

Parameter dalam iScroll:

Apabila membuat instantiated iScroll, anda boleh memasukkan dua parameter Parameter pertama ialah ID DOM luar yang di instantiated, dan parameter kedua ialah objek kaedah pelaksanaan iScroll:

var myscroll=new iScroll("wrapper",{hScrollbar:false});
或者
var opts = {
    vScroll:false,//禁止垂直滚动
    snap:true,//执行传送带效果
    hScrollbar:false//隐藏水平方向上的滚动条
   };
var myscroll = new iScroll("wrapper",opts);

Salin selepas log masuk

Kandungan parameter kedua adalah seperti berikut. Parameter ini akan mengawal kesan iScroll:

hScroll  false 禁止横向滚动 true横向滚动 默认为true
vScroll  false 禁止垂直滚动 true垂直滚动 默认为true
hScrollbar  false隐藏水平方向上的滚动条
vScrollbar  false 隐藏垂直方向上的滚动条
fadeScrollbar false 指定在无渐隐效果时隐藏滚动条
hideScrollbar 在没有用户交互时隐藏滚动条 默认为true
bounce   启用或禁用边界的反弹，默认为true
momentum  启用或禁用惯性，默认为true，此参数在你想要保存资源的时候非常有用
lockDirection false取消拖动方向的锁定，true拖动只能在一个方向上（up/down 或者left/right）

Salin selepas log masuk

Kaedah dalam iScroll:

Sudah tentu, dalam parameter kedua, terdapat juga beberapa kaedah yang boleh dilaksanakan:
(1) kaedah tatalKe(x, y, masa, relatif): Lulus dalam 4 parameter: Jarak tatal paksi-X, jarak tatal paksi-Y, masa kesan dan sama ada ia relatif kepada kedudukan semasa. Jadi sebagai contoh:

//在200毫秒的时间内，Y轴向上滚动100像素；
uw3c.scrollTo(0, -100, 200)
//在200毫秒的时间内，相对于当前位置，X轴向左滚动100像素；
uw3c.scrollTo(-100, 0, 200, true)

Salin selepas log masuk

Kaedah (2)refresh(): Selepas struktur DOM berubah, iScroll perlu dimuat semula, jika tidak, pemalam tatal akan dibuat secara tidak tepat:

uw3c.refresh();//刷新iScroll

Salin selepas log masuk

(3)onPosChange, adakah kaedah yang boleh mengembalikan perubahan kedudukan? Anda boleh menyemak sama ada terdapat kaedah onPosChange dalam iScroll yang anda gunakan:

onPosChange:function(x,y){
 if(y < -200){
  //如果Y周向上滚动200像素，$("#uw3c")就显示，否则就隐藏。
  $("#uw3c").show();
 }else{
  $("#uw3c").hide();
 }
}

Salin selepas log masuk

(4) onScrollEnd: acara dilaksanakan apabila skrol tamat Jika anda ingin mencetuskan acara apabila skrol tamat, kaedah ini akan berguna:

//滚动结束后，执行的方法，滚动后会出现提示框alert("uw3c.com")
onScrollEnd:function(){
 alert("uw3c.com");
}

Salin selepas log masuk

(5) onRefresh: Selepas struktur DOM berubah, iScroll perlu dimuat semula, jika tidak, pemalam tatal akan dibuat secara tidak tepat onRefresh ialah kaedah yang akan dilaksanakan selepas iScroll dimuat semula.
(6) onBeforeScrollStart: Panggilan balik masa sebelum memulakan tatal Lalai adalah untuk menghalang tingkah laku lalai penyemak imbas.
(7) onScrollStart: panggil balik untuk mula menatal.
(8) onBeforeScrollMove: Panggilan balik sebelum kandungan bergerak.
(9) onScrollMove: panggil balik untuk pergerakan kandungan.
(10) onBeforeScrollEnd: panggil balik sebelum tamat penatalan.
(11) onTouchEnd: panggil balik selepas tangan meninggalkan skrin.
(12) onDestroy: panggil balik untuk memusnahkan contoh.

Di atas ialah keseluruhan kandungan artikel ini, saya harap ia akan membantu semua orang menggunakan pemalam bar skrol mudah alih iScroll.js dengan cekap.