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

一、需求

该页面实现的功能有：

  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.mfbz.cn/a/238210.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

AI数字人在tiktok平台开播教程！

AI数字人在tiktok平台开播教程！

AI数字人作为一种虚拟形象的代表&#xff0c;正在逐渐走进人们的生活。在小红书这样的短视频平台上&#xff0c;AI数字人也有机会开展直播活动&#xff0c;展示自己的个性魅力&#xff0c;也可以进行直播带货&#xff01; 数字人在淘宝购物平台开播原理 &#xff08;1&#xff…
阅读更多...
[UNILM]论文实现：Unified Language Model Pre-training for Natural Language.........

[UNILM]论文实现：Unified Language Model Pre-training for Natural Language.........

文章目录 一、完整代码二、论文解读2.1 介绍2.2 架构2.3 输入端2.4 结果 三、过程实现四、整体总结 论文&#xff1a;Unified Language Model Pre-training for Natural Language Understanding and Generation 作者&#xff1a;Li Dong, Nan Yang, Wenhui Wang, Furu Wei, Xia…
阅读更多...
【docker】容器使用（Nginx 示例）

【docker】容器使用（Nginx 示例）

查看 Docker 客户端命令选项 docker上面这三张图都是 常用命令&#xff1a; run 从映像创建并运行新容器exec 在运行的容器中执行命令ps 列出容器build 从Dockerfile构建映像pull 从注册表下载图像push 将图像上载到注册表…
阅读更多...
深度学习 Day10——T10数据增强

深度学习 Day10——T10数据增强

&#x1f368; 本文为&#x1f517;365天深度学习训练营 中的学习记录博客&#x1f356; 原作者&#xff1a;K同学啊 | 接辅导、项目定制 文章目录 前言一、我的环境二、代码实现与执行结果1.引入库2.设置GPU&#xff08;如果使用的是CPU可以忽略这步&#xff09;3.导入数据4.查…
阅读更多...
Vue3-05-计算属性使用详解

Vue3-05-计算属性使用详解

计算属性简介 计算属性的函数是 computed()。计算属性可以帮助我们处理有复杂逻辑的响应式数据的渲染&#xff0c; 从而代替 模板表达式 的写法。比如 &#xff1a; 一个数值类型的数组对象&#xff0c;我们希望页面展示的只有 偶数。 此时&#xff0c;就可以通过 计算属性 来…
阅读更多...
美食大赛的题解

美食大赛的题解

目录 原题描述&#xff1a; 题目描述&#xff1a; 输入格式&#xff1a; 输出格式&#xff1a; 样例输入&#xff1a; 样例输出&#xff1a; 数据规模&#xff1a; 题目大意&#xff1a; 主要思路&#xff1a; 注&#xff1a; 代码&#xff1a; 原题描述&#xff1a…
阅读更多...
家具制造ERP软件包含哪些功能?家具制造业ERP系统哪个好

家具制造ERP软件包含哪些功能?家具制造业ERP系统哪个好

不同的家具有不同的用料、品质、制造工时、营销渠道等&#xff0c;而有些家具制造企业采用传统的管理方式在处理物料BOM、生产实际成本核算、库存盘点、供应商选择、班组计件核对、生产领用以及物料追溯等方面存在不少提升空间。 与此同时也有很多的皮具制造企业借助ERP软件优…
阅读更多...
Qt的坐标系系统 - 3个坐标系，2个变换

Qt的坐标系系统 - 3个坐标系，2个变换

参考&#xff1a; https://zhuanlan.zhihu.com/p/584048811https://www.zhihu.com/tardis/zm/art/634951149?source_id1005 小谈Qt的坐标系系统 Qt中有三个坐标系 设备坐标系窗口坐标系逻辑坐标系 设备坐标系: 即Device坐标系。也是物理坐标系。即真实的的物理坐标系。 …
阅读更多...
[IDEA] 写代码时没有类型推断的解决方法

[IDEA] 写代码时没有类型推断的解决方法

本示例使用scala, 其他语言同理 使用 .var 时会自动生成变量 使用快捷键 CtrlAtlv 一样 val abc "abc"但是这个变量没有显式表现类型 期望 val abc: String "abc" 解决方法
阅读更多...
python自动化运维快速入门,python自动化运维教程

python自动化运维快速入门,python自动化运维教程

大家好&#xff0c;给大家分享一下python自动化运维需要掌握的技能&#xff0c;很多人还不知道这一点。下面详细解释一下。现在让我们来看看&#xff01; 面向学员 熟练使用计算机&#xff0c;对Windows、Linux 有一点了解从业职或在校学生 对目前从事互联网运维&#xff0c;想…
阅读更多...
23种设计模式之模板方法模式(模板模式)

23种设计模式之模板方法模式(模板模式)

