uniapp-实现一级二级职位选择，完整页面！！！

news2024/11/28 16:35:38

一、需求

该页面实现的功能有：

  1. 该页面是左侧为一级，右侧为二级；
  2. 可以搜索职位进行选择；
  3. 底部显示已选的岗位，点击每一项会删除；
  4. 右侧的二级岗位，点击时会选中，再次点击会取消；添加到已选数组时，会先判断数组去重；
  5. 该页面是从上一页跳转来的，选择完成后直接通过uni.navigateBack()返回，使用uni.$emit传递参数。上个页面会通过uni.$on接收参数。（因为如果使用其他跳转方式，会导致上一页面刷新，从而导致之前填写的信息都清空了。）

二、实现效果

在这里插入图片描述
在这里插入图片描述

三、完整代码

<template>
	<view>
		<view class="selectPosition">
		
			<!--搜索（使用了u-search）-->
			<view class="search">
				<u-search placeholder="搜索职位名称" v-model="keyword" @search="searchHistory" @custom="searchHistory"
					:showAction='true'></u-search>
			</view>
			<view class="positionbox" v-if="leftList.length>0">
				<!--页面左侧-->
				<view class="left">
					<view :class="tabindex == index ? 'left_item left_item_active':'left_item'"
						v-for="(item,index) in leftList" :key="index" @click="leftBtn(item,index)">{{item.type}}
					</view>
				</view>
				
				<!--页面右侧-->
				<view class="right">
					<!-- 通过（selectList.indexOf(sub.type) !== -1）来判断选中的数组里，是否有该二级元素。点击时，如果有，会移除；如果没有，会添加上 -->
					<view :class="selectList.indexOf(sub.type) !== -1 ? 'right_item right_item_active':'right_item'"
						v-for="(sub,index) in leftList[tabindex].children" :key="index" @click="rightBtn(sub,index)">
						{{ sub.type }}
					</view>
				</view>
			</view>

			<view class="zanwu" v-else>
				<view>暂无内容</view>
				<view class="searchAgain" @click="searchAgain()">重新搜索</view>
			</view>

			<!--底部-->
			<view class="positionBot">
				<view class="num">已选：{{seleNum}}/{{allNum}}</view>
				<scroll-view :scroll-x="true" class="seleBox">
					<block v-for="(item,index) in selectList" :key="item">
						<view class="item" @click="botBtn(item,index)">
							{{item}}<text>x</text>
						</view>
					</block>
				</scroll-view>
				<view class="submit" @click="submitFun()">确定</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				keyword: '',
				//左侧
				tabindex: 0,
				leftList: [],  //存放一级和二级数据

				//右侧
				rightindex: -1,
				selectList: [], //底部选中的数组
				seleNum: 0,  //选中的个数
				allNum: 3,  //总数
			}
		},
		onLoad(e) {
			this.initFun()
		},
		methods: {
			//职位的接口
			initFun() {
				var that = this
				this.$api.appPlateForm('post', this.$url.url.presentIndex, {
					keyword: that.keyword
				}, (res) => {
					if (res.code == 200) {
						that.leftList = res.data
					}
				})
			},

			//点击左侧
			leftBtn(item, index) {
				this.tabindex = index;
				// this.rightindex = -1; //右侧归零
			},
			
			//点击右侧
			rightBtn(sub, index) {
				console.log(sub, index)
				this.rightindex = index;

				//uniapp 数组添加不重复元素
				if (this.selectList.includes(sub.type)) {
					this.selectList = this.selectList.filter((item) => {
						return item != sub.type;
					});
				} else {
					this.selectList.push(sub.type);
					this.selectList = [...new Set(this.selectList)]; // 数组去重
					if (this.selectList.length > 3) {
						uni.showToast({
							title: "最多选3个",
							icon: "none"
						});
						this.selectList.splice(3, this.selectList.length - 3);
					}
				}
				this.seleNum = this.selectList.length
			},
			//底部点击
			botBtn(item, index) {
				console.log(item)
				this.selectList.splice(index, 1); //点击会移除当前元素
				this.seleNum = this.selectList.length
			},
			
			//点击搜索
			searchHistory(value) {
				console.log(value)
				this.keyword = value
				this.initFun()
			},
			
			//重新搜索
			searchAgain() {
				this.keyword = ''
				this.initFun()
			},

			//确定
			submitFun() {
				if (this.seleNum < 1) {
					uni.showToast({
						title: "您还没有选择",
						icon: "none"
					});
				} else {
					console.log(this.selectList) //最多3个职位（二级名称）
					//通过$emit 传递数据
					uni.$emit('selectList', this.selectList)
					uni.navigateBack()

					//上个页面在onShow中通过$on接收（）
					//onShow() {
						//接收上个页面传递的职位类别
						//const on = uni.$on('selectList', function(data) {
							// console.log('打印收到的类型',typeof(data))  //object
							// console.log('打印收到的值',data)
							//this.positionTwo = data.toString() //转为字符串使用
						//})
						//this.positionTwo = on.positionTwo
						// console.log('打印positionTwo', this.positionTwo)
					//},
					
				}
			}
		}
	}
