Jay_Ohhh-mall-vue
/
learnbetterscroll.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    .wrapper {
      /* 必须有个高度 */
      height: 150px;
      background-color: pink;
    }
    /* content的高度要比wrapper更大 */
  </style>
  <body>
    <div class="wrapper">
      <ul class="content">
        <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="https://cdn.jsdelivr.net/npm/better-scroll"></script>
    <!-- better-scroll是针对移动端的，调试时需要切换到移动端，然后用鼠标拖动，不是用滚轮 -->
    <!-- 尽量不要用最新版的better-scroll，可能会有bug -->
    <script>
      // probe：侦测
      // probeType：侦测滚动条位置，0是默认不侦测，1是确定不侦测
      // 2：在手指滚动过程中侦测，手指离开后不侦测
      // 3：只要是滚动都侦测
      // 需要等组件（包括插槽）挂载完才能实例化，
      // 所以一般写在mounted里
      // mounted实时监控data数据变化，随时去更新DOM
      if (!scroll) {
        scroll = new BScroll($refs.wrapper, {
          // probeType和pullUpLoad不应该固定，因为有的页面不需要监听滚动位置，监听是需要消耗性能的
          probeType: 3,
          pullUpLoad: true,
          click: true
        });
      } else {
        // 当 DOM 结构发生变化的时候务必要调用refresh()
        // 如果存在scroll则刷新
        scroll.refresh();
      }
      // scroll.on("scroll", position => console.log(position));
      scroll.on("pullingUp", () => {
        // pullingUp的回调函数只执行一次
        console.log("上拉加载更多");
        // 发送网络请求，请求更多页的数据
        // 等数据请求完成，并且监听的数据展示出来后
        setTimeout(() => {
          scroll.finishPullUp(); // 结束上一次的上拉加载事件，开始下一次的上拉加载事件
        }, 2000);
      });
      //
    </script>
  </body>
</html>