微信小程序开发页面下拉刷新和scrollview

微信小程序开发页面下拉刷新和scrollview

问题背景

本文主要介绍微信小程序开发过程实现页面下拉刷新以及scrollview组件实现下拉刷新，以及二者的关系。

问题分析

微信小程序开发过程，如果要实现页面刷新以及scrollerview下拉刷新，步骤如下：
（1）页面独立配置
在对应页面的json文件中配置属性：

"enablePullDownRefresh":true

（2）项目整体配置
在app.json中window对应内容增加属性配置：

  "window": {
    ...，
    "enablePullDownRefresh":true
  },

（3）scrollerview配置下拉刷新：

<scroll-view class="scroll-view_H" scroll-y="true" refresher-enabled="true" 
    bindrefresherrefresh="handleRefresher" refresher-triggered="{
   
   {isTriggered}}">
    //如果只开启refresher-enabled="true" 页面只会下拉刷新，但是不会回去，下拉刷新的图标一直存在，为false后会退出刷新

（4）系统页面下拉刷新和scrollerview的下拉会冲突，页面下拉刷新会被禁用。

问题总结

本文主要介绍微信小程序开发过程实现页面下拉刷新以及scrollview组件实现下拉刷新，以及二者的关系，有兴趣的同学可以进一步深入研究。