效果图

一. 创建选择类型的子页面

选中数据后,返回上一页,使用uni.$emit传递数据

<template>
	<view class="industryType"> 
		<view class="searchBox">
			<view class="search">
				<u-search v-model="searchVal" placeholder="请输入搜索信息" @change="handleSearch" @custom="searchVal=''"
					:showAction="!!searchVal" actionText="取消" :clearabled="false"></u-search>
			</view>
		</view>
		<ul class="list">
			<li class="item" v-for="(item,index) in list" :key="index" @click="back(item)">
				{{item.name}}
				<u-icon v-if="id == item.id" name="checkbox-mark" color="#41a863" size="28"></u-icon>
			</li>
		</ul>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: '',
				searchVal: "",
				dataList: [{
						"id": 12,
						"name": "专业服务"
					},
					{
						"id": 23,
						"name": "办公"
					},
					{
						"id": 22,
						"name": "体育"
					},
					{
						"id": 21,
						"name": "包装"
					},
					{
						"id": 20,
						"name": "物资"
					},
					{
						"id": 19,
						"name": "家居用品"
					},
					{
						"id": 18,
						"name": "玩具礼品"
					},
					{
						"id": 17,
						"name": "电子电工"
					},
					{
						"id": 16,
						"name": "办公文教"
					},
					{
						"id": 15,
						"name": "旅游休闲"
					},
					{
						"id": 14,
						"name": "环保绿化"
					},
					{
						"id": 13,
						"name": "安全防护"
					},
					{
						"id": 1,
						"name": "机构组织"
					},
					{
						"id": 11,
						"name": "服装纺织"
					},
					{
						"id": 10,
						"name": "轻工食品"
					},
					{
						"id": 9,
						"name": "机械机电"
					},
					{
						"id": 8,
						"name": "信息产业"
					},
					{
						"id": 7,
						"name": "交通运输"
					},
					{
						"id": 6,
						"name": "水利水电"
					},
					{
						"id": 5,
						"name": "石油化工"
					},
					{
						"id": 4,
						"name": "冶金矿产"
					},
					{
						"id": 3,
						"name": "建筑建材"
					},
					{
						"id": 2,
						"name": "农林牧渔"
					}
				],
				list: []
			}
		},
		onLoad(options) {
			this.id = options.id
			this.list = this.dataList;
		},
		methods: {
			handleSearch(val) {
				this.searchVal = val
				if (!this.searchVal) {
					//this.data是下拉框显示的内容,如果为空就展示全部数据
					this.list = this.dataList
					//否则执行下面内容dataa
				} else {
					//先清空展示的数据
					this.list = []
					//然后开始循环全部数据
					for (let i = 0; i < this.dataList.length; i++) {
						//判断数据里面是否有符合输入的内容  不符合返回-1 只需要大于或等于0就是符合
						//(核心所在,其它都是根据需求来自己写)
						let item = this.dataList[i]
						if (item.name.includes(this.searchVal)) {
							//然后把它丢进要展示的数组里面
							this.list.push(item)
						}
					}
				}
			},
			back(item) {
				uni.navigateBack({
					delta: 1, //返回层数,2则上上页
				})
				setTimeout(() => {
					// 返回上一页传递数据
					uni.$emit('selectData', item)
				}, 100)
			}
		}
	}
</script>

<style scoped lang="scss">
	.industryType {
		padding-top: 150rpx;

		.searchBox {
			position: fixed;
			top: 0;
			/* #ifdef H5 */
			top: 44px;
			/* #endif */
			left: 0;
			width: 100%;
			z-index: 9999;
			background-color: #f5f5f5;
			padding-bottom: 15rpx;

			.search {
				background-color: #fff;
				padding: 20rpx;

				::v-deep .u-search__content__input {
					height: 75rpx !important;
				}
			}
		}

		.list {
			border-top: 1px solid #eee;

			.item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 100rpx;
				line-height: 100rpx;
				padding: 0 30rpx;
				border-bottom: 1px solid #eee;
			}
		}
	}
</style>

二. 在父页面接收选中的数据 

onShow() {
	uni.$on('selectData', (_data) => {
		console.log("_dsta=", _data);
		uni.$off('selectData')
	})
},

更多推荐