Tiktok practice ~ homepage video ~ pull-down refresh

1. Configure drop-down refresh

stay pages.json Add the following configuration to the configuration file ：

"enablePullDownRefresh":true	// Turn on pull-down refresh 

2. Pull down refresh monitor

//  Current page pull-down refresh 
		onPullDownRefresh() {
    
			var me = this;
			//  monitor tab
			console.log("me.curIndex",me.curIndex)
			
			//  Pull down refresh judgment , If it's different tab, The refresh request in the component is also different 
			if (me.curIndex == 0) {
    
				//  Leave a seat vacant for sb. 
			} else if (me.curIndex == 1) {
    
				//  Call the public video component to query the short video list on the home page 
				this.$refs.videoFollowComp.displayVideoPaging(1, true);
			} else if (me.curIndex == 2) {
    
				//  Call the public video component to query the short video list on the home page 
				this.$refs.videoComp.displayVideoPaging(1, true);
			}
			
		}

3. tab Listening index

tab page	Listen to the current index method	Get listening api	Indexes
near	onPullDownRefresh	me.curInde	0
Focus on	onPullDownRefresh	me.curInde	1
recommend	onPullDownRefresh	me.curInde	2

4. Console monitoring

5. Parent and child components call

• Parent page index.nvue

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

• Child components videoComp.vue

	//  Paging query NEW list, And append to existing list in 
			displayVideoPaging(page, needClearList) {
    

				//  Query the list of short videos on the home page 
				var me = this;
				var myUserInfo = getApp().getUserInfoSession();
				// console.log(" home page ",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. design sketch