下拉加载更多-懒加载(Better-Scroll的使用)

会说话的汤姆

于 2020-12-02 16:38:48 发布

阅读量474

点赞数

分类专栏：项目文章标签： vue

本文链接：https://blog.csdn.net/sinat_36048532/article/details/110483801

版权

项目专栏收录该内容

28 篇文章 0 订阅

订阅专栏

部分区域可以滚动

.content {
   height: 150px;
   background-color: red;
   
   overflow: hidden;
   overflow-y: scroll;/*超出部分自动隐藏*/ 
}

better-scroll官网

<template>
    <div class="wrapper" ref="aaa">
        <ul class="content">
            <li>123</li>
            <li>123</li>
            <li>123</li>
            <li>123</li>
            <li>123</li>
            <li>123</li>
            <li>123</li>
            <li>123</li>
            <li>123</li>
            <li>123</li>
            <li>123</li>
            <li>123</li>
            <li>123</li>
            <li>123</li>
            <li>123</li>
            <li>123</li>
            <li>123</li>
            <li>123</li>
            <li>123</li>
            <li>123</li>
            <li>123</li>
            <li>123</li>
            <li>123</li>
            <li>123</li>
            <li>123</li>
            <li>123</li>
            <li>123</li>
            <li>123</li>
            <li>123</li>
            <li>123</li>
            <li>123</li>
            <li>123</li>
            <li>123</li>
            <li>123</li>
            <li>123</li>
            <li>123</li>
            <li>123</li>
            <li>123</li>
            <li>123</li>
            <li>123</li>
            <li>123</li>
            <li>123</li>
            <li>123</li>
            <li>123</li>
            <li>123</li>
            <li>123</li>
            <li>123</li>
            <li>123</li>
            <li>123</li>
            <li>123</li>
            <li>123</li>
            <li>123</li>
            <li>123</li>
            <li>123</li>
            <li>123</li>
            <li>123</li>
            <li>123</li>
            <li>123</li>
            <li>123</li>
            <li>123</li>
            <li>123</li>
            <li>123</li>
            <li>123</li>
            <li>123</li>
            <li>123</li>
            <li>123</li>
            <li>123</li>
            <li>123</li>
            <li>123</li>
            <li>123</li>
            <li>123</li>
            <li>123</li>
            <li>123</li>
            <li>123</li>
            <li>123</li>
            <li>123</li>
            <li>123</li>
            <li>123</li>
            <li>123</li>
            <li>123</li>
            <li>123</li>
            <li>123</li>
            <li>123</li>
            <li>123</li>
            <li>123</li>
            <li>123</li>
            <li>123</li>
            <li>123</li>
            <li>123</li>
            <li>123</li>
            <li>123</li>
            <li>123</li>
            <li>123</li>
            <li>123</li>
            <li>123</li>
            <li>123</li>
            <li>123</li>
            <li>123</li>
            <li>123</li>
            <li>123</li>
        </ul>
    </div>
</template>

<script>
  import BScroll from 'better-scroll'
  export default {
    name: "Category",
    data() {
      return {
        scroll: null
      }
    },
    mounted() {
      console.log(this.$refs.aaa);
      this.scroll = new BScroll(this.$refs.aaa, {

      })
    }
  }
</script>

<style scoped>
    .wrapper {
        height: 150px;
        background-color: red;
        overflow: hidden;
    }

</style>

1. 下载better-scroll的源码；
2. import导入
script

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="wrapper">
    <ul class="content">
        <li>0i</li>
    </ul>
</div>
<script src="./better-scroll.js"></script>
<script>
    // 默认不能监听实时滚动位置
    // f: BScroll(el, options)
    const bScroll = new BScroll(document.querySelector('.wrapper'),{
      prototype: 2, // 0：不监听 1： 不监听； 2：监听滚动
      // 2. 在手指滚动过程中监听 惯性不监听
      // 3. 只要是滚动都会监听
      click: true,
      // 上拉加载更多，显示更多的数据
      pullUpLoad:{
        threshold: 50
      } // pullUpLoad: true
    });
    bScroll.on('scroll', function (position) {
      console.log(position);

    });
    
    bScroll.on('pullingUp', function () {
      console.log('上拉加载更多');
      // 发送网络请求
      
      // 数据请求完成，下拉更多的数据展示之后
      setTimeout(()=> {
        bScroll.finishPullUp();
      }, 2000);
    });
</script>
</body>
</html>

会说话的汤姆

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
下拉加载更多-懒加载(Better-Scroll的使用)

部分区域可以滚动.content { height: 150px; background-color: red; overflow: hidden; overflow-y: scroll;/*超出部分自动隐藏*/ }better-scroll官网<template> <div class="wrapper" ref="aaa"> <ul class="content"> <li
复制链接

扫一扫