uniapp在页面选择类型数据+静态模糊查询
·
效果图

一. 创建选择类型的子页面
选中数据后,返回上一页,使用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')
})
},
更多推荐



所有评论(0)