vue中使用滚动效果
2024-10-01 15:28:07
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(); } }); } } });
最新文章
- Git常用命令速查表
- django之form表单验证
- iOS边练边学--父子控件之作为导航控制器的子类产生的问题以及网易新闻练习
- Duilib中Webbrowser事件完善使其支持判断页面加载完毕
- [maven] 跳过单元测试
- Python argparse
- python 判断 windows 隐藏文件/系统文件
- Mysql 8个小时连接断开问题解析
- mvc wcf 并发提示,存储Application,验证是否有用户在操作
- [LA] 2031 Dance Dance Revolution
- 前端开发:H5直播起航
- 用html和css轻松实现康奈尔笔记(5R笔记)模板
- 开源库Magicodes.Storage正式发布
- 预计2019年发布的Vue3.0到底有什么不一样的地方?
- myBatis简学
- vue---computed计算属性的使用
- AndroidStudio环境安装与配置
- python之模块配置文件ConfigParser(在python3中变化较大)
- Windows系统32位、64位DLL文件的存放位置
- WP 8.1 status bar