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();
        }
      });
    }
  }
});

  

vue中使用滚动效果的更多相关文章

  1. Vue中的动画效果

    Vue 在插入.更新或者移除 DOM 时,提供多种不同方式的应用过渡效果.包括以下工具: 在 CSS 过渡和动画中自动应用 class 可以配合使用第三方 CSS 动画库,如 Animate.css ...

  2. Vue中过度动画效果应用

    一.实现动画过渡效果的几种方式 实现动画必须要将要进行动画的元素利用<transition>标签进行包裹 1.利用CSS样式实现过渡效果 <transition name=" ...

  3. 手写vue中v-bind:style效果的自定义指令

    自定义指令 什么是自定义指令 以 v- 为前缀,然后加上自己定义好的名字组成的一个指令就是自定义指令.为什么要有自定义指令呢?在有些时候,你仍然需要对普通的DOM元素进行底层的操作,这个时候就可以用到 ...

  4. vue中获取滚动table的可视页面宽度,调整表头与列对齐(每列宽度不都相同)

    mounted() { // 在mounted中监听表格scroll事件 this.$refs.scrollTable.addEventListener( 'scroll',(event) => ...

  5. vue 新闻列表滚动效果

    效果如下: <template> <div> <div class="scroll-wrap"> <ul class="scro ...

  6. vue监听滚动事件,实现滚动监听

    在vue中实现滚动监听和原生js无太大差异,下面是一个简单的demo,可在控制台查看结果 <!DOCTYPE html> <html lang="en"> ...

  7. CProgressCtrl进度条控件实现进度滚动效果

    关于CProgressCtrl 控件的基本操作网上有很多资料,可我想实现进度条中进度滚动效果,即很多时候程序出现的等待或启动画面,如下图: 实现这个效果的函数为SetMarquee(_In_ BOOL ...

  8. vue 原生添加滚动加载更多

    vue中添加滚动加载更多,因为是单页面所以需要在跳出页面时候销毁滚动,要不会出现错乱.我们在mounted建立滚动,destroyed销毁滚动. mounted () { window.addEven ...

  9. vue中,模拟锚点定位,实现滚动动画效果

    平时我们利用锚点进行页面内的快速瞬移,画面跳转生硬,观感很差. 在VUE中,如何快速的实现锚点效果,并且还让它拥有滚动的动画效果呢. 其实两行代码就能解决问题 1 <a @click=" ...

随机推荐

  1. Spark技术在京东智能供应链预测的应用——按照业务进行划分,然后利用scikit learn进行单机训练并预测

    3.3 Spark在预测核心层的应用 我们使用Spark SQL和Spark RDD相结合的方式来编写程序,对于一般的数据处理,我们使用Spark的方式与其他无异,但是对于模型训练.预测这些需要调用算 ...

  2. linux 下的两种软件安装方式 —— 源码(编译、安装),编译好的二进制(直接安装)

    我们以 GPG(加密工具)为例来说明两种安装方式的区别: 源码(Source code releases,名称中则会含有src等说明信息,tarball:source),先编译再安装 GPU 的源码地 ...

  3. nginx的location 匹配的规则问题

    正则解释: ~ #匹配一个正则匹配,区分大小写~* #匹配一个正则,不区分大小写^~ #普通字符匹配,如果该选择匹配不匹配别的选项,一般用来匹配目录= #精确匹配 匹配案例:location = / ...

  4. RocketMQ学习笔记(3)----RocketMQ物理结构和逻辑部署结构

    1. RocketMQ的物理结构 RecketMQ网络部署的特点: Name Server是一个几乎无状态特点,可集群部署,节点之间无任何信息同步的(相对于zookeeper是较为轻量级的). Bro ...

  5. 状压DP复习

    深感自己姿势水平之蒻……一直都不是很会状压DP,NOIP又特别喜欢考,就来复习一发…… 题目来源 Orz sqzmz T1 [BZOJ4197][NOI2015]寿司晚宴 (做过)质因数分解最大的质因 ...

  6. WebKit.NET-0.5简单应用

    最近想用c#做个简单的浏览器工具,但是网站一些内容不支持c#内置的WebBowser控件,于是只能改用其他内核浏览器进行开发,搜索到WebKit.NET这个封装好的浏览器引擎,需求的功能也都有,于是用 ...

  7. [APIO2016]Gap

    题目:UOJ#206. 题目大意:由于过于冗长,不好解释,所以详见原题. 解题思路:这是一道交互题. 对于第一问,很容易解决.由于数列严格递增,所以不会出现相等的情况. 首先调用MinMax(0,10 ...

  8. 洛谷 P4932 浏览器 (思维题)

    题目大意:给你一个序列,求满足$x_{i}\: xor\; x_{j}$在二进制下1的数量为奇数的数对数量 打月赛的时候真没想出来,还是我太弱.. xor意义下,对于两个数,假设它们两个每一位都是2个 ...

  9. 《Linux 进程间通信》命名管道:FIFO

    命名管道的主要用途:不相关的进程之间交换数据. 命令行上创建命名管道: $ mkfifo filename  程序中创建命名管道: #include <sys/types.h> #incl ...

  10. linux指令--用户和工作组管理

    >>前言    Linux是一个多用户.多任务的操作系统,Linux系统的初衷之一就是满足多用户同时工作的需求,因此,linux需要具备很好的安全性,需要对用户进行管理,用户又分几种,管理 ...