uniapp开发微信小程序之下拉刷新和上拉刷新

最新推荐文章于 2024-08-29 16:30:28 发布

only*z*

最新推荐文章于 2024-08-29 16:30:28 发布

阅读量629

点赞数

分类专栏： uniapp 文章标签： uni-app 微信小程序小程序

本文链接：https://blog.csdn.net/only_zing/article/details/130885397

版权

uniapp 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

在微信小程序中，为了实现分页，通常需要集成上拉刷新和下拉刷新功能。文章详细介绍了如何配置pages.json以启用这两个功能，例如设置`enablePullDownRefresh`为true来开启下拉刷新，并展示了在页面中使用`onPullDownRefresh`和`onReachBottom`事件处理函数来响应用户操作，更新数据。

摘要由CSDN通过智能技术生成

微信小程序中，经常有分页的需求，那么就需要在上拉或下拉的时候调用分页接口。
上拉刷新的功能很简单，小程序中已经提供了方法。具体实现如下：
pages.json中修改配置

"pages": [ //pages数组中第一项表示应用启动页 
		 { // 正常写法，没有上拉刷新，也没有下拉刷新
			"path": "pages/login/login",
			"style": {
				"navigationBarTitleText": "首页",
				"navigationBarBackgroundColor": "#FFFFFF",
				"navigationBarTextStyle": "white",
				"enablePullDownRefresh": false
			}
		
		}, {
			"path": "pages/my/my",
			"style": { // 无论下拉刷新还是上拉刷新，属性"enablePullDownRefresh"都要设置为 true
				"navigationBarTitleText": "我的",
				"navigationBarBackgroundColor": "#FFFFFF",
				"navigationBarTextStyle": "black",
				"enablePullDownRefresh": true, // true 代表开启下拉刷新
				"onReachBottomDistance": 50 // 代表上拉触底50rpx的地方就会回调函数
			}

		}]

实现上拉刷新，注意 onPullDownRefresh 和 onShow、mounted等是同级的。

<script>
	export default {
		data() {
			return {
				src: ''
			};
		},
		mounted() {
		},
		onPullDownRefresh() {
		         	setTimeout(() => {
		         		this.getDate();       //你要刷新的数据
		         	}, 400)
	 	},
		methods: {
			getDate(){
				console.log('刷新啦')
			}
		},
	}
</script>

实现下拉刷新

<script>
	export default {
		data() {
			return {
				src: ''
			};
		},
		mounted() {
		},
		methods: {
			// 上拉加载
			onReachBottom () {
				this.getDate()	
			},
			getDate(){
				console.log('刷新啦')
			}
		},
	}
</script>