微信小程序的下拉刷新及其实例（所有代码解析都在代码部分的备注里面）

1.如何开启下拉触底刷新呢

要想是小程序页面拥有下拉刷新的功能点开.json文件

其中json文件分为局部json文件和全局json文件

在局部/全局 json文件中输入

"enablePullDownRefresh": true 

将false改成true即可

2.配置上拉触底的距离（在.json文件中添加下列代码段即可）20代表距离底部的距离为20px时刷新加载下面的部分

"onReachBottomDistance": 20

啊接下来我们来做一个下拉刷新获取数据的实例

做出来就是这个样子

首先我们在js文件中写入一下代码 来对网页进行请求数据（生成随机颜色值），每一个数据代表不同的颜色值

  data: {
    colorList:[]//首先我们创建一个colorList数组用来存放网页传回来的数
  },
  getColors(){    //创建一个getColors函数
    wx.request({  //发起request（{}）数据请求
      url: 'https://www.escook.cn/api/color',  //网页地址
      method:'GET',
      success:({ data:res}) =>{  //当执行成功时复制一个data属性返回值为res
        this.setData({           //用this.setData进行数据的赋值
          colorList:[...this.data.colorList,...res.data]  
                                 //使用...进行数据拼接将...this.data.colorList（data里面的colorList数组）和...res.data（success中得到的data）进行拼接
        })
      }
    })
  },

之后在appdata中就会出现这样的一组数据，每一组代表一个颜色值

为了接收网页传来的数据我们需要使用onLoad（）函数

然后再wxml中添加view节点，为的就是在页面上生成这些“盒子”就是那些颜色块

 onLoad(options) {

    this.getColors()//onLoad函数负责接收getColers函数从网页传过来的数据
  },

<view wx:for="{{colorList}}" wx:key="index" class="num-item" style="background-color: rgba({{item}});">{{item}}</view>
//使用for循环持续添加colorList中的每一项（上图appdata里的数据），而每一项的内容就是用view来现实每一个item项（就是appdata里的数据，那些数字）
//每一个项的key值就默认为index（0-9）
//通过class定义每一项的类名num-item
//每一项的样式就是background-color为rgba({{item}})，其中rgba代表颜色值，颜色值就是每一个item项
注意：{{}}是mastach语法（读音是这样读的，嘿嘿）

然后呢就是wxss里面的样式设计了

.num-item{
  border: darkgray;                      //这是每一项的边框颜色
  border-radius: 8rpx;                   //每一项的圆角大小为8rpx
  line-height: 200rpx;                   //每一项占据的行高，啊就是空间大小
  margin: 15rpx;                         //每一项的边框高度（对于上下左右的）
  text-align: center;                    //这个是文字的位置
  text-shadow: 0rpx 0rpx 5rpx #ffffff;   //这个是给文字添加阴影，横向0，纵向0，扩散5
  box-shadow: 1rpx 1rpx 6rpx #aaaaaa;    //给每一个盒子加阴影 横向0，纵向0，扩散5
}                                        //啊#号后面是颜色

最后一步添加上拉触底事件

  onReachBottom() {
    this.getColors()
  }

每上拉触底一次就执行一次getColors函数，啊就会不断地刷新。

谢谢各位观众老爷，这是我的学习笔记，若有错误希望大家指教谢谢了，若有问题也欢迎一起来探讨！！