</script>

<style>
	.selectPosition {
		width: 100%;
		box-sizing: border-box;
		padding: 50rpx 30rpx 20rpx;

	}

	.search {
		width: 690rpx;
		height: 70rpx;
		background: #F2F2F2;
		border-radius: 15rpx;
		box-sizing: border-box;
		padding-right: 32rpx;
		margin-top: -25rpx;
		position: relative;
		z-index: 99;
		overflow: hidden;
		margin-bottom: 30rpx;
	}

	.search .searchimg {
		position: absolute;
		width: 38rpx;
		height: 38rpx;
		right: 38rpx;
		top: 15rpx;
	}

	/deep/ .u-search {
		height: 70rpx;
	}

	/deep/ .u-search__content {
		height: 70rpx !important;
		background-color: #F2F2F2 !important;
	}

	/deep/.u-search__content input {
		background-color: #F2F2F2 !important;
	}

	.positionbox {
		border-top: 1rpx solid #F2F2F2;
		padding-top: 30rpx;
		display: flex;
		justify-content: space-between;
		height: 78vh;
	}

	.positionbox .left {
		width: 230rpx;
		background-color: #F6F6F6;
		border-radius: 10rpx;
		overflow: hidden;
		height: 100%;
		overflow-y: scroll;
	}

	.positionbox .left .left_item {
		width: 230rpx;
		background-color: #F6F6F6;
		height: 80rpx;
		line-height: 80rpx;
		box-sizing: border-box;
		padding: 0 25rpx;
		justify-content: flex-start;
		color: #212121;
		font-size: 30rpx;
		border-radius: 10rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.left_item_active {
		background-color: #fff !important;
	}

	.positionbox .right {
		width: 430rpx;
		display: flex;
		flex-wrap: wrap;
		/*保持自身高度，避免和父级一样的高度*/
		align-self: baseline;
		max-height: 100%;
		overflow-y: scroll;
	}

	.positionbox .right .right_item {
		padding: 16rpx 20rpx;
		box-sizing: border-box;
		width: 47.5%;
		border-radius: 10rpx;
		margin-bottom: 20rpx;
		text-align: center;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #F6F6F6;
		color: #212121;
		font-size: 26rpx;
		margin-right: 20rpx;
		border: 1rpx solid transparent;
	}

	.positionbox .right .right_item:nth-child(2n+2) {
		margin-right: 0;
	}

	.right_item_active {
		color: #3DD790 !important;
		border: 1rpx solid #3DD790 !important;
		background: rgba(61, 215, 144, 0.2) !important;
	}

	.positionBot {
		position: fixed;
		bottom: 0;
		background-color: #fff;
		width: 100%;
		left: 0;
		right: 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 30rpx;
		box-shadow: 0px 17rpx 40rpx 0px rgba(123, 102, 255, 0.22);
	}



	.positionBot .num {
		font-size: 26rpx;
	}

	.positionBot .seleBox {
		display: flex;
		align-items: center;
		white-space: nowrap;
		/* 滚动必须加的属性 */
		width: 63%;
		margin: 0 20rpx;
		box-sizing: border-box;
	}

	.positionBot .seleBox .item {
		border-radius: 20rpx;
		margin-right: 20rpx;
		box-sizing: border-box;
		padding: 10rpx 20rpx;
		font-size: 22rpx;
		color: #3DD790;
		text-align: center;
		background: rgba(61, 215, 144, 0.2);
		display: inline-flex;
		/* item的外层定义成行内元素才可进行滚动 inline-block / inline-flex 均可 */
	}

	.positionBot .seleBox .item text {
		margin-left: 20rpx;
	}

	.submit {
		padding: 10rpx 19rpx;
		font-size: 26rpx;
		border-radius: 30rpx;
		background: #3DD790;
		color: #fff;
	}

	.zanwu {
		text-align: center;
		font-size: 26rpx;
		margin-top: 80rpx;
	}

	.searchAgain {
		padding: 20rpx 30rpx;
		border: 2rpx solid #B6B6B6;
		font-size: 26rpx;
		width: 180rpx;
		margin: auto;
		margin-top: 50rpx;
		color: #333;
		border-radius: 10rpx;
	}
</style>

完成！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1295685.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Qt 5.15.2 三维显示功能

Qt 5.15.2 三维显示功能

Qt 5.15.2 三维显示功能 三维显示效果&#xff1a; .pro项目文件 QT core gui opengl 3dcore 3drender 3dinput 3dextrasgreaterThan(QT_MAJOR_VERSION, 4): QT widgetsCONFIG c17# You can make your code fail to compile if it uses deprecated APIs. # In ord…
阅读更多...
“我要报名”参观双十二外贸电商节，报名方式都在这！

“我要报名”参观双十二外贸电商节，报名方式都在这！

双十二外贸电商节深圳进出口贸易博览会 2023年12月11-12日 深圳福田会展中心 近1万方展览面积 30000专业观众 跨境选品 外贸采购 行业趋势 人才对接 ▼▼▼▼ 展会时间 2023年12月11日-12日 展会地点 深圳福田会展中心 双十二外贸电商节暨2023深圳进出口贸易博览会选…
阅读更多...
更多内窥镜维修技能学习与交流可关注西安彩虹

更多内窥镜维修技能学习与交流可关注西安彩虹

内窥镜结构及光学成像原理 众多品牌的硬镜其内部结构基本相似&#xff08;如下图&#xff09;&#xff0c;最关键的在于不同用途的硬镜在其结构上发生变化&#xff0c;包括光学成像系统和机械结构。光学成像系统由物镜系统、转像系统、目镜系统三大系统组成。 工作原理 被观察…
阅读更多...
发布“最强”AI大模型，股价大涨，吊打GPT4的谷歌股票值得投资吗？

发布“最强”AI大模型，股价大涨，吊打GPT4的谷歌股票值得投资吗？

来源&#xff1a;猛兽财经 作者&#xff1a;猛兽财经 谷歌在AI领域的最新进展&#xff0c;引发投资者关注 在谷歌-C(GOOGL)谷歌-A&#xff08;GOOG&#xff09;昨日发布了最新的AI大模型Gemini后&#xff0c;其股价就出现了大幅上涨&#xff0c;更是引发了投资者的密切关注&a…
阅读更多...
将输入的字符串反向输出(c语言)

将输入的字符串反向输出(c语言)

#include<stdio.h> #include<string.h> int main() {int i, j, k;char s[50], temp;gets(s);//输入k strlen(s);//计算字符的长度//反向输出for (i 0, j k - 1;i < k / 2;i, j--){temp s[i];s[i] s[j];s[j] temp;}puts(s);//输出 }
阅读更多...
Ubuntu22.04安装和卸载软件的命令行

Ubuntu22.04安装和卸载软件的命令行

一、安装 sudo apt install xxx 二、卸载 sudo apt remove xxx 三、卸载依赖包(可选) 第二步软件卸载之后&#xff0c;有一些依赖包没有被卸载。可以使用sudo apt autoremove xxx来卸载。如果不卸载应该也没什么影响
阅读更多...
数据结构线性表-栈和队列的实现

数据结构线性表-栈和队列的实现

1. 栈(Stack) 1.1 概念 栈&#xff1a;一种特殊的线性表&#xff0c;其只允许在固定的一端进行插入和删除元素操作。进行数据插入和删除操作的一端称为栈 顶&#xff0c;另一端称为栈底。栈中的数据元素遵守后进先出LIFO&#xff08;Last In First Out&#xff09;的原则。 …
阅读更多...
周星驰 互联网3.0 团队下个月将上线独立 App

周星驰 互联网3.0 团队下个月将上线独立 App

2023年12月7日&#xff0c;新浪科技报道指出&#xff0c;周星驰旗下的互联网3.0团队透露&#xff0c;Moonbox&#xff0c;这家周星驰创立的互联网3.0初创公司&#xff0c;计划在明年1月份完成Moonbox App的上线&#xff0c;届时该应用将免费向用户提供服务。 目前&#xff0c;…
阅读更多...
进制 + 原码，反码，补码

进制 + 原码，反码，补码

进制转换 整数部分 小数部分 原码 反码 补码 原码转补码&#xff1a; 左边和右边第一个1不变&#xff0c;中间取反。-0 除外。 计算机系统中数值一律用补码来存储的原因 其他 术语 进制表 进制数的表示 详细教程可转 爱编程的大丙
阅读更多...
GEE：不同方向的线性检测算子

GEE：不同方向的线性检测算子

作者：CSDN @ _养乐多_ 本文将介绍在 Google Earth Engine（GEE）平台上，使用不同方向的线性检测算子进行卷积操作的代码框架、核心函数和多种卷积核，比如 E-W、NE-SW、N-S、NW-SE 方向检测算子等。 结果如下图所示， 文章目录 一、定向检测算子二、完整代码三、代码链接一…
阅读更多...
机器人纯阻抗控制接触刚性环境

机器人纯阻抗控制接触刚性环境

问题描述 在机器人学中&#xff0c;阻抗控制是一种常用的控制策略&#xff0c;用于管理机器人在与环境交互时的运动和力。阻抗控制背后的关键概念是将环境视为导纳&#xff0c;而将机器人视为阻抗。 纯阻抗控制接触刚性环境时&#xff0c;机器人的行为方式主要受其阻抗参数的…
阅读更多...
MeteoInfo-Java解析与绘图教程

MeteoInfo-Java解析与绘图教程

MeteoInfo-Java解析与绘图教程(四) 上文我们说到,将地图叠加在色斑图上,但大部分都是卫星绘图,现在开始讲解micaps数据绘图,同样也是更多自定义 配置 首先我们解析micaps数据,将之前学到的东西拿过来绘图 MeteoDataInfo meteoDataInfo new MeteoDataInfo(); meteoDataInfo.o…
阅读更多...
机器学习---集成学习的初步理解

机器学习---集成学习的初步理解

1. 集成学习 集成学习(ensemble learning)是现在非常火爆的机器学习方法。它本身不是一个单独的机器学 习算法&#xff0c;而是通过构建并结合多个机器学习器来完成学习任务。也就是我们常说的“博采众长”。集 成学习可以用于分类问题集成&#xff0c;回归问题集成&#xff…
阅读更多...
luceda ipkiss教程 43：画渐变圆弧型波导

luceda ipkiss教程 43：画渐变圆弧型波导

案例分享&#xff1a; from si_fab import all as pdk import ipkiss3.all as i3 from ipcore.properties.restrictions import RestrictTuple from ipkiss.geometry.shapes.modifiers import __ShapePathBase__ import numpy as np from math import atan2class ShapePathTa…
阅读更多...
spring boot整合mybatis进行部门管理管理的增删改查

spring boot整合mybatis进行部门管理管理的增删改查

部门列表查询&#xff1a; 功能实现&#xff1a; 需求&#xff1a;查询数据库表中的所有部门数据&#xff0c;展示在页面上。 准备工作&#xff1a; 准备数据库表dept&#xff08;部门表&#xff09;&#xff0c;实体类Dept。在项目中引入mybatis的起步依赖&#xff0c;mysql的…
阅读更多...
【ArcGIS Pro微课1000例】0052：基于SQL Server创建企业级地理数据库案例

【ArcGIS Pro微课1000例】0052：基于SQL Server创建企业级地理数据库案例

文章目录 环境搭建创建企业级数据库连接企业级数据库环境搭建 ArcGIS：ArcGIS Pro 3.0.1Server.ecp：版本为10.7SQL Server：版本为SQL Server Developer 2019创建企业级数据库 企业级地理数据库的创建需要通过工具箱来实现。工具位于：数据管理工具→地理数据库管理→创建企业…
阅读更多...
20 套监控平台统一成 1 套 Flashcat，国泰君安监控选型提效之路

20 套监控平台统一成 1 套 Flashcat，国泰君安监控选型提效之路

author:宋庆羽-国泰君安期货 运维工作最重要的就是维护系统的稳定性&#xff0c;其中监控是保证系统稳定性很重要的一环。通过监控可以了解系统的运行状态&#xff0c;及时发现问题和系统隐患&#xff0c;有助于一线人员快速解决问题&#xff0c;提高业务系统的可用时长。 作为…
阅读更多...
C#网络编程（System.Net命名空间）

C#网络编程（System.Net命名空间）

目录 一、System.Net命名空间 1.Dns类 &#xff08;1&#xff09;示例源码 &#xff08;2&#xff09;生成效果 2.IPAddress类 &#xff08;1&#xff09;示例源码 &#xff08;2&#xff09;生成效果 3.IPEndPoint类 &#xff08;1&#xff09; 示例源码 &#xff0…
阅读更多...
中东电商指南分享！盘点中东四大跨境电商平台

中东电商指南分享！盘点中东四大跨境电商平台

提到跨境电商新蓝海&#xff0c;就不得不想起土豪聚集地 ——中东&#xff0c;中东地区拥有庞大的人口、高人均GDP、强大的消费能力以及广泛普及的互联网&#xff0c;但外出购物却相对不便&#xff0c;正是这一特点为中东跨境电商市场创造了巨大的优势。随着中东地区电商的崛起…
阅读更多...
excel做预测的方法集合

excel做预测的方法集合

一. LINEST函数 首先&#xff0c;一元线性回归的方程&#xff1a; y a bx 相应的&#xff0c;多元线性回归方程式&#xff1a; y a b1x1 b2x2 … bnxn 这里&#xff1a; y - 因变量即预测值x - 自变量a - 截距b - 斜率 LINEST的可以返回回归方程的 截距(a) 和 斜…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023