uni-app build导出app资源时scrollView下存在refresher插槽会导致编译报错

uni-app build导出app资源时scrollView下存在refresher插槽会导致编译报错

产品分类

uniapp/App

开发环境 版本号 项目创建方式
Windows 10 HBuilderX

示例代码：

<template>  
    <view class="content">  
        <scroll-view>  
            <template #refresher>  
                123  
            </template>  
        </scroll-view>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                title: 'Hello'  
            }  
        },  
        onLoad() {  

        },  
        methods: {  

        }  
    }  
</script>  

<style>  
    .content {  
        display: flex;  
        flex-direction: column;  
        align-items: center;  
        justify-content: center;  
    }  

    .logo {  
        height: 200rpx;  
        width: 200rpx;  
        margin-top: 200rpx;  
        margin-left: auto;  
        margin-right: auto;  
        margin-bottom: 50rpx;  
    }  

    .text-area {  
        display: flex;  
        justify-content: center;  
    }  

    .title {  
        font-size: 36rpx;  
        color: #8f8f94;  
    }  
</style>

更多关于uni-app build导出app资源时scrollView下存在refresher插槽会导致编译报错的实战教程也可以访问 https://www.itying.com/category-93-b0.html

8 回复

h5 build正常，app build会报错

更多关于uni-app build导出app资源时scrollView下存在refresher插槽会导致编译报错的实战教程也可以访问 https://www.itying.com/category-93-b0.html


真的没人注意这个问题吗?vite编译的，在uni内置组件里写具名插槽,app build会报错，这很容易复现啊

用法错误，插槽只能在自定义组件内使用 h5 平台中view，scroll-view使用 vue 的自定义组件实现，所以你套用template插槽表面看没有问题 你可以在标准vue3中，用div来嵌套template插槽，一样会报错
https://vue-next-template-explorer.netlify.app/#eyJzcmMiOiI8dGVtcGxhdGU+ICBcbiAgICA8ZGl2IGNsYXNzPVwiY29udGVudFwiPiAgXG4gICAgICAgIDxkaXY+ICBcbiAgICAgICAgICAgIDx0ZW1wbGF0ZSAjcmVmcmVzaGVyPiAgXG4gICAgICAgICAgICAgICAgMTIzICBcbiAgICAgICAgICAgIDwvdGVtcGxhdGU+ICBcbiAgICAgICAgPC9kaXY+ICBcbiAgICA8L2Rpdj4gIFxuPC90ZW1wbGF0ZT5cbiIsIm9wdGlvbnMiOnt9fQ==

可是app的scroll-view中我看着是有refresher这个slot的啊，当refresher-default-style设置为none的时候，不应该实在refresher这个slot里去写自定义刷新样式吗？

而且我看着你们编译后的代码，直接把scroll-view中的内容用Array当children了，而不是slot的写法，这合理吗？

回复 1***@qq.com: scroll-view是内置组件，不是自定义组件

回复 1***@qq.com: 不要使用插槽方式实现自定义refresher

在使用 uni-app 进行开发时，如果你在 scrollView 组件中使用了 refresher 插槽，并且在编译或导出 app 资源时遇到报错，可能是由于某些平台对 refresher 插槽的支持不完全或语法不兼容导致的。以下是一些可能的解决方法和排查步骤：

1. 检查平台兼容性

  • scrollView 的 refresher 插槽主要用于实现下拉刷新功能，但并非所有平台都完全支持它。
  • 确保你使用的平台（如 H5、小程序、App 等）支持 refresher 插槽。如果不支持，可能需要使用平台特定的下拉刷新组件或方法。

2. 检查语法是否正确

  • 确保 refresher 插槽的语法正确。例如：
    <scroll-view refresher-enabled @refresherrefresh="onRefresh">
  <template #refresher>
    <view class="custom-refresher">下拉刷新</view>
  </template>
  <!-- 内容 -->
</scroll-view>
  • 确保 refresher-enabled 属性已启用，并且 @refresherrefresh 事件已正确绑定。

3. 检查 uni-app 版本

  • 确保你使用的是最新版本的 uni-app。旧版本可能存在对 refresher 插槽的支持问题。
  • 更新 uni-app：
    npm update @dcloudio/uni-app

4. 平台特定处理

  • 如果你在编译到特定平台（如 App）时遇到问题，可以尝试使用平台特定的下拉刷新组件。例如：
    • 在 App 端，可以使用 mescroll 或 pull-to-refresh 插件。
    • 在小程序端，可以使用小程序原生的 scroll-view 组件。

5. 排查报错信息

  • 查看编译时的具体报错信息，找到问题的根源。报错信息通常会提示是哪个文件或哪行代码出了问题。
  • 如果报错信息不明确，可以尝试逐步注释代码，定位问题。

6. 使用替代方案

  • 如果 refresher 插槽确实无法使用，可以考虑使用其他方式实现下拉刷新功能。例如：
    • 使用 mescroll 插件（跨平台支持）。
    • 使用 pull-to-refresh 组件（H5 和 App 端支持）。

7. 示例代码

以下是一个使用 mescroll 实现下拉刷新的示例：

<template>
  <mescroll-vue ref="mescroll" :down="downOption" [@down](/user/down)="onDown">
    <!-- 内容 -->
  </mescroll-vue>
</template>

<script>
import MescrollVue from 'mescroll.js/mescroll.vue';

export default {
  components: {
    MescrollVue,
  },
  data() {
    return {
      downOption: {
        use: true,
        auto: false,
      },
    };
  },
  methods: {
    onDown() {
      // 下拉刷新逻辑
      setTimeout(() => {
        this.$refs.mescroll.endSuccess();
      }, 1000);
    },
  },
};
</script>
回到顶部