前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >微信小程序分页功能,下拉刷新功能,直接干货拿来就用

微信小程序分页功能,下拉刷新功能,直接干货拿来就用

作者头像
痴心阿文
发布2022-11-21 09:10:50
7420
发布2022-11-21 09:10:50
举报
文章被收录于专栏:痴心阿文的专栏

最近写微信小程序,列表渲染啥的,经常用到一些分页,下拉刷新,上拉加载等功能,总结整理一下,微信小程序分页功能,下拉刷新功能,直接干货拿来就用,话不多说,肝着

作者简介:              我是痴心阿文,你们的学友哥! 📃个人主页:痴心阿文的博客 🔥本文前言:微信小程序分页功能,下拉刷新功能,直接干货拿来就用 💖如果觉得博主的文章有帮到你的话,请👍支持一下博主哦🤞  

 🔥🔥🔥直接上,分页功能

代码语言:javascript
复制
//分页,下拉加载
			getlist(page, types){
				if (this[types == 10 ? 'lastPage':(types == 11?'lastPage2':'lastPage3')] && page != 0) return
				this[types == 10 ? 'page' :(types == 11?'page2':'page3') ] += page
				let page_json = {
					page: types == 10 ? this.page += page : this.page2 += page,
					rows: 10,
					tagid: types
				}
				console.log('let page_json', page_json)
				if (page == 0) {
					uni.showLoading({
						title: '加载中'
					})
				}
				const URL = getApp().globalData.appApi + '/gk/qrynewsbytagid'
				this.$http.post_request(page_json, URL, res => {
					console.log('查询分页啊', res)
					uni.hideLoading()
					if (types == 10) {
						this.lastPage = res.model.lastPage
						if (page == 0) {
							this.hotnewslist = res.model.list
							return
						}
						this.hotnewslist.push(...res.model.list)
					} else if (types == 11) {
						this.lastPage2 = res.model.lastPage
						if (page == 0) {
							this.realnewslist = res.model.list
							return
						}
						this.realnewslist.push(...res.model.list)
					}else if(types == 12){
						this.lastPage3 = res.model.lastPage
						if (page == 0) {
							this.barContentList = res.model.list
							return
						}
						this.barContentList.push(...res.model.list)
					}
				})
			},

🔥🔥​​​​​​​🔥上拉加载

代码语言:javascript
复制
//下拉刷新
		onPullDownRefresh(){
			if(this.tabIndex == 0){
				this.getlist(0, 10);
				return
			}else if(this.tabIndex == 1){
				this.getlist(0, 11);
				return
			}else if(this.tabIndex == 2){
				this.getlist(0, 12);
				return
			}
			setTimeout(function () {
				uni.stopPullDownRefresh();
				uni.showToast({
					title:'刷新成功',
					icon:'none',
					duration:1500
				})
			}, 3000);
		},
		onShow() {
			this.initData();
			this.getlist(0, 10);
			this.getlist(0, 11);
			this.getlist(0, 12);
		},
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022-06-12,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
云开发 CloudBase
云开发(Tencent CloudBase,TCB)是腾讯云提供的云原生一体化开发环境和工具平台,为200万+企业和开发者提供高可用、自动弹性扩缩的后端云服务,可用于云端一体化开发多种端应用(小程序、公众号、Web 应用等),避免了应用开发过程中繁琐的服务器搭建及运维,开发者可以专注于业务逻辑的实现,开发门槛更低,效率更高。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档