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"><inputtype="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=Listthis.filterList = Listthis.index=index},//设备类别滚动bindChange(e){console.log(e,'22222222')const val = e.detail.valuelet 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].namethis.$emit('click', add)}else{if(this.date==''){add = this.array1[0].namethis.$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里过滤掉filterTextthis.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=indexthis.titles=titlesthis.hints=hints// let add = this.array1this.$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>

这里是示例

uni-app选择带搜索与简单的筛选相关推荐

uni app 手机端导航栏自定义
uni app 手机端导航栏自定义第一步:明确顶部导航栏的构成(手机自带的顶部菜单+开发的顶部菜单栏) 获取手机自带的顶部导航栏 <view class="navigation_ba ...
Android UI（五）云通讯录项目之联系人列表，带侧滑选择，带搜索框
作者:泥沙砖瓦浆木匠网站:http://blog.csdn.net/jeffli1993 个人签名:打算起手不凡写出鸿篇巨作的人,往往坚持不了完成第一章节. 交流QQ群:[编程之美 36523458 ...
json 微信小程序筛选_GitHub - zhengyangkang/sl-filter: uni -app 一款使用简单的筛选组件，适配app、微信小程序、H5。...
sl-filter 筛选筛选组件,组件名:sl-filter dcloud插件市场地址 sl-filter 简介一款使用简单的筛选组件,适配app.微信小程序.H5. 感谢分享效果图并列菜单 ...
Vue 仿Transfer 穿梭框功能实现人员选择,左侧备选列表,右侧已选列表,带搜索带备注项
老规矩,先上效果图设计出来的东西,非说element组件库穿梭框就有 , 扯犊子, 人名下面的手机号怎么加md- 还得靠自己实现 , 真操蛋啊- 左右侧数据带搜索,前端本地实现搜索功能后台接口对接 ...
HbuilderX:uni app踩坑之uView-ui
HbuilderX:uni app踩坑之uView-ui 最近在自学uniapp,想找一个ui框架提高一下学习和开发的效率,于是就网上冲浪,浪来浪去,最后选择了uView-ui这款.其实有些框架我是有 ...
uni app 开发微信小程序及上线体验
uni app 开发微信小程序及上线体验项目创建及微信小程序AppId的申请本次开发的是电商类的微信小程序,这里用到的是HBuilderX这个编辑器.之前用的Visual Studio Code ...
app里的“搜索提示“是如何实现的？
用程序员的角度科普生活知识 hello 兄弟们我是浩说今天研究个什么事儿呢? 咱就是说:我们在浏览器或者app里搜索的时候为什么我只输入了一两个字,下面就已经给我罗列出来我想搜的具体内容了这是 ...
Windows 10 系统自带搜索功能详解
原标题:在 Windows 10 上高效搜文件,自带搜索功能其实就够了快速搜索和效率启动,是大多数用户的刚需,为此也诞生了一大波启动器应用,如 macOS 平台的 Alfred.LaunchBar, ...
uni app页面传值
传值是很常见的知识点,刚开始接触uni app总会踩到很多传值的坑,不是这里传不过去,就是那边接收不到,以下是我遇到过的一些传值方式,实在不行,咱就一个一个试,总有一个能"干起". ...

uni-app选择带搜索与简单的筛选

uni-app选择带搜索与简单的筛选，

可能有点问题，大家根据自己的需求去更改

这里是示例

uni-app选择带搜索与简单的筛选相关推荐

最新文章

热门文章