初次进入搜索结果页面,上拉加载的状态一直不能终止
来源:7-14 搜索结果 - 实现下拉刷新上拉加载功能

dawn_eve
2022-08-24
猜测:原因是 mescrollInit 方法执行的代码 this.mescroll.endSuccess() 在首次进入页面时不能终止上拉加载的状态,导致上拉时不能触发 upCallback 的回调方法。
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 中添加的应该是变量而不是字符串。
012023-04-17
相似问题