小程序中,app.json 中的 window 节点,可以全局配置小程序中每个页面的窗口表现。如果某些小程序页面想要拥有特殊的窗口表现,此时,“ 页面级别的 .json 配置文件”就可以实现这种需求。
注意:当页面配置与全局配置冲突时,根据就近原则,最终的效果以页面配置为准。
一、交互反馈
1.消息提示框
2.模态对话框
3.加载提示框
4.显示操作菜单
二、下拉刷新
下拉刷新是移动端的专有名词,指的是通过手指在屏幕上的下拉滑动操作,从而重新加载页面数据的行为。
(1)启用下拉刷新
启用下拉刷新有两种方式:
- 全局开启下拉刷新:
设置步骤:app.json -> window -> enablePullDownRefresh
的值设置为true - 局部开启下拉刷新
设置步骤:页面的 .json enablePullDownRefresh
的值设置为 true
在实际开发中,推荐使用第 2 种方式,为需要的页面单独开启下拉刷新的效果。
(2)配置下拉刷新窗口的样式
在全局或页面的 .json 配置文件中,通过 backgroundColor 和 backgroundTextStyle 来配置下拉刷新窗口的样式,其中:
- backgroundColor 用来配置下拉刷新窗口的背景颜色,仅支持16 进制的颜色值
- backgroundTextStyle用来配置下拉刷新 loading 的样式,仅支持 dark 和 light
(3)监听页面的下拉刷新事件
在页面的 .js 文件中,通过 onPullDownRefresh() 函数即可监听当前页面的下拉刷新事件。
.js中:
Page({
//页面相关事件处理函数--监听用户下拉动作
onPullDownRefresh:function() {
}
})
(4)停止下拉刷新的效果
当处理完下拉刷新后,下拉刷新的 loading 效果会一直显示,不会主动消失,所以需要手动隐藏下拉刷新的 loading 效果。此时,调用 wx.stopPullDownRefresh() 可以停止当前页面的下拉刷新。.js中:
Page({
//页面相关事件处理函数--监听用户下拉动作
onPullDownRefresh:function() {
wx.stopPullDownRefresh()
}
})
三、动画控制
四、导航栏设置
(1)标题
设置步骤:app.json -> window -> navigationBarTitleText
(2)背景色
设置步骤:app.json -> window -> navigationBarBackgroundColor