uni-app选择带搜索与简单的筛选
【代码】uni-app选择带搜索与简单的筛选。
·
uni-app选择带搜索与简单的筛选，
可能有点问题，大家根据自己的需求去更改
<template>
<view>
<uni-popup ref="chooseUnit" type="bottom">
<view class="backcolorb">
<view class="title-content">
<view class="company-pup-title">
<view class="flex-row-bw flex-row-vcenter py-30 px-24">
<view class="color-999 font-16 font-w-400 companyCancel" @click="closechooseUnit(1)">
取消
</view>
<view class="color-333 font-18 font-w-500">
{{title}}
</view>
<view class="companyCancel font-16 font-w-400 color-hz flex-row-end" @click="closechooseUnit(2)">
确定
</view>
</view>
</view>
</view>
<view class="" style="height: 108rpx;">
</view>
<view class=" border-top py-30 px-30 input-content zindex-2" >
<view class="addCompany flex-row-vcenter">
<input
type="text"
class="font-14 pl-20 w100"
placeholder-class="hz-ipt-placeholder"
:placeholder="hint"
@confirm="addCompany"
v-model="factory"
focus
@input="entering"
/>
</view>
</view>
<view class="picker-view-app">
<picker-view indicator-class="picker-view-select-line" @change="bindChange" class="picker-view">
<picker-view-column>
<view class="picker-item flex-row-vcenter flex-row-rcenter" v-for="(item,index) in filterList" :key="index">{{item.name}}</view>
</picker-view-column>
</picker-view>
</view>
</view>
</uni-popup>
</view>
</template>
<script>
export default {
name:"nqiCalibratApply-picker",
props: {
title: {
type: String,
default: "请选择"
},
hint: {
type: String,
default: "请选择"
},
},
data() {
return {
array1:[],//源数据
filterList:[],//筛选
date:'',//选择的数据
factory:'',//用来清空输入框
index:0,
filterText: '',
};
},
methods:{
//打开弹窗
openChooseUnit(List,index) {
console.log(1234)
console.log(List)
this.$refs.chooseUnit.open()
this.array1=List
this.filterList = List
this.index=index
},
//设备类别滚动
bindChange(e){
console.log(e,'22222222')
const val = e.detail.value
let add = this.filterList[val[0]]
console.log(add,'12321312')
this.date=add.name
},
//设备类别取消 确定
closechooseUnit(e){
let add = ''
if(e==1){
this.date=''
add = this.array1[0].name
this.$emit('click', add)
}else{
if(this.date==''){
add = this.array1[0].name
this.$emit('click', add)
}else{
add = this.date
}
console.log(add,'add')
this.$emit('click', add)
}
this.array1=[]
this.filterList=[],
this.date='',//选择的数据
this.factory='',//用来清空输入框
this.$refs.chooseUnit.close()
},
//点击键盘完成按钮时触发
addCompany(e){
console.log(e.detail.value)
if(e.detail.value!=''){
this.factory=e.detail.value
}
},
//输入中
entering(e){
console.log(e.detail.value)
let add = this.array1//源数据
var arr = [] //定义一个空数组
this.filterList.forEach((item) => arr.push(item)) //在filterList查找数据放入空数组
if (e.detail.value) { //如果有这个数据
arr = add.filter(item => item.name.includes(e.detail.value))
//则在filterList里过滤掉filterText
this.filterList=arr
}else{
this.filterList = add
}
console.log(arr)
},
}
}
</script>
<style lang="scss" scoped>
@import "./common.scss";
.backcolorb{
background: #fff;
}
.zindex-2{
z-index: 2;
}
.title-content{
position: relative;
background: #fff;
}
.input-content{
position: relative;
background: #fff;
}
.picker-view-app{
position: fixed;
top: 130rpx;
width: 100%;
height: 500rpx;
z-index: 1;
// margin-top: -250rpx;
}
.picker-view {
width: 100%;
height: 100%;
background: #fff;
// height: 600rpx;
// padding-top: -180rpx;
}
.company-pup-title{
position: fixed;
width: 100%;
background: #fff;
}
.companyCancel{
width: 33.3%;
height:48rpx ;
}
.picker-item {
// height: 48rpx;
// line-height: 48rpx;
// align-items: center;
// justify-content: center;
font-size: 32rpx;
font-weight: 400;
color: #333333;
text-align: center;
}
.addCompany{
background:#fafafa ;
border-radius: 32rpx;
height:64rpx ;
}
</style>
<style scoped lang="scss">
.color-fff{color: #fff;}
.color-333{color: #333;}
.color-999{color: #999999;}
.color-666{color: #666666;}
.color-000{color: #000;}
.color-hz{color: #2b69ff !important;}
.color-8c{color: #8c8c8c;}
.font-18{font-size: 36rpx;}
.font-16{font-size: 32rpx;}
.font-14{font-size: 28rpx;}
.font-12{font-size: 24rpx;}
.font-w-500{font-weight: 500;}
.font-w-400{font-weight: 400;}
.font-w-300{font-weight: 300;}
.font-w-blod{font-weight: bold;}
.width50-100{width: 50%;}
.border-bot{border-bottom: 2rpx solid rgb(232, 232, 232);}
.border-top{border-top: 2rpx solid rgb(232, 232, 232);}
.width60-100{width: 60%;}
.flex-algitem-end{display: flex;align-items:flex-end;}
.card{background: #fff;border-radius:10rpx;}
</style>
上面是子组件
下面是父组件
这里是调用传参
<view class="" @click="openChooseUnit(transformerList,'请选择原理','请输入内容',6)">
{{formData.transformerValue==''?transformerList[0].name:formData.transformerValue}}
<span class="ml-10">></span>
</view>
这里是引用
<nqiCalibratApply-picker
@click="clickPicker"
:title="titles"
:hint="hints"
ref="nqiCalibratApplypicker"
>
</nqiCalibratApply-picker>
这里是操作
//打开选择器弹窗
openChooseUnit(List,titles,hints,index) {
console.log(1234)
this.popupwindow=index
this.titles=titles
this.hints=hints
// let add = this.array1
this.$refs.nqiCalibratApplypicker.openChooseUnit(List)
// this.$refs.chooseUnit.open()
},
clickPicker(item){
console.log(item)
if(this.popupwindow==1){
this.formData.voltCode=item
}else if(this.popupwindow==2){
this.formData.levela = item
}else if(this.popupwindow==3){
this.formData.changeValue = item
}else if(this.popupwindow==4){
this.formData.accuracyValue = item
}else if(this.popupwindow==5){
this.formData.connectionValue = item
}else if(this.popupwindow==6){
this.formData.transformerValue = item
}else{
this.formData.insulationValue = item
}
}
这是引用的css文件 是scss
.page{
background-color: #f4f6f6;
}
.input{
font-size: 32rpx;
font-family: Source Han Sans CN,sans-serif;
font-weight: 400;
}
.uni-input-placeholder,
.hz-ipt-placeholder
{
color: $hz-color-gray !important;
}
.radius-round{
border-radius: 50%;
}
.w100{
width: 100%;
}
.h100{
height: 100%;
}
.hz-card{
background-color: #fff;
border-radius: 32rpx;
}
// .border{
// border: 1rpx solid $hz-border-gray;
// }
// .border-botttom{
// border-bottom: 1rpx solid $hz-border-gray;
// }
// .border-top{
// border-top: 1rpx solid $hz-border-gray;
// }
.text-line-1{
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
}
.text-line-2{
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
.hz-form-item-text{
font-size: 32rpx;
color: #666666;
}
.overflow-hidden{
overflow: hidden;
}
.font-28{
font-size: 28rpx;
}
// // 颜色工具类
// $colors: (
// green: $hz-color-green,
// primary: $hz-color-primary,
// white: $hz-color-white,
// black: $hz-color-black,
// gray: $hz-color-gray,
// required: $hz-color-required,
// f4f4f4: $hz-color-f4f4f4,
// );
// @each $colorKey, $color in $colors {
// .text-#{$colorKey} {
// color: $color;
// }
// .bg-#{$colorKey} {
// background-color: $color;
// }
// }
// 定位
$positions:(
absolute:absolute,
relative:relative,
fixed:fixed
);
@each $positionKey, $position in $positions {
.position-#{$positionKey} {
position: $position;
}
}
// 间距
@for $i from 0 to 1500 {
.p-#{$i}{
padding-left: $i + rpx;
padding-right: $i+ rpx;
padding-top: $i+ rpx;
padding-bottom: $i+ rpx;
}
.px-#{$i}{
padding-left: $i + rpx;
padding-right: $i+ rpx;
}
.py-#{$i}{
padding-top: $i+ rpx;
padding-bottom: $i+ rpx;
}
.pl-#{$i}{
padding-left: $i+ rpx;
}
.pr-#{$i}{
padding-right: $i+ rpx;
}
.pt-#{$i}{
padding-top: $i+ rpx;
}
.pb-#{$i}{
padding-bottom: $i+ rpx;
}
.m-#{$i}{
margin-left: $i + rpx;
margin-right: $i+ rpx;
margin-top: $i+ rpx;
margin-bottom: $i+ rpx;
}
.mx-#{$i}{
margin-left: $i + rpx;
margin-right: $i+ rpx;
}
.my-#{$i}{
margin-top: $i+ rpx;
margin-bottom: $i+ rpx;
}
.ml-#{$i}{
margin-left: $i+ rpx;
}
.mr-#{$i}{
margin-right: $i+ rpx;
}
.mt-#{$i}{
margin-top: $i+ rpx;
}
.mb-#{$i}{
margin-bottom: $i+ rpx;
}
}
// .pb-tabbar{
// padding-bottom: $hz-tabbar-height;
// }
// 文字对齐
$testAligns:(
left:left,
center:center,
right:right
);
@each $testAlignKey, $testAlign in $testAligns {
.text-#{$testAlignKey} {
text-align: $testAlign;
}
}
.flex-row {
display: flex;
}
.flex-row-vcenter {
display: flex;
align-items: center;
}
/* 垂直居中对齐 */
.flex-row-rcenter {
display: flex;
justify-content: center;
}
/* 水平居中对齐 */
.flex-row-c {
display: flex;
align-items: center;
justify-content: center;
}
/* 水平垂直居中对齐 */
.flex-row-bw {
display: flex;
justify-content: space-between;
}
.flex-row-ad {
display: flex;
justify-content: space-around;
}
.flex-wrap {
flex-wrap: wrap;
}
.flex-row-end{
display: flex;
justify-content: flex-end;
}
/* 换行，默认nowrap（不换行）*/
.flex-shrink {
flex-shrink: 0;
}
.flex-col {
display: flex;
flex-direction: column;
}
.flex-col-vcenter {
display: flex;
flex-direction: column;
justify-content: center;
}
/* 纵向布局垂直居中 */
.flex-col-rcenter {
display: flex;
flex-direction: column;
align-items: center;
}
/* 纵向布局水平居中对齐 */
.flex-col-c {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.flex-col-bw {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.flex1-row {
flex: 1;
width: 1px;
}
.flex1-col {
flex: 1;
height: 1px;
}
.flex1 {
flex: 1;
}
/* 单独设置的flex */
.c-flex-col-end{
align-items: flex-end;
}
.c-flex-col-center{
align-items: center;
}
写到父子组件里面的东西
<style scoped lang="scss">
.color-fff{color: #fff;}
.color-333{color: #333;}
.color-999{color: #999999;}
.color-666{color: #666666;}
.color-000{color: #000;}
.color-hz{color: #2b69ff !important;}
.color-8c{color: #8c8c8c;}
.font-18{font-size: 36rpx;}
.font-16{font-size: 32rpx;}
.font-14{font-size: 28rpx;}
.font-12{font-size: 24rpx;}
.font-w-500{font-weight: 500;}
.font-w-400{font-weight: 400;}
.font-w-300{font-weight: 300;}
.font-w-blod{font-weight: bold;}
.width50-100{width: 50%;}
.border-bot{border-bottom: 2rpx solid rgb(232, 232, 232);}
.border-top{border-top: 2rpx solid rgb(232, 232, 232);}
.width60-100{width: 60%;}
.flex-algitem-end{display: flex;align-items:flex-end;}
.card{background: #fff;border-radius:10rpx;}
</style>
**
这里是示例
**
为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。
更多推荐
2
0- 0
已为社区贡献1条内容
所有评论(0)