iScroll 滾動插件(必學必看必爽!!!!)

iScroll 插件介紹

iScroll是一個高性能,資源占用少,無依賴,多平臺的javascript滾動插件。

它可以在桌面,移動設備和智能電視平臺上工作。它一直在大力優化性能和文件大小以便在新舊設備上提供最順暢的體驗。

iScroll不僅僅是 滾動。它可以處理任何需要與用戶進行移動交互的元素。在你的項目中包含僅僅4kb大小的iScroll,你的項目便擁有了滾動,縮放,平移,無限滾動,視差滾動,旋轉功能。給它一個掃帚它甚至能幫你打掃辦公室。

即使平臺本身提供的滾動已經很不錯,iScroll可以在此基礎上提供更多不可思議的功能。具體來說:

  • 細粒度控制滾動位置,甚至在滾動過程中。你總是可以獲取和設置滾動器的x,y坐標。
  • 動畫可以使用用戶自定義的擦出功能(反彈'bounce',彈性'elastic',回退'back',...)。
  • 你可以很容易的掛靠大量的自定義事件(onBeforeScrollStart, *
  • 開箱即用的多平臺支持。從很老的安卓設備到最新的iPhone,從Chrome瀏覽器到IE瀏覽器。

說白了就是一個可以幫我們實現元素在PC端手機端滾動的插件 賊好用

下面會有原生JavaScript和Vue的不同例子Demo

GitHubDemo地址 https://github.com/LanHai1/iScroll
中文文檔https://iiunknown.gitbooks.io/iscroll-5-api-cn/content/index.html

由于iScroll插件需計算元素的高度 動態添加數據后會失效 所以需要調用myScroll.refresh();方法進行刷新

如果是用Vue實現iScroll 注意: 需要把實例new iScroll寫到mounted生命周期鉤子中 需要在updated生命周期鉤子中設置iScroll刷新

外層父元素需要設置高度!

頁面結構

必須遵守這三層結構即可

<!-- 最外層盒子 和iScroll 綁定 -->
<div id="lists" ref="wrapper">   
   <!-- 內容盒子 -->
  <ul>   
    <!-- 內容 --> 
    <li v-for="(item, index) in arrList" :key="index">{{ item }}</li>   
  </ul>
</div>
原生JavaScript實現代碼
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      #wrapper {
        width: 500px;
        height: 100px;
        border: 1px solid #000;
        margin: 100px auto;
        /* overflow: hidden; */
      }
      ul {
        padding: 0;
        margin: 0;
        
      }
      li {
        cursor: default;
      }
    </style>
  </head>
  <body>
    <button id="btn">點擊添加一個li</button>
    <div id="wrapper">
      <ul>
        <li>我是第1個</li>
        <li>我是第2個</li>
        <li>我是第3個</li>
        <li>我是第4個</li>
        <li>我是第5個</li>
        <li>我是第6個</li>
        <li>我是第7個</li>
        <li>我是第8個</li>
        <li>我是第9個</li>
        <li>我是第10個</li>
        <li>我是第11個</li>
        <li>我是第12個</li>
        <li>我是第13個</li>
        <li>我是第14個</li>
        <li>我是第15個</li>
        <li>我是第16個</li>
        <li>我是第17個</li>
        <li>我是第18個</li>
        <li>我是第19個</li>
        <li>我是第20個</li>
      </ul>
    </div>
    <script src="./lib/iscroll.js"></script>
    <script>
      const myScroll = new IScroll("#wrapper", {
        mouseWheel: true, // 開啟鼠標滾輪支持
        scrollbars: "custom" // 開啟滾動條支持
      });
      document.querySelector("#btn").onclick = () => {
        let li = document.createElement("li");
        li.innerText = "我是新增的li";
        document.querySelector("#wrapper>ul").appendChild(li);
        // 動態添加數據后 刷新iscroll
        myScroll.refresh();
      };
    </script>
  </body>
</html>
Vue實現代碼
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      #lists {
        width: 400px;
        height: 80px;
        border: 1px solid #000;
        margin-top: 20px;
      }
      #lists > ul {
        padding: 0;
        margin: 0;
      }
      #lists>ul>li{
          cursor: default;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <input type="text" name="" id="" v-model="liStr" @keyup.enter="addList" />
      <div id="lists" ref="wrapper">
        <ul>
          <li v-for="(item, index) in arrList" :key="index">{{ item }}</li>
        </ul>
      </div>
    </div>
    <script src="./lib/iscroll.js"></script>
    <script src="./lib/vue.js"></script>
    <script>
      const vm = new Vue({
        el: "#app",
        data: {
          liStr: "",
          arrList: [
            "我是第1個li",
            "我是第2個li",
            "我是第3個li",
            "我是第4個li",
            "我是第5個li",
            "我是第6個li",
            "我是第7個li",
            "我是第8個li",
            "我是第9個li",
            "我是第10個li"
          ],
          // iscorll 實例對象
          myScroll: undefined
        },
        methods: {
          addList() {
            this.arrList.push(this.liStr);
            this.liStr = "";
          }
        },
        // data數據全部掛載 加載iScroll
        mounted() {
          this.myScroll = new IScroll(this.$refs.wrapper, {
            mouseWheel: true, // 開啟鼠標滾輪支持
            scrollbars: "custom" // 開啟滾動條支持
          });
        },
        // 數據更新 重新刷新iScroll 計算高度
        updated() {
          this.myScroll.refresh();
        }
      });
    </script>
  </body>
</html>
gif

建議使用 better-scroll

因為iScroll已經很久沒有更新了 可能會存在bug better-scroll的使用方法和iScroll一樣 一直在更新

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • javascript功能插件大集合,寫前端的親們記得收藏 包管理器管理著 javascript 庫,并提供讀取和打...
    狗狗嗖閱讀 813評論 0 1
  • 一:什么是閉包?閉包的用處? (1)閉包就是能夠讀取其他函數內部變量的函數。在本質上,閉包就 是將函數內部和函數外...
    xuguibin閱讀 9,721評論 1 52
  • 基于Vue的一些資料 內容 UI組件 開發框架 實用庫 服務端 輔助工具 應用實例 Demo示例 element★...
    嘗了又嘗閱讀 1,175評論 0 1
  • title: IScroll-5的文檔date: 2017-07-03 11:10:40tags: javascr...
    Gary23閱讀 2,667評論 0 9
  • 日前,外媒發現樂視的美國官方商城“偷跑”,原定于10月19日發布的手機,居然現在就可以在商城中買到了——官網上還沒...
    宮冰澤閱讀 216評論 0 1