vue使用IntersectionObserver实现无限下拉信息流
基于 IntersectionObserver 异步监听方法,实现无线信息流下拉加载,
https://developer.mozilla.org/zh-CN/docs/Web/API/IntersectionObserver
<template>
<div id="app">
<!-- 1. 设置容器元素,view-list-->
<div class="view-list">
<!-- 2. 循环一个列表,新数据进行追加,下面增加一个loading条-->
<div class="item" v-for="(item,index) in itemData" :key="index">账号ID:{{index}}</div>
<div class="item" id="loading">加载中</div>
</div>
</div>
</template>
<script>
export default {
name: 'App',
components: {
},
data(){
return {
itemData:[]
}
},
methods:{
// 获取随机数
getRange(){
let id = new Date().getTime();
return Math.random()*id;
},
// 触发监听回调
loadList(status){
status = status[0];
let isShow = status.isIntersecting;
if(isShow){
console.log("加载中 ---- ");
for(let i = 4;i>=0;i--){
this.itemData.push({id:this.getRange()})
}
}else {
console.log('不加载');
}
}
},
created() {
// 3. 初始化循环渲染的列表
for(let i = 4;i>=0;i--){
this.itemData.push({id:this.getRange()})
}
},
mounted() {
// 4. 挂载时,获取列表的容器元素,然后设置监听
// 使用官方提供的新接口:https://developer.mozilla.org/zh-CN/docs/Web/API/IntersectionObserver
/**
* callback : 回调函数,可见时 和 不可见时,都触发
* options :配置参数,
* root :根元素,默认是视图
* threshold : 交叉比例。也就是在跟元素出现的比例
*/
// 5. 初始化观察对象
let io = new IntersectionObserver(this.loadList, {});
// 6. 获取被监听元素
let viewList = document.getElementById('loading');
// 7. 在观察对象上,监听 6 中获取的对象
io.observe(viewList);
},
}
</script>
<style>
.view-list{
width: 100%;
height: 500px;
margin:20px 0;
overflow-x: scroll;
background-color: rgba(0, 0, 255, 0.25);
}
.item{
height: 50px;
border:1px gray solid;
margin-bottom: 10px;
}
</style>
vue使用IntersectionObserver实现无限下拉信息流的更多相关文章
- vue 用户输入搜索 与无限下拉
vue项目中,用户输入关键字搜索,并且手机端做无限下拉 watch: { 'getListForm.searchKey'(val) { this.radioChange(); // 还有其他逻辑,内部 ...
- 【转】超酷的 mip-infinitescroll 无限滚动(无限下拉)
写在前面 无限滚动技术(又叫做无限下拉技术)被广泛应用于新闻类,图片预览类网站.对用户来讲,使用无限滚动的页面有源源不断的信息可以预览,增加用户在页面的停留时长.技术上原理也很简单,在页面加载时加载一 ...
- Vue.js组件之联动下拉框
Html代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...
- 用vue写一个仿app下拉刷新的组件
如果你用vue弄移动端的页面,那么下拉刷新还是比较常见的场景,下面来研究如何写一个下拉刷新的组件(先上图); 由于节省大家的时间,样式就不贴出来了. html结构也不必介绍了,直接看代码吧-.- &l ...
- 关于Vue中页面(父组件)下拉,页面中的子组件加载更多数据的实现方法
一个项目中存在很多这种情况:父组件(页面)中的子组件需要做下拉加载更多的需求,但是这个下拉到底部的动作只能通过监控页面(父组件)来完成 这就需要父子组件之间的通信,代码如下: 1. 建立一个用于父子组 ...
- vue实现网络图片瀑布流 + 下拉刷新 + 上拉加载更多
一.思路分析和效果图 用vue来实现一个瀑布流效果,加载网络图片,同时有下拉刷新和上拉加载更多功能效果.然后针对这几个效果的实现,捋下思路: 根据加载数据的顺序,依次追加标签展示效果: 选择哪种方式实 ...
- vue开发 element的select下拉框设定初值后,不能重新选择的问题
问题描述: 用的element的select可多选的下拉选框,在回显后有初始值的情况下,不能修改,也不能再选择 如图,明明点击了一般内勤主管,但没有任何反应 <el-select v-model ...
- vue 运用ElementUI,做select下拉框回显
第一.加载的顺序,应该先加载下拉框要选择的数据,然后在通过编辑查询数据后回显. 第二.要保证select下拉的ID和v-model里边的id保持一致. 第三.elementUI就会自动的将数据回显了. ...
- vue的jsonp百度下拉菜单
通过vue的jsonp实现百度下拉菜单的请求,vue的版本是2.9.2 <!DOCTYPE html> <html lang="en"> <head& ...
随机推荐
- 数学--数论--HDU - 6322 打表找规律
In number theory, Euler's totient function φ(n) counts the positive integers up to a given integer n ...
- 编译警告:warning: operation on ‘i’ may be undefined
dest[i++]=src[i]; 这行代码,编译时会遇到警告: warning: operation on ‘i’ may be undefined(对于i变量的操作,有可能是未定义的) 改成 de ...
- CRT 连接AWS-EC2
crt使用.pem登录AWS服务器 网上看到方案如下,看到大部分人都成功了,一头雾水,我的crt不需要pub文件.... chmod xxx.pem ssh-keygen -p -f xxx.pem ...
- Python爬虫(一)爬百度贴吧
简单的GET请求: # python2 import urllib2 response = urllib2.urlopen('http://www.baidu.com') html = respons ...
- linux关于suid提权笔记
suid全称是Set owner User ID up on execution.这是Linux给可执行文件的一个属性,上述情况下,普通用户之所以也可以使用ping命令,原因就在我们给ping这个可执 ...
- 从一条数据说起——InnoDB存储数据结构
本篇博客参考掘金小册--MySQL 是怎样运行的:从根儿上理解 MySQL 先给大家讲一个故事,我刚参加工作,在一个小作坊里面当[码畜](尽管现在也是),有一天老板从我背后走过,说了一句举世震惊的话: ...
- HTML data-* 属性的含义和使用
data-*自定义数据属性 首先讲一下语法格式: data-* =“值” data-* 属性包括两部分: 属性名不应该包含任何大写字母,并且在前缀 "data-" 之后必须有至 ...
- spring表达式语言
使用文本表达式 <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http: ...
- 01_互联网基本原理和HTML入门
从"上网"说开去 1.上网就是请求数据 老师现在进行一个互联网原理的整体感知的教学,你注意,整体感知中,一些具体的细节,可能令你没有安全感(很多的知识盲点).没有关系,老师进行的是 ...
- Python网络爬虫练习
1. 豆瓣top250电影 1.1 查看网页 目标网址:https://movie.douban.com/top250?start=0&filter= start=后面的数字从0,25,50一 ...