关于Vue中页面(父组件)下拉,页面中的子组件加载更多数据的实现方法
一个项目中存在很多这种情况:父组件(页面)中的子组件需要做下拉加载更多的需求,但是这个下拉到底部的动作只能通过监控页面(父组件)来完成
这就需要父子组件之间的通信,代码如下:
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中页面(父组件)下拉,页面中的子组件加载更多数据的实现方法的更多相关文章
- XRecyclerView:实现下拉刷新、滚动到底部加载更多以及添加header功能的RecyclerView
介绍: 一个实现了下拉刷新,滚动到底部加载更多以及添加header功能的的RecyclerView.使用方式和RecyclerView完全一致,不需要额外的layout,不需要写特殊的adater. ...
- juery下拉刷新,ajax请求,div加载更多元素(一)
;//设置当前页数 var flag=true; //滑动加载 $(function(){ var winH = $(window).height(); //页面可视区域高度 $(window).sc ...
- ASP.NET仿新浪微博下拉加载更多数据瀑布流效果
闲来无事,琢磨着写点东西.貌似页面下拉加载数据,瀑布流的效果很火,各个网站都能见到各式各样的展示效果,原理大同小异.于是乎,决定自己写一写这个效果,希望能给比我还菜的菜鸟们一点参考价值. 在开始之前, ...
- vue10行代码实现上拉翻页加载更多数据,纯手写js实现下拉刷新上拉翻页不引用任何第三方插件
vue10行代码实现上拉翻页加载更多数据,纯手写js实现下拉刷新上拉翻页不引用任何第三方插件/库 一提到移动端的下拉刷新上拉翻页,你可能就会想到iScroll插件,没错iScroll是一个高性能,资源 ...
- 笔记-VUE滚动加载更多数据
来源:https://blog.csdn.net/qq_17281881/article/details/87342403 VUE滚动加载更多数据 data() { return { loading: ...
- 微信小程序 - (下拉)加载更多数据
注意和后端配合就行了,前端也只能把数据拼接起来! 无论是下拉加载还是加载更多,一样的道理! 注意首次加载传递参数 注意每次加载数据数 wxml <view class='table-rank'& ...
- html ajax请求 php 下拉 加载更多数据 (也可点击按钮加载更多)
<input type="hidden" class="total_num" id="total" value="{$tot ...
- h5 实现页面上拉加载更多数据
您好,您的上拉加载更多的代码来喽: html:(style部分:html部分:js部分--js部分主要就是监控上拉,调接口) //上拉加载更多css <style> .wait-loadi ...
- Vue.js中滚动条加载更多数据
本文章参考:http://www.cnblogs.com/ssrsblogs/p/6108423.html 分析:1.需要判断滚动条是否到底部: 需要用到DOM的三个属性值,即scrollTop.cl ...
随机推荐
- plupload上传大文件
大容量文件上传早已不是什么新鲜问题,在.net 2.0时代,HTML5也还没有问世,要实现这样的功能,要么是改web.config,要么是用flash,要么是用一些第三方控件,然而这些解决问题的方法要 ...
- 定时杀死warn进程
6 6 * * * /root/wz/mysqlRestart.sh #MySQL restart7 6 * * * /bin/sh /home/warn/kill_.sh8 6 * * * / ...
- Python3多重继承排序原理(C3算法)
参考:https://www.jianshu.com/p/c9a0b055947b https://xubiubiu.com/2019/06/10/python-%E6%96%B9%E6%B3%95% ...
- iOS-AVPlayer使用
1引入AVFoundation.framework框架 2引入头文件<AVFoundation/AVFoundation.h>,并拖入需要播放的视频文件 代码如下: 自定义播放的View, ...
- socket 一个websocke对应一个socketclient对象
using System; using System.Collections.Concurrent; using System.Collections.Generic; using System.Co ...
- numpy 构建深度神经网络来识别图片中是否有猫
目录 1 构建数据 2 随机初始化数据 3 前向传播 4 计算损失 5 反向传播 6 更新参数 7 构建模型 8 预测 9 开始训练 10 进行预测 11 以图片的形式展示预测后的结果 搭建简单神经网 ...
- Soda Machine【差分+离散化】
题目链接:https://ac.nowcoder.com/acm/contest/1106/A 题目大意: 1.一条长1e9的线段,每个节点都可以上色.给出n次操作,每次操作将[l, r]区间内的节点 ...
- 记:联调安卓设备的神药-无需usb数据线即可直连
前言 最近需要调试公司的安卓服务,正常情况下,我们调试都是减安卓设备通过usb连接在我们座位旁,再不济就是我们扛笔记本到硬件旁边,这样调试屡试不爽,但是有一天你突然发现你带的数据线因为各种原因总是终端 ...
- [转帖]超详细的PostgreSQL体系结构总结,值得收藏
超详细的PostgreSQL体系结构总结,值得收藏 https://www.toutiao.com/i6715390855772897800/ 原创 波波说运维 2019-07-26 00:03:00 ...
- [转帖]超详细的Oracle数据库在不同损坏级别的恢复总结
超详细的Oracle数据库在不同损坏级别的恢复总结 原创 波波说运维 2019-07-20 00:02:00 概述 在 DBA 的日常工作中不可避免存在着数据库的损坏,今天主要介绍 Oracle 数据 ...