在子组件中使用mescroll插件中的mescroll-body（uniapp）

最新推荐文章于 2024-11-25 15:51:12 发布

5335ld

最新推荐文章于 2024-11-25 15:51:12 发布

阅读量843

点赞数

文章标签： uni-app javascript 开发语言

原文链接：https://blog.youkuaiyun.com/weixin_52614514/article/details/134683064

版权

本文详细介绍了如何在uniapp中，特别是在父页面通过子组件使用mescroll-body组件时，涉及的导入、混入设置以及必要的回调函数配置。重点提到了父页面引入mescroll插件、混入mescroll-compMixin，以及子组件中mescroll-body的正确用法和注意事项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本篇文章介绍在uniapp中父页面使用子组件的情况下，为在子组件中正确使用mescroll-body，父页面和子组件所需的设置。

首先在Dcloud插件市场下载mescroll插件并导入HbuilderX：mescroll

父页面中，首先在script标签中import引入，并在mixins中使用该混入，然后在template中的子组件标签中使用ref

   // 父页面
    <template>
      <view class="res-info">
        <!-- 第三步：ref -->
        <res-info ref="mescrollItem"></res-info>
      </view>
    </template>
     
    <script>
    import resInfo from './components/resInfo.vue';
    import MescrollCompMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mixins/mescroll-comp.js"; // 第一步：import
     
    export default {
      mixins: [MescrollCompMixin], // 第二步：mixins
      components: {
        resInfo,
      }
    }
    </script>

子组件中，首先在script标签中import引入，并在mixins中使用该混入，然后在template中的列表数据外包裹mescrol-body标签，其他的downOption、upOption等可根据需要自行配置。

注意：mescroll-body中的@init=“mescrollInit”、@down=“downCallback” 官方已经默认设置好，不需要自己设置，上拉加载的回调@up="upCallback"需要自己设置，具体怎么设置见官方文档。

    // 子组件
    <template>
      <view class="popular-science">
      <!-- 第三步：在列表数据外包裹mescroll-body -->
      <mescroll-body ref="mescrollRef" style="min-height: 100%;" @init="mescrollInit"  @down="downCallback" @up="upCallback">
        <view v-for="(item, index) in listData" :key="index" class="list-item">
          <!-- 列表内容 -->
        </view>
      </mescroll-body>
    </template>
     
    <script>
    import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js"; // 第一步：import
    export default {
      mixins: [MescrollMixin], // 第二步：mixins
    }


                        
原文链接：https://blog.youkuaiyun.com/weixin_52614514/article/details/134683064