微信小程序-3 页活动

下拉刷新事件

启用事件

• 方式一：全局开启下拉刷新

在 app.json 的 window 节点中，将 enablePullDownRefresh 设置为 true

• 方式二：局部开启下拉刷新（推荐使用）

在页面的 .json 配置文件中，将 enablePullDownRefresh 设置为 true

配置样式

• backgroundColor 用来配置下拉刷新窗口的背景颜色，仅支持16进制的颜色值
• backgroundTextStyle 用来配置下拉刷新 loading 的样式，仅支持 dark 和 light

监听事件

Page({
	// 页面相关事件处理函数——监听用户下拉动作
	onPullDownRefresh: function () {
		console.log('触发了index页面的下拉刷新')
	}
})

停止效果

当处理完下拉刷新后，下拉刷新的 loading 效果会一直显示，不会主动消失，所以需要手动隐藏 loading 效果

Page({
	// 页面相关事件处理函数——监听用户下拉动作
	onPullDownRefresh: function () {
		console.log('触发了index页面的下拉刷新')
	}
	
	// 当完成需求后，调用此函数，关闭下拉刷新的效果
	wx.stopPullDownRefresh()
})

上拉触底事件

概念：手指在屏幕上拉滑动，加载更多数据

监听事件

Page({
	// 页面上拉触底事件的处理函数
	onReachBottom: function () {
		console.log('触发了上拉触底事件')
	}
})

触底距离

概念：上拉触底距离，指的是触发"上拉触底事件"时，滚动条距离页面底部的距离

• 小程序默认触底距离是 50px
• 可以在 .json 配置文件中，通过 onReachBottomDistance 属性来配置上拉触底的距离

全局的 app.json 或者 index.json 配置如下内容：

{
	"onReachBottomDistance": 150
}