uni-app 页面开启下拉刷新 "enablePullDownRefresh": true，会与页面弹窗下拉功能冲突

在 uni-app 中，如果你在页面配置中开启了下拉刷新功能（"enablePullDownRefresh": true），这可能会导致与页面中的弹窗下拉功能冲突。具体表现为，当你在弹窗中进行下拉操作时，可能会触发页面的下拉刷新，而不是弹窗的下拉功能。

解决方案

1. 动态控制下拉刷新
   你可以在弹窗显示时禁用页面的下拉刷新，弹窗关闭时再重新启用下拉刷新。通过 uni.startPullDownRefresh 和 uni.stopPullDownRefresh 方法可以动态控制下拉刷新。

   export default {
     data() {
       return {
         showPopup: false
       };
     },
     methods: {
       openPopup() {
         this.showPopup = true;
         uni.stopPullDownRefresh(); // 禁用下拉刷新
       },
       closePopup() {
         this.showPopup = false;
         uni.startPullDownRefresh(); // 启用下拉刷新
       }
     }
   };

2. 使用 scroll-view 组件
   如果你在弹窗中需要实现下拉功能，可以考虑使用 scroll-view 组件，并在 scroll-view 中实现自定义的下拉逻辑。这样可以避免与页面的下拉刷新冲突。

   <template>
     <view>
       <scroll-view scroll-y="true" @scrolltoupper="onScrollToUpper">
         <!-- 弹窗内容 -->
       </scroll-view>
     </view>
   </template>
   
   <script>
   export default {
     methods: {
       onScrollToUpper() {
         // 自定义下拉逻辑
       }
     }
   };
   </script>

3. 自定义下拉刷新
   如果你需要更复杂的下拉刷新逻辑，可以考虑自定义下拉刷新功能，而不是依赖 uni-app 的默认下拉刷新。你可以通过监听 touchstart、touchmove 和 touchend 事件来实现自定义的下拉刷新逻辑。

   export default {
     data() {
       return {
         startY: 0,
         isRefreshing: false
       };
     },
     methods: {
       onTouchStart(e) {
         this.startY = e.touches[0].pageY;
       },
       onTouchMove(e) {
         const moveY = e.touches[0].pageY;
         const deltaY = moveY - this.startY;
         if (deltaY > 50 && !this.isRefreshing) {
           this.isRefreshing = true;
           this.refreshData();
         }
       },
       onTouchEnd() {
         this.isRefreshing = false;
       },
       refreshData() {
         // 刷新数据的逻辑
       }
     }
   };

4. 使用 page-meta 组件
   如果你需要在特定条件下禁用下拉刷新，可以使用 page-meta 组件动态修改页面配置。

   <template>
     <view>
       <page-meta :page-style="pageStyle"></page-meta>
       <button @click="togglePullDownRefresh">切换下拉刷新</button>
     </view>
   </template>
   
   <script>
   export default {
     data() {
       return {
         pageStyle: 'enablePullDownRefresh: true'
       };
     },
     methods: {
       togglePullDownRefresh() {
         this.pageStyle = this.pageStyle === 'enablePullDownRefresh: true' ? 'enablePullDownRefresh: false' : 'enablePullDownRefresh: true';
       }
     }
   };
   </script>