dati/pages/questionSearch/searchList.vue

<template>
	<view>
		<!--#ifdef APP-PLUS-->
		<view class="lz-status_bar">
			<view class="lz-top_view"></view>
		</view>
		<!--#endif-->
		<!-- #ifndef MP-WEIXIN -->
		<view class="kaoshi-head">
			<view class="kaoshi-head-top">
				<view class="kaoshi-head-left">
					<view class="iconfont icon-zuojiantou" @tap="$navigateBack"></view>
				</view>
				<view class="kaoshi-head-m">题目搜索</view>
				<view class="kaoshi-head-right"></view>
			</view>
		</view>
		<!--#endif-->
		<view class="search-box">
			<uni-search-bar class="uni-mt-10" radius="100" placeholder="请输入关键字搜索题目" @confirm="search" v-model="keyword"
				clearButton="none" cancelButton="none" style="width: 86%;" />
			<view class="search-submit" @tap="search">搜索</view>
		</view>
		<view class="search-wuc" v-if="issearch">
			<wuc-tab :tab-list="order_sort" :tabCur="current_index" @change="tabChange"
				tab-class="text-black bg-white list_top" select-class="text-blue text-xl"></wuc-tab>
		</view>
		<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption"
			:up="upOption">
			<view v-for="(item,index) in list" :key="index" @tap="gotoDetail(item.id)">
				<view class="searchbox">
					<view class="classify">{{item.type_text}}</view>
					<uc-parse :node="item.question_name"></uc-parse>
				</view>
			</view>
		</mescroll-body>
	</view>
</template>

<script>
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	import {
		mapState
	} from 'vuex'
	import WucTab from '@/components/wuc-tab/wuc-tab.vue';
	import Error from '@/core/untils/error/index';
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				keyword: '',
				mescroll: null, // mescroll实例对象 (此行可删,mixins已默认)
				// 下拉刷新的配置(可选, 绝大部分情况无需配置)
				downOption: {
					use: true, // 是否启用下拉刷新; 默认true
					auto: false, // 是否在初始化完毕之后自动执行下拉刷新的回调; 默认true
					native: false // 启用系统自带的下拉组件,默认false;仅mescroll-body生效,mescroll-uni无效(native: true, 则需在pages.json中配置"enablePullDownRefresh":true)
				},
				// 上拉加载的配置(可选, 绝大部分情况无需配置)
				upOption: {
					auto: false, // 是否在初始化完毕之后自动执行下拉刷新的回调; 默认true
					page: {
						num: 0,
						size: 10 // 每页数据的数量,默认10
					},
					noMoreSize: 5, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
					empty: {
						tip: '暂无相关数据'
					}
				},
				// 列表数据
				list: [],

				order_sort: [{
						name: '全部',
						goods_type: '0'
					},
					{
						name: '单选',
						goods_type: '1'
					},
					{
						name: '多选',
						goods_type: '2'
					},
					{
						name: '判断',
						goods_type: '3'
					},
					{
						name: '填空',
						goods_type: '4'
					},
					{
						name: '简答题',
						goods_type: '5'
					}
				],
				current_id: '0',
				current_index: 0,
				issearch: false,

			}
		},
		computed: {
			...mapState(['subject', 'userinfo'])
		},
		methods: {
			gotoDetail(id) {
				if (this.userinfo.token == undefined) {
					Error.errorNotLoggedIn();
					return
				}
				uni.navigateTo({
					url: '/pages/questionSearch/questionDetail?id=' + id
				})
			},
			search() {
				if (this.keyword == '') return
				this.issearch = true
				this.mescroll.resetUpScroll()
			},
			/*上拉加载的回调*/
			async upCallback(page) {
				let pageNum = page.num; // 页码, 默认从1开始
				let pageSize = page.size; // 页长, 默认每页10条

				let res = await this.$myHttp.post({
					url: this.$myHttp.urlMap.questionsSearchResult,
					data: {
						subject_id: this.subject.id,
						keyword: this.keyword,
						page: pageNum,
						limit: pageSize,
						type: this.current_id
					},
			 	needLogin: false
				})
				if (res.code == 1) {
					// 接口返回的当前页数据列表 (数组)
					let curPageData = res.data.data;
					// 接口返回的当前页数据长度 (如列表有26个数据,当前页返回8个,则curPageLen=8)
					let curPageLen = curPageData.length;
					// 接口返回的总页数 (如列表有26个数据,每页10条,共3页; 则totalPage=3)
					// let totalPage = data.xxx;
					// 接口返回的总数据量(如列表有26个数据,每页10条,共3页; 则totalSize=26)
					let totalSize = res.data.total;

					this.mescroll.endBySize(curPageLen, totalSize);
					if (page.num == 1) this.list = []; //如果是第一页需手动置空列表
					this.list = this.list.concat(curPageData); //追加新数据
				} else {
					this.mescroll.endErr()
				}
				// 此处仍可以继续写其他接口请求...
				// 调用其他方法...
			},
			tabChange(index) {
				this.current_index = index;
				this.current_id = this.order_sort[index].goods_type;
				if (this.keyword == '') {
					return
				}
				this.mescroll.resetUpScroll(false)
			}
		}
	}
</script>

<style>
	page {
		background-color: #f6f6f6;
	}

	.search-box {
		display: flex;
		flex: 1;
		justify-content: space-between;
		background-color: #fff;
	}

	.search-submit {
		width: 16%;
		height: 32px;
		background: #3c7bfc;
		text-align: center;
		margin-right: 10px;
		line-height: 32px;
		margin-top: 11px;
		border-radius: 16px;
		color: #fff;
		font-size: 14px;
	}

	.searchbox {
		margin: 10px 15px;
		padding: 10px;
		background-color: #fff;
		border-radius: 8px;
	}

	.classify {
		font-size: 16px;
		margin: 5px 0 10px -10px;
		padding-left: 11px;
		line-height: 16px;
		border-left: 5px solid #3c7bfc;
	}
</style>