vue scroll滑動到底部自動加載

vue中常常會遇到滑動加載的情況，爲了不讓數據一次性請求到太多。

那麼接下來就來實現一下這個功能吧

<template>
  <div id="app">
    <div class="showpanel">
      <div class="title">下拉自動加載</div>
      <div class="boxpanel">
        <div class="show-item" v-for="(index,item) in showdata" :key="index">{{index+1}}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showdata: 10
    }
  }
}
</script>
<style lang="less" scoped>
.showpanel {
  height:100%;
  width: 100%;
  display: flex;
  flex-direction: column;
}
.title {
  padding: 20px;
  text-align: center;
}
.boxpanel {
  flex: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 10%;
  background: blue;
  overflow-y: scroll;
}

.show-item {
  width:48%;
  background: brown;
  height:30%;
  margin-bottom: 20px;
  color: #fff;
  text-align: center;
  font-size: 40px;
}
</style>

 

1.首先創建10個div,在需要顯示的內容區域內。爲了區分，顏色有可能有點辣眼睛。

2.檢測滑動條是否滑倒底部了

在滑動區域中加入@scoll 監聽時間

當該區域的的正文區域的高度，減去可見區域的高度，小於設定的高度的時候，就認爲這個滑塊可以加載新的資源了。

如圖在不停往下移動滑塊的時候，就會不斷增加滑塊的個數

 

3.當請求接口的時候也是同理的。添加一個頁數的參數，跟是否可以加載的判定。

<template>
  <div id="app">
    <div class="showpanel">
      <div class="title">下拉自動加載</div>
      <div class="boxpanel" @scroll="scrollBottom($event)">
        <div class="show-item" v-for="(index,item) in showdata" :key="index">{{index+1}}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showdata: [],
      page: 0, // 根據接口定義的初始值
      loadflag: false // 是否可以加載數據
    }
  },
  methods: {
    scrollBottom(e) {
      let self = this
      let Scroll = e.target
      // 網頁可見區域高：document.body.clientHeight
      // 網頁正文全文高：document.body.scrollHeight
      let scrollHeight = Scroll.scrollHeight - Scroll.clientHeight
      self.scrollTop = Scroll.scrollTop
      if (scrollHeight - Scroll.scrollTop < 100 && !self.loadflag) {
        console.log('到底部了')
        self.loadflag = true
        self.page++
        self.loadData()
      }
    },
    loadData() {
      let self = this
      self.$axios
        .post('接口', '參數')
        .then(response => {
          var data = response.data

          if (data.code === 1) {
            if (data.data.length > 0) {
              var list = self.showdata
              self.showdata = list.concat(data.data)
              self.loadflag = false
            } else {
              console.log('沒有更多參數了')
            }
          } else {
            console.log(data.meg)
          }
        })
        .catch(function (error) {
          console.log(error)
        })
    },
    created () {
      let self = this
      self.loadData()
    }
  }

}
</script>
<style lang="less" scoped>
.showpanel {
  height:100%;
  width: 100%;
  display: flex;
  flex-direction: column;
}
.title {
  padding: 20px;
  text-align: center;
}
.boxpanel {
  flex: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 10%;
  background: blue;
  overflow-y: scroll;
}

.show-item {
  width:48%;
  background: brown;
  height:30%;
  margin-bottom: 20px;
  color: #fff;
  text-align: center;
  font-size: 40px;
}
</style>

 

python課程

https://marketing.csdn.net/poster/109?utm_source=NEWFXDT