微信小程序上拉下拉动态设置窗口背景色
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了微信小程序上拉下拉动态设置窗口背景色相关的知识,希望对你有一定的参考价值。
一、enablePullDownRefresh1、下拉刷新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‘, // 底部窗口的背景色为绿
})
以上是关于微信小程序上拉下拉动态设置窗口背景色的主要内容,如果未能解决你的问题,请参考以下文章