在开发uniapp小程序中，scroll-view在支付宝小程序不支持下拉刷新和上拉加载。于是采用了第三方插件mescroll，它是支持各平台的兼容性。官方地址：https://www.mescroll.com/uni.html#mescrollbody

一、配置allowsBounceVertical

在文档中有过这样的描述，"mp-alipay":{"allowsBounceVertical":"NO"}//可选: 取消支付宝和钉钉小程序的iOS回弹 (可配在 'globalStyle'), allowsBounceVertical在支付宝开放平台的含义是： 是否允许向下拉拽。
当需要在项目中使用页面级刷新时，必须要求allowsBounceVertical设置为YES。虽然mescroll支持该属性可选，但是设置为YES时，在mescroll组件下拉会同时出现页面回弹效果，导致组件下拉刷新体验非常不好。怎么解决这个问题呢？

二、页面级刷新、mescroll插件配合使用

当遇到不能使用mescroll组件的页面，可以在微信小程序使用scroll-view，在支付宝小程序使用页面级刷新。其他刷新页面可以使用mescroll来兼容微信和支付宝小程序。于是，需要在page.json文件中页面配置微信小程序关闭页面级刷新，支付宝小程序开启页面级刷新。这里可以采用条件编译来实现page的配置。

// #ifdef MP-ALIPAY
        ,{
            "path" : "pages/A",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "A",
                "enablePullDownRefresh": true,
                "navigationStyle": "custom",
                "mp-alipay": {
                    "transparentTitle": "always",
                    "titlePenetrate": "YES",
                    "defaultTitle":"",
                    "allowsBounceVertical": "YES"
                }
            }
            
        }
        // #endif
        
        // #ifdef MP-WEIXIN
        ,{
            "path" : "pages/A",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "A,
                "navigationStyle": "custom",
                "mp-alipay": {
                    "transparentTitle": "always",
                    "titlePenetrate": "YES",
                    "defaultTitle":""
                }
            }
            
        }
        // #endif

另外，我们知道项目要使用mescroll，全局配置最好要设置allowsBounceVertical：NO。然而支付宝小程序开启面级刷新的时候需要设置allowsBounceVertical：YES，这里是不是冲突了。查阅文档发现，很庆幸在pages[]里面配置页面支持allowsBounceVertical的设置。

全局配置，将allowsBounceVertical设置为NO，支持mescroll在项目中使用。

"globalStyle": {
        "navigationBarTextStyle": "black",
        "navigationBarTitleText": "",
        "navigationBarBackgroundColor": "#FFFFFF",
        "backgroundColor": "#F8F7F7",
        "mp-alipay":{"allowsBounceVertical":"NO"}, // 下拉刷新组件需要设置NO，而页面级下拉刷新需要设置YES，可在页面配置处单独设置该属性为YES
        "app-plus": {
            "background": "#efeff4"
        }
    },

特定页面开启页面级刷新，单独配置allowsBounceVertical设置为YES，需要再mp-alipay下，如

    {
            "path" : "pages/A",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "A",
                "enablePullDownRefresh": true,
                "navigationStyle": "custom",
                "mp-alipay": {
                    "transparentTitle": "always",
                    "titlePenetrate": "YES",
                    "defaultTitle":"",
                    "allowsBounceVertical": "YES"
                }
            }
            
        }

为什么mescroll无法使用，需要使用自带的页面级刷新？

在开发中遇到这样一种场景，刷新列表组件的层级高于头部view的层级。

image.png

在使用mescroll的，mescroll-body组件来实现下拉刷新，部分源码如下。

<template>
    <view 
    class="mescroll-body mescroll-render-touch" 
    :class="{'mescorll-sticky': sticky}"
    :style="{'minHeight':minHeight, 'padding-top': padTop, 'padding-bottom': padBottom, 'margin-top': -padTop}" 
    @touchstart="wxsBiz.touchstartEvent" 
    @touchmove="wxsBiz.touchmoveEvent" 
    @touchend="wxsBiz.touchendEvent" 
    @touchcancel="wxsBiz.touchendEvent"
    :change:prop="wxsBiz.propObserver"
    :prop="wxsProp"
    >

..........

从源码可以看出它的原理是指定了最小高度的view，默认全屏。数据的滚动是则是一个高度非常长view在根据手势滑动，跟scroll-view还是有本质的区别。
从mescroll-body组件的使用方法可知，头部区域的view必须固定在头部，同时z-index层级要高于列表，mescroll-body的动态style中设置padding-top的高度正好是头部view的高度，这样列表的滑动效果跟scroll-view一致了。
然而我在实际开发中遇到的是列表层级要高于头部，所以mescroll-body无法满足。才考虑根据平台分开处理，支付宝小程序采用页面级刷新才能实现这个UI效果。