1. app.json 
  2.   "pages": [ 
  3.     //注册小程序中的页面 
  4.   ], 
  5.   "window": { 
  6.     //设置小程序的状态栏、导航条、标题、窗口背景色 
  7.   }, 
  8.   "tabBar": { 
  9.     //指定 tab 栏的表现,以及 tab 切换时显示的对应页面 
  10.   }, 
  11.   "networkTimeout": { 
  12.     //设置各种网络请求的超时时间 
  13.   }, 
  14.   "debug": true//可以在开发者工具中开启 debug 模式 
  1. page.json//page.json相当于app.json中的window 
  2.   "navigationBarBackgroundColor": "#ffffff",//导航栏背景颜色 
  3.   "navigationBarTextStyle": "black",//导航栏标题颜色,仅支持 black/white 
  4.   "navigationBarTitleText": "微信接口功能演示",//导航栏标题文字内容 
  5.   "backgroundColor": "#eeeeee",//窗口的背景色 
  6.   "backgroundTextStyle": "light"//下拉背景字体、loading 图的样式,仅支持 dark/light 
  7.   "enablePullDownRefresh": true//是否开启下拉刷新 
  8.   "disableScroll": false//设置为 true 则页面整体不能上下滚动;只在 page.json 中有效,无法在 app.json 中设置该项 

下拉刷新

在json文件中配置enablePullDownRefresh为true(app.json中在window中设置enablePullDownRefresh,此效果作用于全局),下面两种设置方法只写一个就行了
  1. app.json 
  2.     "window": { 
  3.       "enablePullDownRefresh":true 
  4.     }, 
  1. page.json 
  2.      "enablePullDownRefresh": true 
  3.  

在js文件中实现onPullDownRefresh方法,在网络请求完成后调用wx.stopPullDownRefresh()来结束下拉刷新

  1. page.js 
  2. Page({ 
  3.     onPullDownRefresh: function(){ 
  4.         wx.request({ 
  5.             url: '', 
  6.             data: {}, 
  7.             method: 'GET', 
  8.             success: function (res) {}, 
  9.             fail: function (res) {}, 
  10.             complete: function (res) { 
  11.                 wx.stopPullDownRefresh(); 
  12.             } 
  13.         }) 
  14.     } 
  15. }) 

bug处理

在使用时遇到了一个bug,下拉时的三个圆点没有显示


下拉时正常的圆点


下拉时不正常的圆点

原因

分析之后发现是因为圆点的颜色与背景色一样,影响了显示

处理方法

在json文件中配置backgroundTextStyle来设置下拉背景字体、loading 图的样式为dark

  1. app.json 
  2.   "window": { 
  3.     "backgroundTextStyle": "dark" 
  4.   }, 
  1. pags.json 
  2.   "backgroundTextStyle": "dark" 

 

返回顶部