【微信小程序】-- 全局配置 -- window - 下拉刷新 & 上拉触底(十六)

简介: 【微信小程序】-- 全局配置 -- window - 下拉刷新 & 上拉触底(十六)



一、全局配置 - window

  前面已经介绍了小程序的全局配置–window,通过栗子学习了修改 window 配置项来完成对导航栏的操作。接下来就来讲解一下window 另外一类配置项–下拉刷新。话不多说,让我们原文再续,书接上回吧。

1、什么是下拉刷新

  首先来了解一下什么是下拉刷新,下拉刷新是移动端的专有名词,指的是通过手指在屏幕上的下拉滑动操作,从而重新加载页面数据的行为。

2、全局开启下拉刷新功能

  接下来,要通过修改 window 配置项来完成开启下拉刷新功能,当 window 中没有 enablePullDownRefresh 配置项时,自行补充即可,具体操作为:

app.json -> window -> 把 enablePullDownRefresh 的值设置为 true

app.json

{
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "我是夜阑的狗", 
    "navigationBarTextStyle":"black",
    "enablePullDownRefresh": true
  },
}

   注意:在 app.json 中启用下拉刷新功能,会作用于每个小程序页面!实际效果如下图所示:

  从上面的运行结果可以看出两个问题:

  • 问题一:下拉刷新的时候,狂飙这一行的背景颜色发生了改变。
  • 问题二:每次下拉刷新都会有一块空白区域,然后过了2-3秒时间这个下拉区域会自动合上。

  注意这两个问题是在模拟器上出现的,在真机是怎么样子需要跑才能知道,前面也有学习过在真机上运行小程序。

  从上面的真机结果可以看出,问题一二都没有在真机上出现,反而在真机上下拉刷新还留下一块下拉区域,并不会自动合并上去。说明模拟器并不能百分百还原真正手机上的效果,在实际开发过程中只能起到辅助作用

3、设置下拉刷新时窗口的背景色

  当全局开启下拉刷新功能之后,默认的窗口背景为白色。如果自定义下拉刷新窗口背景色,修改 backgroundColor 配置项即可, 当 window 中没有 backgroundColor 配置项时,自行补充即可,具体操作为:

app.json -> window -> 为 backgroundColor 指定16进制的颜色值 #efefef。

app.json

{
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "我是夜阑的狗", 
    "navigationBarTextStyle":"black",
    "enablePullDownRefresh": true,
    "backgroundColor": "#efefef"
  },
}

   注意:这个 backgroundColor 只支持十六进制的颜色值,不支持文本颜色值,例如:red、green等。

   实际效果如下图所示:

4、设置下拉刷新时 loading 的样式

   当全局开启下拉刷新功能之后,默认窗口的 loading 样式为白色,如果要更改 loading 样式的效果,修改 backgroundTextStyle 配置项即可, 当 window 中没有 backgroundTextStyle 配置项时,自行补充即可,具体操作为:

app.json -> window -> 为 backgroundTextStyle 指定 dark 值

app.json

{
  "window":{
    "backgroundTextStyle":"dark",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "我是夜阑的狗", 
    "navigationBarTextStyle":"black",
    "enablePullDownRefresh": true,
    "backgroundColor": "#efefef"
  },
}

   注意: backgroundTextStyle 的可选值只有 light 和 dark

   实际效果如下图所示:

5、设置上拉触底的距离

  上拉触底是移动端的专有名词,通过手指在屏幕上的上拉滑动操作,从而加载更多数据的行为。一般在实际开发过程中不需要改动这个值,具体操作为:

app.json -> window -> 为 onReachBottomDistance 设置新的数值

app.json

{
  "window":{
    "backgroundTextStyle":"dark",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "我是夜阑的狗", 
    "navigationBarTextStyle":"black",
    "enablePullDownRefresh": true,
    "backgroundColor": "#efefef",
    "onReachBottomDistance": 100
  },
}

   注意:默认距离为50px,如果没有特殊需求,建议使用默认值即可。


总结

  感谢观看,这里就是window - 下拉刷新 & 上拉触底的介绍使用,如果觉得有帮助,请给文章点个赞吧,让更多的人看到。🌹 🌹 🌹

  也欢迎你,关注我。👍 👍 👍

  原创不易,还希望各位大佬支持一下,你们的点赞、收藏和留言对我真的很重要!!!💕 💕 💕 最后,本文仍有许多不足之处,欢迎各位认真读完文章的小伙伴们随时私信交流、批评指正!下期再见。🎉


