uni-app中<scroll-view :scroll-x="true" >与"enablePullDownRefresh": true存在冲突

在 uni-app 中，<scroll-view> 组件的 scroll-x 属性和页面配置中的 "enablePullDownRefresh": true 可能存在冲突。这是因为两者的滚动机制不同，可能会导致页面行为异常。

冲突原因

1. scroll-view 的 scroll-x 属性：用于实现水平滚动。scroll-view 是一个独立的滚动容器，它会接管其内部的滚动行为。
2. enablePullDownRefresh：用于启用页面的下拉刷新功能。下拉刷新是基于页面级别的滚动行为，需要页面本身能够垂直滚动。

当你在一个页面中同时使用 <scroll-view :scroll-x="true"> 和 "enablePullDownRefresh": true 时，可能会出现以下问题：

• scroll-view 接管了滚动行为，导致页面的下拉刷新无法触发。
• 页面的垂直滚动被 scroll-view 限制，无法正常工作。

解决方案

1. 避免在需要下拉刷新的页面中使用 scroll-view：如果页面需要下拉刷新功能，尽量避免使用 scroll-view，特别是水平滚动的 scroll-view。可以使用其他布局方式来实现水平滚动，比如 swiper 组件。

2. 使用 scroll-view 的 scroll-y 属性：如果你需要在 scroll-view 中实现垂直滚动，并且同时需要下拉刷新功能，可以考虑使用 scroll-view 的 scroll-y 属性，并在 scroll-view 中手动实现下拉刷新逻辑。

3. 自定义下拉刷新：如果你确实需要在 scroll-view 中实现下拉刷新，可以考虑使用自定义的下拉刷新组件，而不是依赖 enablePullDownRefresh。uni-app 提供了 onPullDownRefresh 生命周期函数，你可以通过监听 scroll-view 的滚动事件来手动触发下拉刷新。

示例代码

<template>
  <view>
    <scroll-view :scroll-y="true" @scrolltolower="onScrollToLower" @scroll="onScroll">
      <!-- 你的内容 -->
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      isRefreshing: false
    };
  },
  methods: {
    onScroll(e) {
      // 手动判断是否触发下拉刷新
      if (e.detail.scrollTop <= -50 && !this.isRefreshing) {
        this.isRefreshing = true;
        this.onPullDownRefresh();
      }
    },
    onScrollToLower() {
      // 滚动到底部时触发加载更多
      this.loadMore();
    },
    onPullDownRefresh() {
      // 执行下拉刷新逻辑
      setTimeout(() => {
        this.isRefreshing = false;
        uni.stopPullDownRefresh();
      }, 2000);
    },
    loadMore() {
      // 执行加载更多逻辑
    }
  }
};
</script>

<style>
/* 样式 */
</style>