小程序使用scroll-view时无法触发 onPullDownRefresh，自定义下拉刷新

心路历程：小程序底栏采用了fixed定位，导致页面滚动时ios手机出现底栏闪动，为了解决这个问题，将page滚动改为scroll-view，从而引发了下拉刷新失效，因为页面需要监控scroll滚动，不得已需要舍弃onPullDownRefresh，自定义了一个比较简单的下拉刷新，效果图如下：下拉松手1s后刷新并回弹。

tempalte：将刷新代码放入scroll-view，loading动画我采用了vant组件，这个可以自己随意发挥

 <scroll-view
        scroll-y="true"
        bindscroll="toScroll"
        bindtouchstart="touchStart"
        bindtouchend="touchEnd"
        bindtouchmove="touchMove"
        style="height: 100vh"
    >
        <view class="refresh" animation="{
   
   {showLoad}}">
            <view class="load-animation">
                <van-loading type="spinner" />
            </view>
        </view>
        ...

data：showLoad是控制下拉和回弹的动画变量，此处的动画是根据高度变化取得的，showRefresh判断是否显示了下拉刷新

         data: {
            startY: '',
            showLoad: '', // 下拉刷新动画
            showRefresh: false, // 是否显示下拉刷新组件

methods中定义下拉方法(重点)

            touchStart(e) {
                this.setData({
                    startY: e.changedTouches[0].pageY,
                })
            },
            // 触摸移动
            touchMove(e) {
                let endY = e.changedTouches[0].pageY
                let startY = this.startY
                let dis = endY - startY

                // 判断是否下拉
                if (dis <= 0) {
                    return
                }
                if (dis < 60) {
                    // 下拉60内随下拉高度增加
                    this.move = wx.createAnimation({
                        duration: 0,
                        timingFunction: 'linear',
                        delay: 0,
                    })
                    this.move.height(dis).step()
                    this.setData({
                        showLoad: this.move.export(),
                    })
                    // console.log(222222, dis)
                }
                // 滑动距离大于20开始刷新
                this.showRefresh = dis > 20
            },
            // 触摸结束
            touchEnd(e) {
                if (this.showRefresh) {
                    // 在此执行下拉后的刷新操作 
                    this.init()
                }
                //1s后回弹
                setTimeout(() => {
                     // 创建动画实例
                    this.animation = wx.createAnimation({
                        duration: 300,
                        timingFunction: 'ease',
                        delay: 0,
                    })    
                    this.animation.height(0).step()
                    this.setData({
                        showLoad: this.animation.export(),
                    })
                    this.showRefresh = false
                }, 1000)
            },

 初始化样式，高度为0

 .refresh {
        width: 100%;
        height: 0;
        flex-center(); // 使用了stylus函数，flex居中
    }