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

本篇文章介绍在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
}

附上mescroll官方文档：mescroll -- 精致的下拉刷新和上拉加载js框架