初次进入搜索结果页面,上拉加载的状态一直不能终止

来源:7-14 搜索结果 - 实现下拉刷新上拉加载功能

dawn_eve

2022-08-24

猜测:原因是 mescrollInit 方法执行的代码 this.mescroll.endSuccess() 在首次进入页面时不能终止上拉加载的状态,导致上拉时不能触发 upCallback 的回调方法。

http://img.mukewang.com/szimg/6305cda009fd74a304010712.jpg

search-result-list.vue

<template>
<view class="search-result-list-container">
<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback">
<!-- 循环渲染列表数据 -->
<block v-for="(item, index) in resultList">
<view class="search-result-item-box">
<!-- 内容区 - 样式1 -->
<search-result-item-theme-1
v-if="!item.pic_list || item.pic_list.length === 0"
:data="item"
/>

<!-- 内容区 - 样式2 -->
<search-result-item-theme-2
v-else-if="item.pic_list.length === 1"
:data="item"
/>

<!-- 内容区 - 样式3 -->
<search-result-item-theme-3 v-else :data="item" />
</view>
</block>
</mescroll-body>
</view>
</template>

<script>
import { getSearchResult } from '@/api/search.js';
import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js';
export default { 
name:"search-result-list",
mixins: ['MescrollMixin'],
props: {
// 搜索关键字
queryStr: {
type: String,
required: true
}
},
data() {
return {
resultList: [], // 数据源
page: 1, // 页数
// 实例
mescroll: null,
// 处理渲染会回调 down 和 up 方法,避免该问题,init变量表示是否为首次请求
isInit: true
};
},
mounted() {
this.mescroll = this.$refs.mescrollRef.mescroll;
},
methods: {
/* 首次加载 */
async mescrollInit() {
await this.loadSearchResult();
this.isInit = false;
this.mescroll.endSuccess();
},
/* 下拉刷新回调 */
async downCallback() {
if(this.isInit) return;
this.page = 1;
await this.loadSearchResult();
this.mescroll.endSuccess();
},
/* 上拉加载回调 */
async upCallback() {
if(this.isInit) return;
this.page += 1;
await this.loadSearchResult();
this.mescroll.endSuccess();
},
async loadSearchResult() {
const { data: res } = await getSearchResult({
q: this.queryStr,
p: this.page
});
res.list.forEach(item => {
item.title = item.title.replace(
/<em>/g,
"<em style='color: #f94d2a; margin: 0 2px'>"
);
item.description = item.description.replace(
/<em>/g,
"<em style='color: #f94d2a; margin: 0 2px'>"
)
});
if(this.page === 1) {
this.resultList = res.list;
} else {
this.resultList = [...this.resultList ,...res.list];
}
}
}
}
</script>

<style>
.search-result-list-container {
  padding: 12px 15px;
  .search-result-item-box {
    margin-bottom: 16px;
  }
}
</style>


search-blog.vue

<template>
<view class="search-blog-container">
<view class="search-bar-box">
<my-search
:placeholderText="defaultText"
v-model="searchVal"
:isShowInput="true"
:config="{
backgroundColor: '#f1f0f3'
}"
@search="onSearchConfirm"
@focus="onSearchFocus"
@blur="onSearchBlur"
@clear="onSearchClear"
@cancel="onSearchCancel"
/>
</view>
<view class="search-hot-list-box card" v-if="showType === HOT_LIST">
<search-hot-list @onSearch="onSearchConfirm" />
</view>
<view class="search-history-box" v-else-if="showType === SEARCH_HISTORY">
<search-history @onItemClick="onSearchConfirm" />
</view>
<view class="search-result-list-box" v-else>
<search-result-list ref="mescrollItem" :queryStr="searchVal" />
</view>
</view>
</template>

<script>
import { getDefaultText } from '@/api/search.js';
import { mapState, mapMutations } from 'vuex';
import MescrollCompMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mixins/mescroll-comp.js';

const HOT_LIST = '0';
const SEARCH_HISTORY = '1';
const SEARCH_RESULT = '2';

export default {
mixins: ['MescrollCompMixin'],
data() {
return {
// 绑定输入框中的内容
searchVal: '',
// 默认的 placeholderText
defaultText: '默认的 placeholderText',
HOT_LIST,
SEARCH_HISTORY,
SEARCH_RESULT,
showType: HOT_LIST
};
},
created() {
this.loadDefaultText();
},
computed: {
...mapState('search', ['searchData'])
},
methods: {
...mapMutations('search', ['addSearchData']),
/**
* 获取推荐搜素文本
*/
async loadDefaultText() {
const { data: res } = await getDefaultText();
this.defaultText = res.defaultText;
},
/**
* 搜索内容
*/
onSearchConfirm(val) {
  this.searchVal = val ? val : this.defaultText;
  // 保存搜索历史数据
  this.addSearchData(this.searchVal);
  // 切换视图
  if(this.searchVal) {
  this.showType = SEARCH_RESULT;
  }
},
// searchbar 获取焦点
onSearchFocus(val) {
  this.showType = SEARCH_HISTORY;
},
/**
* searchbar 失去焦点
*/
onSearchBlur(val) {
  console.log('searchbar 失去焦点');
},
/**
* searchbar 清空内容
*/
onSearchClear() {
  this.showType = SEARCH_HISTORY;
},
/**
* searchbar 取消按钮
*/
onSearchCancel(val) {
  this.showType = HOT_LIST;
}
}
}
</script>

<style scoped>
.search-blog-container {
.search-bar-box {
background-color: #fff;
padding: 5px;
position: sticky;
top: 0;
z-index: 9;
}
}
</style>


写回答

1回答

dawn_eve

提问者

2022-08-24

找到问题原因了,search-blog 文件 引入的 mixins 中添加的应该是变量而不是字符串。

0
1
慕工程3164992
加载中一直在,怎么取消
2023-04-17
共1条回复

uni-app从入门到进阶 系统完成项目实战

专门为小程序0基础学员而设,让你拥有能上线的作品

1105 学习 · 743 问题

查看课程