uniapp vue 子组件触发父页面scrow-view触底事件（下拉加载）

悠悠 2021-09-07 06:19 646阅读 0赞

最近再用uniapp,结果发现子组件没有页面级生命周期 ，onReachbotton没办法直接使用，所以用了子组件监听父组件选项卡触底事件。

### 父页面 ###

<swiper-item class="swiper-item">
    		
    		<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="moreList">
    				<view class="page-box">
    					
    					<ycyx :PageNum="PageNum"></ycyx>
    				</view>
    		</scroll-view>
    </swiper-item>

// 遥测越线
    	import ycyx from '../../../../components/telemetry-ycyx/telemetry-ycyx.vue';
    
    	export default { 
    		components: { 
    			ycyx, //注册自定义组件,
    		},
    		data() { 
    			return { 
    				PageNum: 1 //页数
    			};
    		},
    		methods: { 
    			moreList() { 
    				//this.PageNum = this.PageNum + 1;
    				console.log('触底了')
    			}
    		}
    	};
    </script>

### 子页面 ###

export default { 
    		props: ["PageNum"],
    
    		created: function() { 
    			uni.$on('moreList', function(data) { 
    				console.log('我听到出题了' + data.msg)
    			})
    			console.log(this.PageNum)
    		},
    
    		watch: { 
    			PageNum(val) { 
    				console.log("子组件", val)
    				this.cur = val;
    				this.inquire()
    			}
    		}
    	}

发表评论取消回复

表情：

评论列表（有 0 条评论，646人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue触底加载

页面内的触底加载需求：页面滚动到接近底部，再次发送请求，获取更多数据，渲染到页面上 data(){ // 请求页数 page:

- 日理万妓/ 2023年09月24日 12:49/ 0 赞/ 33 阅读

相关小程序上拉触底加载更多数据

1 html <view class="no-data" wx:if="{ {list.length == 0&&no}}">暂无数据~</view> <vi

客官°小女子只卖身不卖艺/ 2023年06月19日 02:28/ 0 赞/ 43 阅读

相关 h5页面触底加载--div触底加载

页面触底加载 page = 1 //当前页 pages = 0 //总页数 $(window).scroll(function(){

谁践踏了优雅/ 2022年11月29日 12:56/ 0 赞/ 235 阅读

相关 Vue父组件与子组件传递事件/调用事件

[转载文章出处][Link 1] Vue父组件与子组件传递事件/调用事件 1、Vue父组件向子组件传递事件/调用事件 <div id="app">

不念不忘少年蓝@/ 2022年04月25日 04:40/ 0 赞/ 359 阅读

相关 vue 子组件调用、触发父组件中的方法

[前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。点击跳转到教程。][Link 1] 我发现了两种写法。方法一：子组件：

深碍√TFBOYSˉ_/ 2022年04月02日 10:56/ 0 赞/ 292 阅读

相关 vue父组件触发事件改变子组件的值的方法实例详解

父组件向子组件通信业务场景：现在我要在父组件点击一个回退按钮，这个回退会传进子组件中（子组件中有两步进程），子组件来处理。解决方案起初我是父组件通过props传值，

冷不防/ 2021年12月20日 03:37/ 0 赞/ 242 阅读

相关小程序下拉刷新上拉触底加载数据

1. 下拉刷新下拉刷新主要用到「onPullDownRefresh」函数，我们在新建目录然后新建page之后在wxml文件中会自动生成很多生命周期函数，其中就会生成「o

忘是亡心i/ 2021年12月19日 14:25/ 0 赞/ 404 阅读

相关 uniapp vue 子组件触发父页面scrow-view触底事件（下拉加载）

最近再用uniapp,结果发现子组件没有页面级生命周期，onReachbotton没办法直接使用，所以用了子组件监听父组件选项卡触底事件。父页面 <!--这

悠悠/ 2021年09月07日 06:19/ 0 赞/ 647 阅读

相关 uniapp下拉刷新和触底

效果图： ![20210306115501184.gif][] 代码实现：结构目录： ![20210306113541858.png][] pages.js

阳光穿透心脏的1/2处/ 2021年07月25日 16:53/ 0 赞/ 778 阅读

相关 uni-app下拉刷新触底加载更多

首先在pages.json 配置文件中配置 "enablePullDownRefresh": true 需要在哪用加载就配置在路由的style里 ![waterma

逃离我推掉我的手/ 2021年07月25日 02:49/ 0 赞/ 2109 阅读