uniapp 实现下拉筛选框 二次开发定制

news2024/12/23 7:00:43

前言

最近又收到了一个需求,需要在uniapp 小程序上做一个下拉筛选框,然后找了一下插件市场,确实有找到,但不过他不支持搜索,于是乎,我就自动动手,进行了二开定制,站在巨人的肩膀上,哈哈哈哈!具体的效果如下:
在这里插入图片描述
视频效果: 链接


一、核心代码

<view class="filter-wrapper"
		:style="{  top: top,'border-top':border?'1rpx solid #f2f2f2':'none', }"
		@touchmove.stop.prevent="discard">
		<view class="inner-wrapper">
			<view class="mask" :class="showMask ? 'show' : 'hide'" @tap="tapMask"></view>
			<view class="navs" :style='{backgroundColor:bgColor}'>
				<view class="c-flex-align" :class="{ 'c-flex-center': index > 0, actNav: index === actNav }"
					v-for="(item, index) in navData" :key="index" @click="navClick(index,item)">
					<view v-for="(child, childx) in item" :key="childx" v-if="child.select"
						:class='[child.text.length>4?"navTextClass":""]'>
						{{ child.text.indexOf('全部')!==-1?child.text.split('全部')[1]:child.text }}
					</view>
					<image src="http://s08dznyms.hd-bkt.clouddn.com/wechat/up.png" mode="" class="icon-triangle"
						v-if="index === actNav ">
					</image>
					<image src="http://s08dznyms.hd-bkt.clouddn.com/wechat/down.png" mode="" class="icon-triangle"
						v-if="index !== actNav ">
					</image>
				</view>
			</view>
			<scroll-view scroll-y="true" class="popup" :class="popupShow ? 'popupShow' : ''">
				<view v-if='!changeType'>
					<!-- 自定义搜索 -->
					<view class='inputClass'>
						<view style='width:75%'>
							<u-input :placeholder="placeHolderName" prefixIcon="search"
								prefixIconStyle="font-size: 22px;color: #909399;color:rgba(36, 107, 183, 1);"
								shape='circle' @change='change' v-model="searchValue">
							</u-input>
						</view>
						<view class='totalClass'><text style='color:rgb(33, 107, 228)'>{{totalNum}}</text></view>
					</view>
					<view v-if='navData[actNav].length>0 ' class="item-opt c-flex-align1"
						:class="item.select ? 'actOpt' : ''" v-for="(item, index) in navData[actNav]" :key="index"
						@click="handleOpt(index,item)">
						{{ item.text }}
					</view>
					<view v-if='result.length===0' class='noDataClass'> 暂无数据 </view>
				</view>
				
			</scroll-view>
		</view>
	</view>

二、js 部分部分

changeData(index, data) {
				this.$set(this.navData, index, data)
				console.log(this.navData)
				this.selIndex = this.defaultIndex;
				this.keepStatus('init');
			},
			change(e) {
				console.log(this.copyNavData[this.actNav][0].text)
				this.result = this.copyNavData[this.actNav].filter(item => item.text.indexOf(e) !== -1)
				this.$set(this.navData, this.actNav, this.result)
				setTimeout(() => {
					this.totalNum = this.navData[this.actNav].length
				}, 200)
			},
			keepStatus(type) {
				if (type === 'init') {
					this.navData.forEach(itemnavData => {
						itemnavData.map(child => {
							child.select = false;
						});
						return itemnavData;
					});
					for (let i = 0; i < this.selIndex.length; i++) {
						let selindex = this.selIndex[i];
						this.navData[i][selindex].select = true;
					}
					this.copyNavData = JSON.parse(JSON.stringify(this.navData));
				} else {
					this.copyNavData.forEach(itemnavData => {
						itemnavData.map(child => {
							child.select = false;
						});
						return itemnavData;
					});
					for (let i = 0; i < this.selIndex.length; i++) {
						let selindex = this.selIndex[i];
						this.copyNavData[i][selindex].select = true;
					}
				}
				console.log(this.copyNavData)
			},

总结

总体来说,进行二次开发的难度不大,关键是需要看的懂代码,然后进行二次开发就不难了!!!

