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

文章目录

1. 配置下拉刷新
2. 下拉刷新监听
3. tab监听索引
4. 控制台监控
5. 父子组件调用
6. 效果图

1. 配置下拉刷新

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

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

2. 下拉刷新监听

// 当前页下拉刷新onPullDownRefresh() {var me = this;// 监听tabconsole.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. 效果图

抖音实战~首页视频~下拉刷新相关推荐

android抖音自动刷新,Android 使用SwipeRefreshLayout控件仿抖音做的视频下拉刷新效果...
SwipeRefreshLayout(这个控件),我先跟大家介绍一下这个控件: 一.SwipeRefreshLayout简单介绍 •先看以下官方文档,已有了很详细的描述了. 官方文档说明 •这里我再大 ...
Android开发笔记（一百六十四）仿京东首页的下拉刷新
上一篇文章介绍了高仿京东的沉浸式状态栏,可是跟京东首页的头部轮播图相比,依然有三处缺憾: 1.京东的头部Banner上方,除了有悬浮着的状态栏,状态栏下面还有一行悬浮工具栏,内嵌扫一扫图标.搜索框,以 ...
scrollview下拉刷新_SwiftUI之View Tree 实战3（下拉刷新）
不得不说,在SwiftUI中,Preference这项技术实在是太神奇了,这也是我为什么写这么多与其相关文章的原因,它的原理是如此的简单,但加上我们的想象力,它却又无所不能. 在本篇文章中,我们将再次 ...
入门微信小程序(含实战) [第九篇] -- 下拉刷新和上拉加载
下拉刷新和上拉加载是两个独立又密切联系的功能,上拉加载需要服务器端有分页机制,而下拉刷新除了重新获取信息外还要对之前的状态和页码进行初始化. 一个一个来吧. 服务器端分页其实yii2早就已经为我们准 ...
抖音搜索的推荐下拉词置顶如何做
抖音搜索下拉词关键词布局和推广,是为了能够达到自然引流目的.当你在抖音搜索关键词时,出来的下拉推荐区域就是抖音下拉框,抖音下拉词推广就是在关键词后面带上你的品牌名称,这样所有搜索的用户都能看到你的广告 ...
css上滑事件,仿抖音上划和下拉
实现思路监听上划和下滑事件,当下滑都第三个或第一个swiper的时候马上切换到第二个swiper并更新第一个和第三个swiper里面的内容 1.引入swiper css 和 js 文件下载地址 2 ...
android支付宝动态更新,Android仿支付宝首页下拉刷新
题外话学习了Behavior之后,发现效果都可以通过Behavior来实现,包括支付宝首页的下拉刷新效果,其重点效果指标在于下滑上部分的布局,同样能够进行下拉刷新,其下拉刷新的布局展开的位置在中间部 ...
仿支付宝首页下拉刷新
声明:转载请注明本文地址 DEMO相关 APK下载地址 https://fir.im/ckh1 Github源码,欢迎大家指正,以及star,谢谢 https://github.com/JmStefa ...
IOS 类似抖音下拉刷新与自定义上拉加载
IOS 类似抖音下拉刷新与自定义上拉加载最近UICollectionView中使用了pageEnabled,MJRresh直接使用时出现偏移.这里就暂时考虑简单的做法. 首先考虑在UICollect ...

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

文章目录

1. 配置下拉刷新

2. 下拉刷新监听

3. tab监听索引

4. 控制台监控

5. 父子组件调用

6. 效果图

抖音实战~首页视频~下拉刷新相关推荐

最新文章

热门文章