文章目录
- 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. 效果图
