这个this.mescroll.endSuccess() 这执行了，加载中仍然存在是什么原因
来源：7-14 搜索结果 - 实现下拉刷新上拉加载功能
慕仰9715041
2021-10-02
<template>
<view class="type-list">
<scroll-view scroll-x class="type-ctn">
<view
v-for="(item, index) in types"
:key="index"
:class="['text', active === item.val ? 'active' : '']"
@click="activeChange(item.val)"
>{{ item.name }}</view
>
</scroll-view>
<!-- @init="mescrollInit" @down="downCallback" -->
<mescroll-body
v-if="active"
ref="mescrollRef"
@init="mescrollInit"
@up="upCallback"
>
<view class="items-ctn">
<block v-for="(item, i) in itemList" :key="i">
<item :item="item" ref="mescrollItem" />
</block>
</view>
</mescroll-body>
<view class="no-more" v-if="noMore">没有更多了</view>
</view>
</template>
<script>
import { getList } from "api/goods";
import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
export default {
mixins: [MescrollMixin],
data() {
return {
active: null,
types: [
{
name: "热卖甄选",
val: "hot",
},
{
name: "设计师推荐",
val: "recommend",
},
{
name: "家具好物",
val: "good",
},
{
name: "拎包入住",
val: "bag",
},
],
filter: {
current: 1,
size: 6,
},
itemList: [],
isInit: true,
mescroll: null,
noMore:false
};
},
onLoad(option) {
this.active = option.type;
this.filter.type = option.type;
},
mounted() {
this.mescroll = this.$refs.mescrollRef.mescroll;
},
methods: {
activeChange(val) {
this.active = val;
this.filter.type = val;
this.filter.current = 1;
this.noMore = false
this.mescrollInit();
},
async mescrollInit() {
await this.getList();
this.isInit = false;
// 结束 上拉加载 && 下拉刷新
this.mescroll.endSuccess();
},
async getList() {
const res = await getList(this.filter);
if(res.data.records.length<this.filter.size){
this.noMore = true
}
if (this.filter.current === 1) {
this.itemList = res.data.records;
} else {
this.itemList = [...this.itemList, ...res.data.records];
}
},
async upCallback() {
if (this.isInit || this.noMore) return;
this.filter.current = this.filter.current + 1;
await this.getList();
this.mescroll.endSuccess();
},
},
};
</script>
<style>
.type-list {
height: 100vh;
background: #f9f9f9;
.type-ctn {
width: 100%;
white-space: nowrap;
.text {
line-height: 36px;
border-radius: 18px;
background: #ffffff;
padding: 0 13px;
margin: 10px;
color: #333333;
display: inline-block;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
&.active {
background: #00afec;
color: #ffffff;
}
}
}
}
</style>
1回答
-
Sunday
2021-10-02
你好：
你不需要在 activeChange 方法中主动调用 mescrollInit 的 。只需要在 mescroll-body 中绑定了 @init="mescrollInit" 即可
00
相似问题