估计十来天没有写过代码了，有点生疏了，写起代码来不太利索。今天带来一篇十几天遗留的问题，实现微信小程序的下来刷新和上拉加载的实现。当然我所说的就是利用srollvies实现的，目前微信小程序的滚动控件只有一个，不像安卓拥有多种滚动视图，微信小程序的scrollview跟安卓的大部分滚动视图差不多，都有滚动到顶部和底部的监听事件。既然有这监听事件，那就简单多了，接下来只需要知道在顶部和底部手指按下和抬起中间过程中的距离就可以实现。

       本案例中总共实现了五个方法，分别是bindscrolltoupper（滑动到顶部）、bindscrolltolower（滑动到底部）、bindscroll（滑动中）、bindtouchstart（手指按下监听）、bindtouchend（手指抬起监听）

       实现思路：

      1.模拟网络加载出列表数据

      2.定义一个变量记录是否滚动到顶部或者滚动中或者滚动到底部

      3.分别实现bindscrolltoupper、bindscrolltolower、bindscroll的监听，并修改之前定义的变量，代表其状态

     3.分别实现bindtouchstart、bindtouchend的监听，对其滑动Y方向进行判断，触发刷新和加载方法。

   实现效果：

1.视图层：

<scroll-view scroll-y="true" bindscrolltoupper="scrollToTop" bindscrolltolower="scrollToBottom" bindscroll="scroll" style="height: 600px;" upper-threshold="0" lower-threshold="0" bindtouchstart="start" bindtouchend="end"  
>
  <view wx:if="{{isRefresh}}" class="refresh_root">
    <image src="../../images/timg.gif" class="refresh"></image>
    <view><text>正在刷新...</text></view>
  </view>
  <block wx:for="{{showList}}">
    <view class="showItem">{{item}}</view>
  </block>
  <view wx:if="{{isLoadMore}}" class="refresh_root">
    <image src="../../images/timg.gif" class="refresh"></image>
     <view><text>拼命加载中...</text></view>
  </view>
</scroll-view>

2.控制层：

var util = require('../../../utils/util.js')
Page({
    data: {
        showList: [],
        sstatus: 1,// 1是滑动到顶部 2是滑动中中 3是滑动到底部
        isRefresh: false,//是否显示刷新头
        isLoadMore: false,//加载更多
        clientY: 0,//Y方向手指按下的方向
    },
    /**
     * 初始化数据
     */
    onLoad: function (e) {
        var arr = new Array(30)
        for (var i = 0; i < arr.length; i++) {
            arr[i] = "回家过年" + (i + 1);
        }
        this.setData({
            showList: arr
        })
    },

    //滑动到顶端
    scrollToTop: function (e) {
        this.setData({
            sstatus: 1
        })
    },
    //滑动到底部
    scrollToBottom: function (e) {
        this.setData({
            sstatus: 3
        })

    },
    /**
     * 滑动中
     */
    scroll: function (e) {
        this.setData({
            sstatus: 2,
        })

    },
    /**
     * 手指按下
     */
    start: function (e) {
        console.log(e)
        var touchPoint = e.touches[0];
        var clientY = touchPoint.clientY
        this.setData({
            clientY: clientY
        })
    },
    /**
    * 抬起手指
    */
    end: function (e) {
        console.log(e)
        var context = this
        var upPoint = e.changedTouches[0];
        var endY = upPoint.clientY
        var pointTopointY = Math.abs(endY - this.data.clientY)
        var status = this.data.sstatus
        util.showLog("滑动的距离:" + pointTopointY + "----:当前的状态:" + status)
        //上拉刷新
        if (status == 1 && pointTopointY > 50) {
            this.setData({
                isRefresh: true
            })
        }
        //上拉加载
        if (status == 3 && pointTopointY > 50) {
            this.setData({
                isLoadMore: true
            })
        }
        //两秒后隐藏加载条条
        setTimeout(function () {
            context.setData({
                isRefresh: false,//是否显示刷新头
                isLoadMore: false,//加载更多
            })
        }, 3000)
    },

})

   3.样式

.refresh_root {
  background-color: white;
  width: 100%;
  text-align: center;
  margin-top: 2px;
}

.refresh {
  width: 40px;
  height: 40px;
}

.showItem {
  background-color: white;
  text-align: center;
  margin-top: 2px;
  padding: 5px;
}