Vue---滚动时加载(懒加载)数据插件better-scroll

清疚 2022-11-17 14:53 501阅读 0赞

*  **安装 better-scroll**

npm install better-scroll --save

*  **页面导入并使用**

<template>
        <div>
            <div class="scroll">
                <div>
                   <div class="sing-card" v-for="(item,index) in data.tabData" :key="index">
                       <h4>{
       { item.name }}</h4>
                   </div>
                </div>
            </div>
        </div>
    </template>
    <script lang="ts">
    import { defineComponent, ref, onMounted } from 'vue'
    import BScroll from 'better-scroll'
    
    export default defineComponent({
      name: 'Scroll',
      setup () {
        const data = ref({
          tabData: [{ name: '七里香' }, { name: '青花瓷' }, { name: '东风破' }, { name: '兰亭序' }]
        })
    
        let scroll: BScroll
        onMounted(() => {
          loadPage()
        })
    
        // 页面初始化
        function loadPage () {
          loadData().then(() => {
            scrollInit()
          }).catch(() => { /* */ })
        }
    
        // 初始化 BScroll 实例对象
        function scrollInit () {
          scroll = new BScroll('.scroll', { // 只监听上拉操作
            pullUpLoad: true,
            click: false,
            preventDefault: false
          })
          scroll.on('pullingUp', scrollHandler) // 监听上拉操作 执行 scrollHandler
        }
    
        // 上拉操作事件
        function scrollHandler () {
          // 网络请求获取数据
          loadData().then(() => {
            scroll.finishPullUp() // 结束上拉操作，继续监听下次操作
            scroll.refresh() // 需要进行刷新
          }).catch(() => { /* */ })
        }
    
        function loadData () {
          return new Promise<void>(resolve => {
            data.value.tabData.push({ name: `Jay${data.value.tabData.length}` })
            console.log(1)
            resolve()
          })
        }
    
        return {
          data
        }
      }
    })
    </script>
    <style lang="css">
      .scroll{ /* 被监听的div需要设置一定的高度和overflow属性 */
        height: 600px;
        overflow: hidden;
      }
      .sing-card{
        height: 150px;
        background-color: wheat;
        border-radius: 10px;
        padding: 15px;
        box-shadow: wheat 0px 3px 5px 4px;
        margin-bottom: 20px;
        pointer-events: auto;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    </style>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTE1NDY5_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTE1NDY5_size_16_color_FFFFFF_t_70]: /images/20221022/03402cc0b4eb476ba5e81125133b8a13.png