vue滚动到底部加载数据并且防止触发多次

源码Demo：

<template>
  <div>
        <ul class="list">
          <li  v-for="(item,index) in listData" :key="index" :v-if="listData">{{item.album_title}}</li>
        </ul>
  </div>
</template>

关注我的微信公众号【前端基础教程从0开始】，加我微信，可以免费为您解答问题。回复“1”，拉你进程序员技术讨论群。回复“小程序”，领取300个优秀的小程序开源代码+一套入门教程。回复“领取资源”，领取300G前端，Java，微信小程序，Python等资源，让我们一起学前端。

<script>
import $ from 'jquery';
var isbool=true;
  export default {
    data () {
      return {
        listData:[],
      }
    },
    mounted() {
        this.lists()
        //滚动条到底部弹出评价窗口
        var minAwayBtm = 0;  // 距离页面底部的最小距离
        $(window).scroll(()=> {
           var awayBtm = $(document).height() - $(window).scrollTop() - $(window).height();
           if (awayBtm <= minAwayBtm && isbool) {
            isbool=false; 
            alert("达到底部。");
            this.lists()
           }
        })
    },
    methods: {
        lists(){
            this.$axios.get(this.Get_code_Host,{
                params: {
                    format:"json",
                    calback:'',
                    from:"webapp_music",
                    method:"baidu.ting.billboard.billList",
                    type:1,
                    size:10,
                    offset:0
                }
            })
            .then((res) => {
                console.log(res.data)
                this.listData=this.listData.concat(res.data.song_list)
                isbool=true; 
            })
            .catch(err => {
                console.log(err)
            })  
        }
    }
}

</script>