抖音实战~首页视频~下拉刷新

1. 配置下拉刷新

在pages.json配置文件中添加如下配置：

"enablePullDownRefresh":true	//开启下拉刷新

2. 下拉刷新监听

// 当前页下拉刷新
		onPullDownRefresh() {
    
			var me = this;
			// 监听tab
			console.log("me.curIndex",me.curIndex)
			
			// 下拉刷新判断，如果是不同tab，那么组件中刷新的请求也不同
			if (me.curIndex == 0) {
    
				// 虚位以待
			} else if (me.curIndex == 1) {
    
				// 调用公共视频组件查询首页短视频列表
				this.$refs.videoFollowComp.displayVideoPaging(1, true);
			} else if (me.curIndex == 2) {
    
				// 调用公共视频组件查询首页短视频列表
				this.$refs.videoComp.displayVideoPaging(1, true);
			}
			
		}

3. tab监听索引

tab页面	监听当前索引方法	获取监听api	索引
附近	onPullDownRefresh	me.curInde	0
关注	onPullDownRefresh	me.curInde	1
推荐	onPullDownRefresh	me.curInde	2

4. 控制台监控

5. 父子组件调用

• 父页面index.nvue

this.$refs.videoFollowComp.displayVideoPaging(1, true);

• 子组件videoComp.vue

	// 分页查询新的list，并且追加到现有list中
			displayVideoPaging(page, needClearList) {
    

				// 查询首页短视频列表
				var me = this;
				var myUserInfo = getApp().getUserInfoSession();
				// console.log("首页",myUserInfo)
				var userId = "";
				if (myUserInfo != null) {
    
					userId = myUserInfo.id;
				}
				var serverUrl = app.globalData.serverUrl;
				uni.request({
    
					method: "GET",
					header: {
    
						headerUserId: userId,
						headerUserToken: app.getUserSessionToken()
					},
					url: serverUrl + "/vlog/indexList?userId=" + userId + "&page=" + page + "&pageSize=10",
					success(result) {
    

						if (result.data.status == 200) {
    
							var vlogList = result.data.data.rows;
							var totalPage = result.data.data.total;
							// me.playerList = vlogList;
							if (needClearList) {
    
								me.playerList = [];
							}
							me.playerList = me.playerList.concat(vlogList);
							me.page = page;
							me.totalPage = totalPage;

							if (needClearList) {
    
								me.setThisVlogInfo();
								me.freshCommentCounts();
							}
						} else {
    
							uni.showToast({
    
								title: result.data.msg,
								icon: "none",
								duration: 3000
							});
						}

					},
					complete() {
    
						uni.stopPullDownRefresh();
					}
				});
			}

6. 效果图