如果需要完整的demo 代码,请联系1015095073@qq.com

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1051404.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

asp.net core mvc 文件上传,下载,预览

//文件上传用到了IformFile接口 1.1文件上传视图 <form action"/stu/upload" method"post" enctype"multipart/form-data"><input type"file" name"img" /><input type"submit" value"上传&…

分类预测 | Matlab实现BES-ELM秃鹰搜索算法优化极限学习机分类预测

分类预测 | Matlab实现BES-ELM秃鹰搜索算法优化极限学习机分类预测 目录 分类预测 | Matlab实现BES-ELM秃鹰搜索算法优化极限学习机分类预测分类效果基本描述程序设计参考资料 分类效果 基本描述 Matlab实现BES-ELM秃鹰搜索算法优化极限学习机分类预测&#xff08;完整源码和数…

深度学习算法在工业视觉落地的思考

0.废话 距离上次的栈板识别的思考已经过去3个月&#xff0c;中间根据客户的需求和自己的思考&#xff0c;对软件又重新做了调整。但是整体上还是不满意。 0.1 老生常谈的工业视觉落地架构 对于软件架构&#xff0c;我实在没有太多的参考。没办法&#xff0c;公司根本不关心软…

react+IntersectionObserver实现页面丝滑帧动画

实现效果&#xff1a; 加入帧动画前&#xff1a; 普通的静态页面 加入帧动画后&#xff1a; 可以看到&#xff0c;加入帧动画后&#xff0c;页面效果还是比较丝滑的。 技术实现 加入animation动画类 先用 **scss **定义三种动画类&#xff1a; .withAnimation {.fade1 {ani…

学会这些,QtIFW制作安装包不再是难题

一文看懂如何利用QtIFW制作安装包&#xff0c;小白也能看懂且学会的软件安装包制作教程&#xff1b;&#xff08;本文不基于Qt工程&#xff09; 1 前言 1.1 安装包制作工具的选择 安装程序生成工具就是将应用程序和依赖的文件打包到一个可执行的安装程序种&#xff0c;可以简…

HTML之如何下载网页中的音频(二)

简介&#xff1a; CSDN博客专家&#xff0c;专注Android/Linux系统&#xff0c;分享多mic语音方案、音视频、编解码等技术&#xff0c;与大家一起成长&#xff01; 优质专栏&#xff1a;Audio工程师进阶系列【原创干货持续更新中……】&#x1f680; 人生格言&#xff1a; 人生…

【算法】莫队

这篇博客起源于本人把一道 p o w ( 2 , n ) pow(2,n) pow(2,n) 的问题考虑成求组合数前缀和的问题qwq&#xff0c;于是接触到了这个新算法来总结一下 参考自这篇文章&#xff0c;写得太好了 首先是一道模板题 题目意思是&#xff0c;给出一个数组a&#xff0c;再给出多个区…

What is an HTTP Flood DDoS attack?

HTTP 洪水攻击是一种针对 Web 和应用程序服务器的第 7 层分布式拒绝服务 &#xff08;DDoS&#xff09; 攻击。HTTP 洪水攻击通过使用 HTTP GET 或 HTTP POST 请求执行 DDoS 攻击。这些请求是有效的&#xff0c;并且针对可用资源&#xff0c;因此很难防范 HTTP 洪水攻击。 匿名…

特斯拉——使用人工智能制造智能汽车

特斯拉(Tesla)是电动汽车开发和推广的先驱。特斯拉对自动驾驶汽车的未来寄予厚望--实际上&#xff0c;每一辆特斯拉汽车都有可能通过软件升级成为自动驾驶汽车。该公司还生产和销售高级电池和太阳能电池板。 汽车的自动驾驶是按从1~5的等级划分的。自适应巡航控制和自动停车系…

论文笔记(整理):轨迹相似度顶会论文中使用的数据集

0 汇总 数据类型数据名称数据处理出租车数据波尔图 原始数据&#xff1a;2013年7月到2014年6月&#xff0c;170万条数据 ICDE 2023 Contrastive Trajectory Similarity Learning with Dual-Feature Attention 过滤位于城市&#xff08;或国家&#xff09;区域之外的轨迹 过…