相关文章
|
6月前
|
人工智能 小程序 NoSQL
【一步步开发AI运动小程序】二十一、如何将AI运动项目配置持久化到后端?
本文介绍基于云智「Ai运动识别引擎」的运动配置持久化方案,旨在优化小程序或Uni APP中AI运动识别能力。通过将运动检测参数(如`Key`、`Name`、`TickMode`、`rules`或`samples`)持久化到后端,可避免因频繁调整运动参数而重新发布应用,提升用户体验。持久化数据结构支持规则和姿态样本存储,适用于关系数据库、文件或文档数据库(如MongoDB)。此外,云智还提供运动自动适配工具及「AI乐运动」产品,助力快速实现AI体育、全民健身等场景。
|
8月前
|
小程序 数据安全/隐私保护 开发者
【02】微信支付商户申请下户到配置完整流程-微信开放平台申请APP应用-微信商户支付绑定appid-公众号和小程序分别申请appid-申请+配置完整流程-优雅草卓伊凡
【02】微信支付商户申请下户到配置完整流程-微信开放平台申请APP应用-微信商户支付绑定appid-公众号和小程序分别申请appid-申请+配置完整流程-优雅草卓伊凡
451 3
|
小程序 前端开发 中间件
ThinkPHP 配置跨域请求,使用TP的内置跨域类配置,小程序和web网页跨域请求的区别及格式说明
本文介绍了如何在ThinkPHP框架中配置跨域请求,使用了TP内置的跨域类`\think\middleware\AllowCrossDomain::class`。文章还讨论了小程序和web网页在跨域请求格式上的区别,并提供了解决方案,包括修改跨域中间件源码以支持`Origin`和`token`。此外,还介绍了微信小程序跨域请求的示例和web网页前端发送Axios跨域请求的请求拦截器配置。
ThinkPHP 配置跨域请求,使用TP的内置跨域类配置,小程序和web网页跨域请求的区别及格式说明
|
XML 小程序 JavaScript
小程序入门之项目配置说明和数据绑定
小程序入门之项目配置说明和数据绑定
128 1
|
12月前
|
小程序
uni-app开发微信小程序使用onPullDownRefresh(下拉刷新)总结
uni-app开发微信小程序使用onPullDownRefresh(下拉刷新)总结
1748 0
|
JSON 小程序 JavaScript
微信小程序页面事件,下拉刷新事件和上拉触底事件
这篇文章介绍了微信小程序中如何实现下拉刷新和上拉触底事件,包括开启下拉刷新、配置下拉刷新样式、监听下拉刷新事件,以及监听上拉触底事件和配置上拉触底的距离。
|
JSON 小程序 数据库
【微信小程序-原生开发】实用教程14 - 列表的分页加载,触底加载更多(含无更多数据的提醒和显示,自定义组件)
【微信小程序-原生开发】实用教程14 - 列表的分页加载,触底加载更多(含无更多数据的提醒和显示,自定义组件)
361 0
|
JSON 小程序 JavaScript
【微信小程序-原生开发】实用教程13 - 新用户注册审核(含页面的下拉刷新)
【微信小程序-原生开发】实用教程13 - 新用户注册审核(含页面的下拉刷新)
168 0
|
小程序 JavaScript 前端开发
【微信小程序-原生开发】实用教程06-轮播图、分类页签 tab 、成员列表(含Tdesign升级,切换调试基础库,设置全局样式,配置组件按需注入,添加图片素材,wx:for,生命周期 onLoad)
【微信小程序-原生开发】实用教程06-轮播图、分类页签 tab 、成员列表(含Tdesign升级,切换调试基础库,设置全局样式,配置组件按需注入,添加图片素材,wx:for,生命周期 onLoad)
439 0
|
6月前
|
监控 前端开发 小程序
陪练,代练,护航,代打小程序源码/前端UNIAPP-VUE2.0开发 后端Thinkphp6管理/具备家政服务的综合型平台
这款APP通过技术创新,将代练、家政、娱乐社交等场景融合,打造“全能型生活服务生态圈”。以代练为切入点,提供模块化代码支持快速搭建平台,结合智能匹配与技能审核机制,拓展家政服务和商业管理功能。技术架构具备高安全性和扩展性,支持多业务复用,如押金冻结、录屏监控等功能跨领域应用。商业模式多元,包括交易抽成、增值服务及广告联名,同时设计跨领域积分体系提升用户粘性,实现生态共生与B端赋能。
538 12

热门文章

最新文章