微信小程序下拉刷新，上拉加载及下拉列表制作

一：下拉刷新 上拉加载

下拉刷新

小程序页面集成了下拉功能，并提供了接口，我们只需要一些配置就可以拿到事件的回调。

1. 需要在 .json 文件中配置。 如果配置在app.json文件中，那么整个程序都可以下拉刷新。如果写在具体页面的.json文件中，那么就是对应的页面，可以下拉刷新。

具体页面的.json文件：

 {
  "enablePullDownRefresh": true
 }

app.json文件:

 "window": {
  "enablePullDownRefresh": true
  }

1. 在js文件中添加回调函数

// 下拉刷新回调接口
onPullDownRefresh: function () {
 // do somthing
},

1. 添加数据

通常情况下的下拉刷新操作，就是把查询条件重置，让页面显示最新的一页数据。下面是笔者demo中的下拉刷新回调接口的代码，同时也是一般情况下的操作流程。

// 下拉刷新回调接口
onPullDownRefresh: function () {
 // 我们用total和count来控制分页，total代表已请求数据的总数，count代表每次请求的个数。
 // 刷新时需把total重置为0，代表重新从第一条请求。
 total = 0; 
 // this.data.dataArray 是页面中绑定的数据源
 this.data.dataArray = [];
 // 网络请求，重新请求一遍数据
 this.periphery();
 // 小程序提供的api，通知页面停止下拉刷新效果
 wx.stopPullDownRefresh;
},

上拉加载

同下拉刷新一样，小程序中也提供了用于上拉时回调的接口。官方文档中并没有很详细的介绍，经测试发现，上拉回调的接口并不需要额外的配置（下拉时需要在 .json文件中配置 "enablePullDownRefresh": true），直接在页面滑动到底部时就能拿到回调。

1. 在js文件中添加回调函数

// 上拉加载回调接口
onReachBottom: function () {
 // 我们用total和count来控制分页，total代表已请求数据的总数，count代表每次请求的个数。
 // 上拉时需把total在原来的基础上加上count，代表从count条后的数据开始请求。
 total += count;
 // 网络请求
 this.periphery();
},

二：制作下拉列表

 
wxml代码：

  <view class="phone_one" bindtap="clickPerson">
  <view class="phone_personal">{{firstPerson}}</view>
  <image src="../../image/v6.png" class="personal_image {{selectArea ? 'rotateRight' :''}}"></image> //三目法判断图片要不要旋转180。
  </view>
<view class="person_box">
   <view class="phone_select" hidden="{{selectPerson}}">
    <view class="select_one" bindtap="mySelect" data-me="你好">你好</view>
    <view class="select_one" bindtap="mySelect" data-me="他好">他好</view>
    <view class="select_one" bindtap="mySelect" data-me="大家好">大家好</view>
  </view>
 </view>

wxss代码：

```
.phone_personal{
    width: 100%;
    color:rgb(34, 154, 181);
    height:100rpx;
    line-height:100rpx;
    text-align: center;
}
.phone_one{
    display: flex; //用flex布局更方便。
    position: relative;
    justify-content: space-between;
    background-color:rgb(239, 239, 239);
    width:90%;
    height:100rpx;
    margin:0 auto;
    border-radius: 10rpx;
    border-bottom:2rpx solid rgb(255, 255, 255);
}
.person_box{
    position: relative;
}
.phone_select{
    margin-top:0;
    z-index: 100;
    position: absolute; //小程序中z-index和absolute需要同时存在，元素才能脱离文档。
}
.select_one{
    text-align: center;
    background-color:rgb(239, 239, 239);
    width:676rpx;   //脱离文档后元素width不能再用百分比。
    height:100rpx;
    line-height:100rpx;
    margin:0 5%;
    border-bottom:2rpx solid rgb(255, 255, 255);
}
.personal_image{
    z-index: 100;
    position: absolute;
    right:2.5%;
    width: 34rpx;
    height: 20rpx;
    margin:40rpx 20rpx 40rpx 0;
    transition: All 0.4s ease;  
    -webkit-transition: All 0.4s ease;
}
.rotateRight{
    transform: rotate(180deg); //180°旋转图片。
}

js代码：

Page({
  data:{
    selectPerson:true,
    firstPerson:'个人',
    selectArea:false,
    },
  //点击选择类型
  clickPerson:function(){
    var selectPerson = this.data.selectPerson;
    if(selectPerson == true){
     this.setData({
     selectArea:true,
     selectPerson:false,
  })
    }else{
     this.setData({
     selectArea:false,
     selectPerson:true,
  })
    }
  } ,
  //点击切换
  mySelect:function(e){
   this.setData({
     firstPerson:e.target.dataset.me,
     selectPerson:true,
     selectArea:false,
   })
  },
  onLoad:function(options){
    // 页面初始化 options为页面跳转所带来的参数
  },
  onReady:function(){
    // 页面渲染完成
  },
  onShow:function(){
    // 页面显示
  },
  onHide:function(){
    // 页面隐藏
  },
  onUnload:function(){
    // 页面关闭
  }
}）