vue实现滚动鼠标滑轮，滚动条到底后，触发加载分页，如果有分页数据则加载分页数据，如果没有分页数据则不再触发接口请求。

 <div ref="scroll" class="pullup-wrapper hideScrollBar">
        <div class="videoList2">
          <item :item="item" v-for="(item,index) in list" :key="index"></item>
          <div class="nore" v-if="more=='noMore'">没有更多</div>
        </div>
      </div>

<script>
import pageHeader from "@/components/pageHeader";
import tab from "@/components/videoList/tab"
import item from "@/components/videoList/item";
import {getVideoByTypeList} from "@/api/api/user";
import courseList from "@/components/courseList";
import BScroll from '@better-scroll/core'
import Pullup from '@better-scroll/pull-up'
import MouseWheel from '@better-scroll/mouse-wheel'

BScroll.use(Pullup)
BScroll.use(MouseWheel)
export default {
  data() {
    return {
      typeId: 0,
      total: 0,
      more: 'more',
      list: [],
      pageSize: 10,
      currentPage: 1,
      isPullUpLoad: false,
      enterpriseId: this.$route.query.enterpriseId,
    }
  },
  components: {pageHeader, tab, item, courseList},
  created() {

  },

  mounted() {
    this.initBscroll()
    // this.getlist()
  },
  methods: {
    initBscroll() {
      this.scroll = new BScroll(this.$refs.scroll, {
        probeType: 3,
        pullUpLoad: true,
        mouseWheel: true
      })

      this.scroll.on('pullingUp', this.pullingUpHandler)
    },
    async pullingUpHandler() {
      this.isPullUpLoad = true
      console.log('滚动')
      if (this.more == 'more') {
        await this.getmore()
      }
      this.scroll.finishPullUp()
      this.scroll.refresh()
      this.isPullUpLoad = false
    },
    getdata(data) {
      this.typeId = data.id
      this.getlist()
    },
    closeWin() {
      console.log('关闭')
      if (navigator.userAgent.indexOf("MSIE") > 0) {
        if (navigator.userAgent.indexOf("MSIE 6.0") > 0) {
          window.opener = null;
          window.close();
        } else {
          window.open("", '_top');
          window.top.close();
        }
      } else if (navigator.userAgent.indexOf("Firefox") > 0) {
        window.location.href = 'about: blank'; //火狐默认状态非window.open的页面window.close是无效的
      } else {
        window.opener = null;
        window.open('', '_self', '');
        window.close();
        window.location.href = "about:blank";
        window.close();
      }
    },
    goback() {
      this.$router.go(-1)
    },
    getmore() {
      var that = this
      this.currentPage = this.currentPage + 1;
      let params = {
        typeId: this.typeId,
        currentPage: this.currentPage,
        pageSize: this.pageSize
      }
      getVideoByTypeList(params).then(function (res) {
        var data = res.result.records
        if (!data || data.length == 0) {
          that.more = 'noMore';
        }
        for (var i = 0; i < data.length; i++) {
          that.list.push(data[i]);
        }
      })
    },
    getlist() {
      var that = this
      that.currentPage = 1;
      that.more = 'more'
      let params = {
        typeId: this.typeId,
        currentPage: this.currentPage,
        pageSize: this.pageSize
      }
      getVideoByTypeList(params).then(function (res) {
        that.list = res.result.records
        that.total = res.result.total
      })
    }
  },
  filters: {},
  watch: {}
}
</script>

<style lang="scss" scoped>
.homebody {
  width: 100%;
  height: 100%;
  position: absolute;
  background: url("../assets/videobg.png") center center no-repeat;
  background-size: cover;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: nowrap;
  flex-direction: column;
  align-content: flex-start;
}

.videoList {
  width: calc(100% - 100px - 100px);
  margin-left: 100px;
  margin-top: 50px;
  position: relative;
  height: calc(100% - 340px);
}

.titleimg {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: row;
  align-content: flex-start;
  margin-top: 20px;
  margin-bottom: 20px;

  img {
    width: 254px;
  }
}

.pullup-wrapper {
  width: 100%;
  position: relative;
  height: 100%;
  overflow: hidden;
}

.videoList2 {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  flex-direction: row;
  align-content: flex-start;
  position: relative;
}

.shangke_and_close {
  width: 91px;
  height: 199px;
  background: linear-gradient(90deg, #2091FF 0%, #5EBBFF 100%);
  border-radius: 45px;
  bottom: 30px;
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: column;
  align-content: flex-start;

  .line {
    width: 91px;
    height: 1px;
    background: linear-gradient(269deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 25%, #FFFFFF 74%, rgba(255, 255, 255, 0) 100%);
  }

  .span {
    font-size: 30px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #FFFFFF;
    line-height: 42px;
    text-shadow: 2px 3px 4px #134DAB;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: row;
    align-content: flex-start;
    height: 100px;
    cursor: pointer;
  }
}

.nore {
  height: 80px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: row;
  align-content: flex-start;
  font-size: 16px;
  color: #999;
}
</style>