自用vue模板 - 搜索+列表+数量展示

本文链接：https://blog.csdn.net/Rudon10000/article/details/127296744

本文介绍了如何使用Vue.js实现一个具备搜索功能的列表页面，包括列表展示、数量统计以及触底加载下一页数据的swiper切换效果。通过这个模板，可以方便地构建具有动态搜索和分页的前端应用。

摘要由CSDN通过智能技术生成

效果图

功能

列表页
搜索+列表+各列表数量展示
> 列出数量，计算各自的总页数
> 显示列表#0
> swiper切换显示 + 触底加载下一页数据

代码

<template>
	<view>
		<!-- 自定义导航栏 占位空间 -->
		<view class="navigationStyleCustomHeight alwaysOnTopBox0 bgColorWhite"></view>


		<!-- 自定义导航栏 -->
		<view class="rowSpaceBetween box" style="background-color: #fff; height: 50px;">
			<view class="">
				<text class="opacity0">占位字符</text>
			</view>
			<view class="fontSize16 weightBold" style="line-height: 50px;">
				商品管理
			</view>
			<view class="opacity80" style="font-size: 12px; line-height: 50px;" @click="goPage('product_add_category')">
				新增商品
			</view>
		</view>

		<!-- 搜索条 -->
		<view class="bgColorWhite">
			<uni-search-bar clearButton="none" @confirm="searchAction" @focus="focusAction" v-model="searchValue" @cancel="cancelAction" placeholder="搜索商品信息"></uni-search-bar>
		</view>


		<!-- 搜索模式 -->
		<view class="" v-show="mode == 'search'">

			<!-- 空列表提示 -->
			<notice-found-nothing v-show="!list_search.length"></notice-found-nothing>

			<!-- 搜索结果集 -->
			<view>

				<!-- 卡片 -->
				<view class="bgColorWhite marginTop5" v-for="(item, index) in list_search" :key="'list-s-' + index">
					One
				</view>

			</view>

		</view>

		<!-- 列表模式 -->
		<view class="" v-show="mode == 'list'">
			<view class="alwaysOnTopBox2 bgColorWhite">
				<view class="TopTabs rowSpaceEvenly">

					<view class="oneTab" :class="{'active': curTab == 0}" @click="curTab = 0">
						<view class="">
							<text class="box-text">待办</text>
							<text class="fontSize12"> {
  {rowsTotal[0]?'('+rowsTotal[0]+')':''}}</text>
						</view>
					</view>

					<view class="oneTab" :class="{'active': curTab == 1}" @click="curTab = 1">
						<view class="">
							<text class="box-text">已接单</text>
							<text class="fontSize12"> {
  {rowsTotal[1]?'('+rowsTotal[1]+')':''}}</text>
						</view>
					</view>

					<view class="oneTab" :class="{'active': curTab == 2}" @click="curTab = 2">
						<view class="">
							<text class="box-text">待送达</text>
							<text class="fontSize12"> {
  {rowsTotal[2]?'('+rowsTotal[2]+')':''}}</text>
						</view>