zoukankan      html  css  js  c++  java
  • 关于第三方框架 better-scroll的个人理解

    在普通html文件中:

    首先我们写一个DIV 创建一个class。如下

    <style>
      .wrapper{
        //设置一个固定的高 和背景颜色
        height:200px;
        background-color: sandybrown;
        }
    </style>


    <
    div class="wrapper"> <ul>
      <li>{个表格¥}*100</li>
     </
    ul> </div>

    假设我们引入了better-scroll框架 ========》 <script src='./bscroll.js'></script>

    然后我们就可以在<script>中去使用better-scroll了

    给下面的代码做一些小解释:

    1.BScroll 是better-scroll中声明的所以我们引用过better-scroll之后可以直接new出来

    2.new 出来的BScroll中可以传2个参数(el,position);第一个是el 第二个是position,个人理解,第一个是dom节点,第二个是一个对象,跟位置有关的属性写进去

    3.第二个参数是一个对象,我们给它写进去一个 probeType的属性, probeType : 侦测的意思

    4.probeType 有4个值, 分别是 0,1,2 ,3  其中0,1代表了不进行侦测,2和3代表了侦测,

       当probeType:2时,在手指滚动的过程中侦测,手指离开后的惯性滚动过程中不侦测

       当probeType:3时,只要是滚动都进行侦测

    5.需要设置click:true  ,这个属性默认为false, 如果为false无法监听.wrapper中的点击事件;不会将事件派发出去,为true时才会派发出去

    6.监听上拉加载更多: pullUpLoad :true,如果只写这个属性,就只能加载一次,

    7.想要多次实现上拉加载更多,需要再加载完成后,调用BScroll对象的finishPullUp()方法

    <script>
      const bscroll = new BScroll(document.querySelector('.wrapper'),{
    probeType: 3,
       click:true
    })
    bscroll.on('scroll',(position)=>{
       console.log(position)
    }) </script>
  • 相关阅读:
    福大软工1816 · 第四次作业
    福大软工1816 · 第三次作业
    福大软工1816 · 第二次作业
    福大软工1816 · 第四次作业
    福大软工1816 · 第三次作业
    Alpha 冲刺 (4/10)
    Alpha 冲刺 (3/10)
    Alpha 冲刺 (2/10)
    Alpha 冲刺 (1/10)
    项目需求分析
  • 原文地址:https://www.cnblogs.com/a973692898/p/12889405.html
Copyright © 2011-2022 走看看