微信小程序上拉、下拉、动态设置窗口背景色

本文详细介绍了微信小程序中下拉刷新(enablePullDownRefresh)和上拉触底(onReachBottomDistance)的功能配置与使用方法。包括如何在json文件中启用下拉刷新,设置下拉背景字体样式,动态调整窗口背景色,以及如何处理页面上拉触底事件。同时,文章还介绍了如何调用API停止下拉刷新。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

一、enablePullDownRefresh

1、下拉刷新enablePullDownRefresh的支持

单页面配置json文件

{
  "enablePullDownRefresh": true
}

app.json配置(所有页面都带有下拉刷新功能)

 {
        "window": {
            "enablePullDownRefresh": true
        }
    }

2、设置backgroundTextStyle
大家会发现别人的小程序下拉刷新是有三个点闪烁的动画、自己设置的并没有。这里面有个设置backgroundTextStyle的支持:
微信小程序上拉、下拉、动态设置窗口背景色

"backgroundTextStyle": "",支持 dark/light

3、停止stopPullDownRefresh

微信小程序还提供了停止下拉刷新的API:
https://developers.weixin.qq.com/miniprogram/dev/api/wx.stopPullDownRefresh.html

wx.stopPullDownRefresh()

二、onReachBottomDistance上拉触底

1、页面上拉触底事件触发时距页面底部距离,单位为px。
(单页面json配置,app.json的window配置中配置 全部页面的上拉触底)

“onReachBottomDistance”: 50//默认值是50

2、在Page.onReachBottom里面进行渲染数据及查看

 /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    console.log("页面上拉触底事件的处理函数")
  },

三、动态设置下拉背景字体、loading 图的样式

wx.setBackgroundTextStyle({
  textStyle: 'dark' // 下拉背景字体、loading 图的样式为dark
})

四、动态设置窗口的背景色

wx.setBackgroundColor({
  backgroundColor: '#ffffff', // 窗口的背景色为白色
})
<!--兼容ios-->
wx.setBackgroundColor({
    backgroundColorTop: '#DC143C', // 顶部窗口的背景色为红
    backgroundColorBottom: '#00FA9A', // 底部窗口的背景色为绿
})
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值