vue 实现分页和多页签功能

最新推荐文章于 2025-02-21 09:23:47 发布

原创

最新推荐文章于 2025-02-21 09:23:47 发布 · 1.7k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue #javascript

本文介绍了一个基于uni-app的任务管理界面实现方案，包括自定义导航栏、搜索框、标签页切换等功能，并展示了如何通过前后端交互获取和展示任务列表。

直接看源码

<template>
	<view class="wrap">
		<u-navbar  back-text="返回" title-color="#fff" back-icon-color="#ffffff" 
			:is-fixed="true" :is-back="true" 
			:back-text-style="{'color':'#fff'}"
			:background="background"  
			:custom-back="goback"
		>
			<view class="slot-wrap" v-if="true">
				<view class="search-wrap" v-if="true">
					<!-- 如果使用u-search组件，必须要给v-model绑定一个变量 -->
					<u-search v-model="selectParams.keyWord" @blur = "search()" placeholder="事项、跟进人、备注":show-action="false"  
					height="56" :action-style="{color: '#fff'}"></u-search>
				</view>
				<view class="navbar-right" v-if="true">
					<view class="message-box right-item">
						<u-icon name="plus" @click="addItem()" size="38">新增</u-icon>	
					</view>
				</view>	
			</view>		
		</u-navbar>
		<view class="u-tabs-box">
			<u-tabs-swiper activeColor="#f29100" ref="tabs" :list="list" :current="current" @change="change" :is-scroll="false" swiperWidth="750"></u-tabs-swiper>
		</view>
		<swiper class="swiper-box" :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
			<swiper-item class="swiper-item" v-for="(item,index) in list" :key="index">
				<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom">
					<view class="page-box">
						<view class="order" v-for="(item, index2) in  dataList[index]" :key="item.aguid" >
							<view class="item_top" @click="editItem(item)">
								<view class="item_title">
									<view class="item_id_laber color0 " v-if="item.status ==0">待办公</view>
									<view class="item_id_laber color1" v-if="item.status == 1">已办公</view>
									&l