【SSL】用Certbot生成免费HTTPS证书

1. 实验背景 服务器&#xff1a;CentOS7.x 示例域名&#xff1a; www.example.com 域名对应的web站点目录&#xff1a; /usr/local/openresty/nginx/html 2. 安装docker # yum -y install yum-utils# yum-config-manager --add-repo https://download.docker.com/linux/ce…

采集SEO方法-优化内链与外链建设

采集大量的文章数据&#xff0c;要想批量做SEO优化添加内链外链方法&#xff0c;可以使用简数采集器的处理规则实现。 简数采集器的一个处理规则&#xff0c;可以包含多种SEO方法&#xff0c;还可自由组合&#xff0c;强大灵活方便。 优化内链外链的SEO技巧&#xff1a; 1&a…

基于PYQT5的GUI开发系列教程【二】QT五个布局的介绍与运用

目录 本文概述 作者介绍 创建主窗口 水平布局 垂直布局 栅格布局 分裂器水平布局 分裂器垂直布局 自由布局 取消原先控件的布局的方法 尾言 本文概述 PYQT5是一个基于python的可视化GUI开发框架&#xff0c;具有容易上手&#xff0c;界面美观&#xff0c;多平台…

基于SpringBoot的教学资源库系统的设计与实现

目录 前言 一、技术栈 二、系统功能介绍 三、核心代码 1、登录模块 2、文件上传模块 3、代码封装 前言 社会的进步&#xff0c;教育行业发展迅速&#xff0c;人们对教育越来越重视&#xff0c;在当今网络普及的情况下&#xff0c;教学模式也开始逐渐网络化&#xff0c;各大…

Python大数据之Python进阶(四)进程的注意点

文章目录 进程的注意点1. 进程的注意点介绍2. 进程之间不共享全局变量3. 进程之间不共享全局变量的小结4. 主进程会等待所有的子进程执行结束再结束5. 主进程会等待所有的子进程执行结束再结束的小结 进程的注意点 学习目标 能够说出进程的注意点 1. 进程的注意点介绍 进程之…

Polygon Miden交易模型:Actor模式 + ZKP => 并行 + 隐私

1. 引言 前序博客&#xff1a; Polygon Miden&#xff1a;扩展以太坊功能集的ZK-optimized rollupPolygon Miden zkRollup中的UTXO账户混合状态模型 Polygon Miden为&#xff1a; ZK-optimized rollup由客户端生成证明完善Polygon ZK系列解决方案&#xff0c;致力于成为网络…

nodejs+vue网上婚纱购物系统elementui

便了用户足不出门也能进行购物的理念&#xff0c;方便了婚纱影楼的对商品的进一步管理,互联网成为人们快速获取、发布、和传递信息的重要渠道&#xff0c;它在人们政治、经济、生活等各个方面发挥着重要的作用。未来的时代是网络信息的时代&#xff0c;“网上生活方式”是人类今…

软件测试面试复盘

作者&#xff1a;爱塔居 专栏&#xff1a;测试 1、计算机网络七层协议&#xff1a;物理层、数据链路层、网络层、传输层、表示层、会话层、应用层&#xff08;面试问过这个&#xff09; 2.TCP/IP四层模型&#xff1a;应用层、传输层、网络层、网络接口层&#xff08;笔试问过&…

【CMU15-445 Part-14】Query Planning Optimization I

Part14-Query Planning & Optimization I SQL is Declarative&#xff0c;只告诉想要什么而不需要说怎么做。 IBM System R是第一个实现query optimizer查询优化器的系统 Heuristics / Rules 条件触发 静态规则&#xff0c;重写query来remove 低效或者愚蠢的东西&#xf…

基于springboot的洗衣店订单管理系统

目录 前言 一、技术栈 二、系统功能介绍 顾客信息管理 店家信息管理 店铺信息管理 洗衣信息管理 预约功能 洗衣信息 交流区 三、核心代码 1、登录模块 2、文件上传模块 3、代码封装 前言 随着信息互联网信息的飞速发展&#xff0c;无纸化作业变成了一种趋势&#x…