2021-11-01 学习记录--error-【better-scroll error】EventEmitter has used unknown event type: “pullingUp“

最新推荐文章于 2022-10-30 17:25:48 发布

小呀小萝卜儿

最新推荐文章于 2022-10-30 17:25:48 发布

阅读量303

点赞数 3

分类专栏：学习文章标签： js

本文链接：https://blog.csdn.net/weixin_48850734/article/details/121076205

版权

学习专栏收录该内容

34 篇文章 1 订阅

订阅专栏

error：
EventEmitter has used unknown event type: "pullingUp", should be oneof ["refresh","contentChanged","enable","disable","beforeScrollStart","scrollStart","scroll","scrollEnd","scrollCancel","touchEnd","flick","destroy","alterOptions","mousewheelStart","mousewheelMove","mousewheelEnd"]
solution：
要配置pullUpLoad: true,注意！注意！注意！：这里要用驼峰命名法，不然会报错哟!
【是pullUpLoad，而不是pullUpload】
在这里插入图片描述
整体代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .content {
      height: 200px;
      background-color: red;
      overflow: hidden;
    }
  </style>
</head>
<body>

<div class="content">
  <ul>
    <button class="btn">按钮</button>
    <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>
    <li>列表数据21</li>
    <li>列表数据22</li>
    <li>列表数据23</li>
    <li>列表数据24</li>
    <li>列表数据25</li>
    <li>列表数据26</li>
    <li>列表数据27</li>
    <li>列表数据28</li>
    <li>列表数据29</li>
    <li>列表数据30</li>
    <li>列表数据31</li>
    <li>列表数据32</li>
    <li>列表数据33</li>
    <li>列表数据34</li>
    <li>列表数据35</li>
    <li>列表数据36</li>
    <li>列表数据37</li>
    <li>列表数据38</li>
    <li>列表数据39</li>
    <li>列表数据40</li>
    <li>列表数据41</li>
    <li>列表数据42</li>
    <li>列表数据43</li>
    <li>列表数据44</li>
    <li>列表数据45</li>
    <li>列表数据46</li>
    <li>列表数据47</li>
    <li>列表数据48</li>
    <li>列表数据49</li>
    <li>列表数据50</li>
  </ul>
</div>

<!--<script src="./better-scroll.js"></script>-->
<script src="https://unpkg.com/better-scroll@latest/dist/better-scroll.min.js"></script>

<script>
  // 默认情况下BScroll是不可以实时的监听滚动位置滴，如果想实时监听滚动位置的话，必须在后面的大括号里面传递参数
  // probe 侦测
  // 0,1 都是不侦测实时的位置
  // 2：在手指滚动的过程中侦测，手指离开后的惯性滚动过程中不侦测
  // 3：只要是滚动，都侦测
  const bscroll = BetterScroll.createBScroll(document.querySelector('.content'),{
    mouseWheel: true, // 注意：加了这个后才起效果
    probeType : 3,    // 想实时监听的时候
    click     : true, // 想让内部按钮被点击的时候
    pullUpLoad: true, // 想要做上拉加载的时候 【注意！注意！注意！：这里要用驼峰命名法，不然会报错哟】
  })

  bscroll.on('scroll',(position) => { // 与上面的probeType相配合使用
    console.log(position);
  })

  bscroll.on('pullingUp', () => { // 与上面的pullUpload相配合使用
    console.log('上拉加载更多');
    // 发送网络请求，请求更多页的数据

    // 等数据请求完成，并且将新的数据展示出来后
    setTimeout(() => {
      bscroll.finishPullUp(); // 用这个函数后，才能进行下一次的下拉加载更多
    },2000)
  })

  document.querySelector('.btn').addEventListener('click',function () { // 与上面的click相配合使用
    console.log('--------');
  })
</script>
</body>
</html>