vue中使用滚动效果

new Vue({
  el: '#app',
  data: function data() {
    return {
      bottom: false,
      beers: []
    };
  },

  watch: {
    bottom: function bottom(_bottom) {
      if (_bottom) {
        this.addBeer();
      }
    }
  },
  created: function created() {
    var _this = this;

    window.addEventListener('scroll', function () {
      _this.bottom = _this.bottomVisible();
    });
    this.addBeer();
  },

  methods: {
    bottomVisible: function bottomVisible() {
      var scrollY = window.scrollY;
      var visible = document.documentElement.clientHeight;
      var pageHeight = document.documentElement.scrollHeight;
      var bottomOfPage = visible + scrollY >= pageHeight;
      return bottomOfPage || pageHeight < visible;
    },
    addBeer: function addBeer() {
      var _this2 = this;

      axios.get('https://api.punkapi.com/v2/beers/random').then(function (response) {
        var api = response.data[0];
        var apiInfo = {
          name: api.name,
          desc: api.description,
          img: api.image_url,
          tips: api.brewers_tips,
          tagline: api.tagline,
          food: api.food_pairing
        };
        _this2.beers.push(apiInfo);
        if (_this2.bottomVisible()) {
          _this2.addBeer();
        }
      });
    }
  }
});

　　

转载于:https://www.cnblogs.com/zhujiasheng/p/8343439.html