23种设计模式之模板方法模式(模板模式) 文章目录 23种设计模式之模板方法模式(模板模式)设计思想模板方法的优缺点模板方法模式的缺点代码解析小结 设计思想 原文:定义一个操作中的算法的骨架&#xff0c;而将一些步骤延迟到子类中。模板方法使得子类可以不改变一个算法的结构…
阅读更多...
网络基础（五）：网络层协议介绍

网络基础（五）：网络层协议介绍

目录 一、网络层 1、网络层的概念 2、网络层功能 3、IP数据包格式 二、ICMP协议 1、ICMP的作用和功能 2、ping命令的使用 2.1ping命令的通用格式 2.2ping命令的常用参数 2.3TypeCode&#xff1a;查看不同功能的ICMP报文 2.4ping出现问题 3、Tracert 4、冲突域 5、…
阅读更多...
2024年骨传导蓝牙耳机排行榜前十，骨传导耳机品牌排行榜推荐

2024年骨传导蓝牙耳机排行榜前十，骨传导耳机品牌排行榜推荐

2024年骨传导蓝牙耳机排行榜前十&#xff0c;骨传导耳机品牌排行榜推荐 随着科技的飞速发展&#xff0c;骨传导蓝牙耳机已经成为了市场上备受欢迎的音频设备。这种神奇的耳机通过骨头传递声音&#xff0c;让你在享受音乐的同时&#xff0c;还能听到周围的环境&#xff0c;为你…
阅读更多...
【触想智能】工业显示器的日常维护及分类知识分享

【触想智能】工业显示器的日常维护及分类知识分享

工业显示器不同于普通商业显示器&#xff0c;它的结构比较复杂&#xff0c;如果在使用的过程中出现产品故障&#xff0c;我们怎么处理呢?今天小编为大家介绍工业显示器日常维护以及分类方面的知识&#xff0c;希望对大家有所帮助。 1、 工业显示器整机无电。这其实是一个非常简…
阅读更多...
class077 区间dp-下【算法】

class077 区间dp-下【算法】

class077 区间dp-下【算法】 算法讲解077【必备】区间dp-下 code1 括号区间匹配 // 完成配对需要的最少字符数量 // 给定一个由’[‘、’]‘、’(‘&#xff0c;’)‘组成的字符串 // 请问最少插入多少个括号就能使这个字符串的所有括号正确配对 // 例如当前串是 “([[])”&a…
阅读更多...
python——第十七天

python——第十七天

方法重写(overwrite) 、方法覆盖(override )&#xff1a;在继承的基础上&#xff0c;子类继承了父类的方法&#xff0c;如果不能满足自己使用&#xff0c;我们就可以重写或覆盖该方法 函数重载(overload)&#xff1a; 在强数据类型的编程语言中(如Java、C、C等等): 函数名称…
阅读更多...
C语言常用字符串

C语言常用字符串

目录 1.什么是字符串 2.如何定义字符串 第3和第4定义的区别&#xff1a;3是字符串变量&#xff0c;4是字符串常量&#xff0c;不予许被修改 3.strlen和sizeof的区别 4.地址分配&#xff08;malloc,realloc,free,memset&#xff09; 案例 5.字符串拷贝(strcpy,strncpy) …
阅读更多...
【每日一题】【12.11】1631.最小体力消耗路径

【每日一题】【12.11】1631.最小体力消耗路径

&#x1f525;博客主页&#xff1a; A_SHOWY&#x1f3a5;系列专栏&#xff1a;力扣刷题总结录 数据结构 云计算 数字图像处理 1631. 最小体力消耗路径https://leetcode.cn/problems/path-with-minimum-effort/这道题目的核心思路是&#xff1a;使用了二分查找和BFS &a…
阅读更多...
【NR技术】NR NG-RAN整体架构 -网络接口以及无线协议框架（四）

【NR技术】NR NG-RAN整体架构 -网络接口以及无线协议框架（四）

1 引言 本博文介绍NR NG-RAN的网络节点间的接口以及无线协议框架。网络接口介绍包括RAN和NGC之间的NG接口&#xff1b;无线协议框架包括用户面和控制面协议。 2 NG接口 2.1 NG用户面接口 NG-U (user plane interface)是NG-RAN节点与UPF之间的接口。NG接口的用户平面协议栈如图…
阅读更多...
1688以图搜图调用商品详情的API接口功能实现【附详细代码教程】

1688以图搜图调用商品详情的API接口功能实现【附详细代码教程】

背景 在1688有个功能&#xff0c;就是上传图片&#xff0c;就可以找到类似的商品。如下 网址 &#xff1a;https://www.1688.com/ 这时候&#xff0c;我们可以使用程序来代替&#xff0c;大批量的完成图片上传功能。 实现思路 1、找到图片上传接口 post请求&#xff0c;for…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站