一个项目中存在很多这种情况:父组件(页面)中的子组件需要做下拉加载更多的需求,但是这个下拉到底部的动作只能通过监控页面(父组件)来完成

这就需要父子组件之间的通信,代码如下:

1. 建立一个用于父子组件通信的工具,bus.js

import Vue from 'vue'
let bus = new Vue() export default bus

2. 在父组件中监听页面的下拉,并用bus将下拉到底部时这个信号发给子组件,此处bus.js放在lib文件夹下,.container为页面最外层的class

import Bus from '@/lib/bus'
methods: {
scrollListener () {
if (window.scrollTimer) clearTimeout(window.scrollTimer)
window.scrollTimer = setTimeout(() => {
let el = document.querySelector('.container')
let innerDiv = document.querySelector('.container>div')
if (el.scrollTop + window.innerHeight >= innerDiv.clientHeight) {
// 发送拉到底部的信号给子组件
Bus.$emit('loadMore')
}
}, 250)
}
mounted () {
document.querySelector('.container').addEventListener('scroll', this.scrollListener)
}

3. 在子组件中接受该信号,并调用加载数据的方法

created () {
Bus.$off('loadMore')
Bus.$on('loadMore', () => {
// 在此调用加载更多数据的方法
})
}

关于Vue中页面(父组件)下拉,页面中的子组件加载更多数据的实现方法的更多相关文章

  1. XRecyclerView:实现下拉刷新、滚动到底部加载更多以及添加header功能的RecyclerView

    介绍: 一个实现了下拉刷新,滚动到底部加载更多以及添加header功能的的RecyclerView.使用方式和RecyclerView完全一致,不需要额外的layout,不需要写特殊的adater. ...

  2. juery下拉刷新,ajax请求,div加载更多元素(一)

    ;//设置当前页数 var flag=true; //滑动加载 $(function(){ var winH = $(window).height(); //页面可视区域高度 $(window).sc ...

  3. ASP.NET仿新浪微博下拉加载更多数据瀑布流效果

    闲来无事,琢磨着写点东西.貌似页面下拉加载数据,瀑布流的效果很火,各个网站都能见到各式各样的展示效果,原理大同小异.于是乎,决定自己写一写这个效果,希望能给比我还菜的菜鸟们一点参考价值. 在开始之前, ...

  4. vue10行代码实现上拉翻页加载更多数据,纯手写js实现下拉刷新上拉翻页不引用任何第三方插件

    vue10行代码实现上拉翻页加载更多数据,纯手写js实现下拉刷新上拉翻页不引用任何第三方插件/库 一提到移动端的下拉刷新上拉翻页,你可能就会想到iScroll插件,没错iScroll是一个高性能,资源 ...

  5. 笔记-VUE滚动加载更多数据

    来源:https://blog.csdn.net/qq_17281881/article/details/87342403 VUE滚动加载更多数据 data() { return { loading: ...

  6. 微信小程序 - (下拉)加载更多数据

    注意和后端配合就行了,前端也只能把数据拼接起来! 无论是下拉加载还是加载更多,一样的道理! 注意首次加载传递参数 注意每次加载数据数 wxml <view class='table-rank'& ...

  7. html ajax请求 php 下拉 加载更多数据 (也可点击按钮加载更多)

    <input type="hidden" class="total_num" id="total" value="{$tot ...

  8. h5 实现页面上拉加载更多数据

    您好,您的上拉加载更多的代码来喽: html:(style部分:html部分:js部分--js部分主要就是监控上拉,调接口) //上拉加载更多css <style> .wait-loadi ...

  9. Vue.js中滚动条加载更多数据

    本文章参考:http://www.cnblogs.com/ssrsblogs/p/6108423.html 分析:1.需要判断滚动条是否到底部: 需要用到DOM的三个属性值,即scrollTop.cl ...

随机推荐

  1. MindManager2018试用期过后 修改过期时间 破解使用

    MindManager2018试用期过后 修改过期时间 破解使用 2019年06月13日 15:58:11 一生中所爱 阅读数 1991更多 分类专栏: 工具软件使用   1.找到路径:C:\User ...

  2. Block pool ID needed, but service not yet registered with NN java.lang.Exception: trace 异常解决

    以上为报错信息: 原因大概为:dd和nd关联的versionId不同导致, 解决方案,备份之前的current文件夹,让其自己生成新的.

  3. hive-1.1.0-cdh5.11.1-src compile

    1. download cdh hive src  http://archive.cloudera.com/cdh5/cdh/5/hive-1.1.0-cdh5.11.1-src.tar.gz 2. ...

  4. SecureCRT 8.1破解方式

    百度网盘下载,里面有破解程序和破解方式. 链接: https://pan.baidu.com/s/1wlhqnn-TE_mcOXOLljP-zg 密码: 3ffj

  5. C#RSA加密解密(对接PHP)

    上篇文章中写的RSA加密是针对C#的,现在外部调用的是PHP,我们平常见到的RSA无论公钥和私钥都是一长串数字,很显然C#生成的XML不是通用的加密.如果外部调用需要处理一下. 一.首先可以去网上找一 ...

  6. 【C# 开发技巧】 Application.DoEvents( ) 使用笔记

    该方法可以处理当前队列的消息,比如一个for循环 5000次 向TextBox中追加文本,那肯定会假死一会儿的. 此时便可使用Application.DoEvents()来处理队列的信息. 简单说下使 ...

  7. Angular 8 - 更小的包

    Angular 8 - 更小的包 Angular 8 发布 原文地址:https://blog.angular.io/version-8-of-angular-smaller-bundles-cli- ...

  8. js中遍历对象(5种)和遍历数组(6种)的方法总结(转载)

    一.遍历对象方法 1.for...in遍历输出的是对象自身的属性以及原型链上可枚举的属性(不含Symbol属性),原型链上的属性最后输出说明先遍历的是自身的可枚举属性,后遍历原型链上的 eg: var ...

  9. 用Inno setup制作以管理员权限启动的安装包

    inno setup制作的安装包,默认是不需要管理员权限启动的.我们制作安装包,往往需要做一些设置工作,这些设置工作可能用到管理员权限.使用Resource Hacker修改inno setup资源, ...

  10. 最新 京东java校招面经 (含整理过的面试题大全)

    从6月到10月,经过4个月努力和坚持,自己有幸拿到了网易雷火.京东.去哪儿等10家互联网公司的校招Offer,因为某些自身原因最终选择了京东.6.7月主要是做系统复习.项目复盘.LeetCode与牛客 ...