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

最新推荐文章于 2024-01-04 16:52:30 发布
最新推荐文章于 2024-01-04 16:52:30 发布
阅读量1.1k 收藏 3
点赞数 16
分类专栏： uniapp 文章标签： uni-app
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_48596030/article/details/134884038
版权

一、需求

该页面实现的功能有：

  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>

完成！

小跳不会Coding
关注
  • 16
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
uniapp实现菜单左右二级联动
m0_52559388的博客
03-10 1095
uniapp实现菜单左右二级联动
uniapp 二级联动.zip
06-19
项目中开发心得项目中开发心得
uniapp 多级联动（省市区选择）, 选取图片及上传
m0_46978096的博客
06-21 2558
uniapp多级联动（省市区选择）
Uniapp选择用户selelt封装组件，可多选，附带可搜索
zhangxueyou2223的博客
05-25 1555
Uniapp选择用户selelt封装组件，可多选，附带可搜索，移动端APP或H5会经常用到选择器，今天就把他拿出来分享记录了，支持单选，多选，可搜索
uniapp 列表默认选中第一个，点击任意一个选中
m0_60207396的博客
09-30 3387
<view //如果currentIndex等于数组的下标，就显示active这个样式，要不就显示active2 :class="currentIndex== index?'active':'active2'" v-for="(item,index) in tfdList" :key="index" @click="chooseItem(index)" > <view>序号</view> <view>用户名</view> .
uniapp 树形组件、机构选择组件、部门选择组件、递归组件的简单实现。
记录自己的学习和工作心得，欢迎交流。
08-17 1609
uniapp 树形组件、机构选择组件、部门选择组件、递归组件的简单实现。
uniapp选择器,包含一级,二级级联,三级级联uniapp-picker-master.zip
12-17
在"uniapp选择器,包含一级,二级级联,三级级联uniapp-picker-master.zip"这个压缩包中，包含了实现这种级联选择的示例代码。 uni-app是一个多端统一的开发框架，它可以将同一份代码编译到iOS、Android、H5、小程序等...
uniapp-cascader
11-14
本篇文章将聚焦于uniapp的一个特定组件——uniapp-cascader，一个用于实现级联选择功能的强大组件。我们将探讨其核心特性、应用场景以及如何在实际项目中有效利用它。 uniapp-cascader是一个专门为uniapp框架设计的...
uniapp选择器,包含一级,二级级联,三级级联uniapp-picker-master（小程序）
04-10
本项目`uniapp选择器,包含一级,二级级联,三级级联uniapp-picker-master（小程序）`专注于实现一个功能强大的选择器组件，特别适用于需要级联选择的场景，如地区选择、类别筛选等。 `uniapp picker`是uniapp提供的...
翻扑克牌游戏-uniapp-项目源码
10-27
这是一个uniapp项目源码，翻扑克牌游戏，可使用HBuildeX开发工具选uniapp打开项目，正常编译运行，请放心下载。 相关学习参考文章(https://blog.csdn.net/zs1028/article/details/134083333) 在此游戏能学到什么：...
uniapp三级目录选择器.rar
03-25
uniapp，三级目录选择
uniapp-cli:自用uniapp模板，vue-cli创建版本
04-09
【uniapp-cli】是基于Vue.js的前端框架uni-app的命令行工具，它提供了一种快速搭建项目模板的方式，尤其适合跨平台应用开发。通过uniapp-cli，开发者可以利用vue-cli来创建uni-app项目，从而简化项目的初始化过程，...
uni-app 实现的通讯录人名排序功能
票票的博客
01-20 2577
通过 HBuilder X 下载 ColorUI，一款适应于H5、微信小程序、安卓、ios、支付宝的高颜值，高度自定义的Css组件库。页面部分方法来自ColorUI，例如侧边字母滑动。 正确路径引入vue-py.js 文件 百度网盘链接：vue-py 提取码：x8z6 实现代码，样式可根据需求自行调整 <template> <view class="group-members-page-top box-size14"> <uni-search-bar cl..
uniapp完成用户选择做模糊检索
weixin_43936040的博客
01-14 1725
/** * 用户模糊检索组件 * type：控制单选复选，部分用户选择需要复选 * chooseUser：组件按确认后最后返回的值，是一个用户对象数组 */ <template> <view class="user_popup_box"> <u-popup class='popup_box' height='600' v-model="show" mode='bottom'> <!-- 搜索框部分 --> <view class
uniapp二级展开列表
Erin_jwx的博客
10-06 2560
<template> <view class="content"> <view class="position-group"> <!-- 一级循环 --> <view class="pronames_one" v-for="(item,index) in positionlist" :key="index" :class="item.oneliststare?'oneshow':'onehide'"> <view c
uniapp 无限级树形结构面包屑、单选-多选、搜索、移除功能插件，基于【虚拟列表】高性能渲染海量数据，加入动态高度、缓冲区
yrfjygb的博客
01-04 2090
uniapp无限级树形结构组件，支持多选，单选，搜索，无限级面包屑类型导航
uniapp组件之选择选项（如套餐选择）
zhanglinsen123的博客
01-21 1355
实现套餐选择的功能
uniapp实现全选反选和单选功能，无bug
www888www_的博客
09-07 616
<template> <view class="content"> <view class="box"> <view v-for="(val,index) in good" :key='val.id'> <checkbox value="cb" :checked="val.ischecked" color="red" style="transform:scale(0.7)" @click="all(index)" /> .
uniapp路由拦截二级页面方法
学习
06-24 1261
目录结构 uniapp中的拦截器 在 utils 文件夹中，创建 routingIntercercept.js 文件 二、使用拦截器 在 App.vue 文件的 onLaunch 方法中调用
vue/uniapp - 刷新页面
最新发布
04-30
Vue是一种流行的JavaScript框架，用于构建用户界面。它采用了组件化的开发方式，使得开发者可以将页面拆分成多个可复用的组件，从而提高代码的可维护性和重用性。Vue具有响应式的数据绑定机制，可以实时更新页面上的数据，使得开发者可以更加便捷地处理数据和状态的变化。 UniApp是一个基于Vue.js的跨平台开发框架，它可以同时开发iOS、Android、H5等多个平台的应用。使用UniApp，开发者只需要编写一套代码，就可以在不同平台上运行和发布应用。UniApp提供了丰富的组件和API，使得开发者可以快速构建出高质量的跨平台应用。 关于刷新页面，Vue和UniApp都提供了相应的方法来实现页面的刷新。在Vue中，可以使用`location.reload()`方法来刷新页面，该方法会重新加载当前页面。在UniApp中，可以使用`uni.reLaunch()`方法来重新加载当前页面，该方法会关闭当前页面并重新打开。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值