本篇文章介绍在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.csdn.net/weixin_52614514/article/details/134683064