微信小程序:enablePullDownRefresh、onReachBottomDistance 、动态设置窗口的背景色、动态设置下拉背景字体

微信小程序:enablePullDownRefresh、onReachBottomDistance 、动态设置窗口的背景色、动态设置下拉背景字体

一、enablePullDownRefresh

1、下拉刷新enablePullDownRefresh的支持

单页面配置json文件

{"enablePullDownRefresh": true
}

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

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

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

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

3、停止stopPullDownRefresh

微信小程序还提供了停止下拉刷新的API:
.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', // 底部窗口的背景色为绿
})

发布者:admin,转转请注明出处:http://www.yc00.com/news/1690891840a456553.html

相关推荐

发表回复

评论列表(0条)

  • 暂无评论

联系我们

400-800-8888

在线咨询: QQ交谈

邮件:admin@example.com

工作时间:周一至周五,9:30-18:30,节假日休息

关注微信