微信小程序-原生下拉刷新

小程序中的json文件是配置文件,用来配置小程序页面.

app.json

是对整个小程序的全局配置,我们可以在这个文件中配置小程序是由哪些页面组成,配置小程序的窗口背景色,配置导航条样式,配置默认标题。

page.json

每一个小程序页面也可以使用.json文件来对本页面的窗口表现进行配置。 页面的配置比app.json全局配置简单得多,只是设置 app.json 中的 window 配置项的内容,页面中配置项会覆盖 app.json 的 window 中相同的配置项。

app.json
{
  "pages": [
    //注册小程序中的页面
  ],
  "window": {
    //设置小程序的状态栏、导航条、标题、窗口背景色
  },
  "tabBar": {
    //指定 tab 栏的表现,以及 tab 切换时显示的对应页面
  },
  "networkTimeout": {
    //设置各种网络请求的超时时间
  },
  "debug": true//可以在开发者工具中开启 debug 模式
}


page.json//page.json相当于app.json中的window
{
  "navigationBarBackgroundColor": "#ffffff",//导航栏背景颜色
  "navigationBarTextStyle": "black",//导航栏标题颜色,仅支持 black/white
  "navigationBarTitleText": "微信接口功能演示",//导航栏标题文字内容
  "backgroundColor": "#eeeeee",//窗口的背景色
  "backgroundTextStyle": "light"//下拉背景字体、loading 图的样式,仅支持 dark/light
  "enablePullDownRefresh": true//是否开启下拉刷新
  "disableScroll": false//设置为 true 则页面整体不能上下滚动;只在 page.json 中有效,无法在 app.json 中设置该项
}


下拉刷新

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


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




page.js
Page({
 onPullDownRefresh: function(){
     console.log('--------下拉刷新-------')
   wx.showNavigationBarLoading() //在标题栏中显示加载
     wx.request({
         url: '',
         data: {},
         method: 'GET',
         success: function (res) {},
         fail: function (res) {},
         complete: function (res) {
             // complete
            wx.hideNavigationBarLoading() //完成停止加载
            wx.stopPullDownRefresh() //停止下拉刷新
         }
     })
 }
})



bug处理

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

原因

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

处理方法

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

app.json
{
  "window": {
    "backgroundTextStyle": "dark"
  },
}
pags.json
{
  "backgroundTextStyle": "dark"
}





标签:小程序, 下拉刷新