【自定义微信小程序拉下选择过滤组件】searchable-select

【自定义微信小程序拉下选择过滤组件】searchable-select

组件说明

点击输入框获取焦点,输入内容,自动匹配搜索结果,点击搜索结果,自动填充搜索结果。

组件使用

  1. 将组件文件夹放在项目中。
  2. 在需要使用的页面的json文件中,添加组件的路径。
{"usingComponents": {"searchable-select": "/components/searchable-select/searchable-select"}
}
  1. 在需要使用的页面的wxml文件中,使用组件。
<searchable-select options="{{ hospitalOptions }}" selectedValue="{{ selectedValue }}" placeholder="搜索医院" bind:select="onSelect"></searchable-select>
  1. 在需要使用的页面的js文件中,定义组件的属性和方法。
Page({data: {hospitalOptions: [{ id: 1, name: '选项1' },{ id: 2, name: '选项2' },{ id: 3, name: '选项3' }], selectedValue: '' },methods: {// 下拉选择医院onSelect(e) {const selectedValue = e.detail.value;this.setData({selectedValue: selectedValue.label,hospitalCurrent: selectedValue.value});},}
})

组件详情

searchable-select.js

Component({properties: {// 下拉选项列表options: {type: Array,value: []},// 初始选中的值selectedValue: {type: String,value: ''},// 输入框的占位符placeholder: {type: String,value: '请选择'}},data: {isOpen: false, // 下拉框是否展开filteredOptions: [], // 过滤后的选项列表inputValue: '', // 输入框的值showNoData: false // 是否显示暂无数据提示},observers: {// 监听 options 属性变化,更新过滤后的选项列表options(newOptions) {this.setData({filteredOptions: newOptions});},selectedValue(newValue) {this.setData({inputValue: newValue});}},methods: {// 输入框获得焦点时展开下拉框onInputFocus() {this.setData({isOpen: true});this.filterOptions(this.data.inputValue);},// 防抖函数debounce(func, delay) {let timer = null;return function () {const context = this;const args = arguments;clearTimeout(timer);timer = setTimeout(() => {func.apply(context, args);}, delay);};},// 处理输入框输入事件handleInput: function (e) {const inputValue = e.detail.value;this.debounceFilterOptions(inputValue);},// 过滤选项列表filterOptions(inputValue) {if (!inputValue) {this.setData({filteredOptions: [],showNoData: true});return;}const filteredOptions = this.data.options.filter(option => {return option.label.includes(inputValue);});const showNoData = filteredOptions.length === 0;this.setData({inputValue,filteredOptions,showNoData});},// 防抖处理过滤选项debounceFilterOptions: function () {this.debounce(this.filterOptions, 500).apply(this, arguments);},handleSelectOpen() {this.setData({isOpen: false});},// 处理选项点击事件handleOptionClick(e) {const selectedValue = e.currentTarget.dataset.value;this.setData({inputValue: selectedValue.label,isOpen: false,showNoData: false});// 触发自定义事件,通知父组件选中的值this.triggerEvent('select', { value: selectedValue });}}
});

searchable-select.json

{"component": true,"usingComponents": {},"styleIsolation": "isolated"
}

searchable-select.wxml

<view class="searchable-select"><view class="input-container"><inputclass="plugin-input"type="text"value="{{ inputValue }}"placeholder="{{ placeholder }}"bindfocus="onInputFocus"bindblur="onInputBlur"bindinput="handleInput"readonly="{{ !isOpen }}"/><view class="icon-wrapper {{ isOpen ? 'open' : '' }}"></view></view><view class="dropdown-box" bindtap="handleSelectOpen"><view class="dropdown" wx:if="{{ isOpen }}"><viewclass="option {{ inputValue == item.label ? 'selected' : '' }}"wx:for="{{ filteredOptions }}"wx:key="*this"data-value="{{ item }}"catchtap="handleOptionClick">{{ item && item.label }}</view><view class="no-data" wx:if="{{ showNoData }}">暂无</view></view></view>
</view>

searchable-select.wxss

/* 修改为直接类名选择器 */
.plugin-input {flex: 1;border: none;outline: none;z-index: 99;
}.searchable-select {position: relative;
}.input-container {display: flex;align-items: center;border-bottom: 1rpx solid #f1f1f1;padding: 20rpx 28rpx;
}.dropdown-box {position: absolute;top: 100%;left: 0;right: 0;min-height: 100vh;z-index: 10;
}.dropdown {top: 100%;left: 0;right: 0;box-sizing: border-box;border-top: none;max-height: 300px;overflow-y: auto;z-index: 10;border-radius: 6rpx;padding: 12rpx 20rpx 10rpx 20rpx;box-shadow: 0rpx 0rpx 1rpx 1rpx rgba(0, 0, 0, 0.2) inset;background-color: #fff;margin: 0 28rpx;
}.option {padding: 20rpx 10rpx;cursor: pointer;border-bottom: 1rpx solid #eee;
}.option .selected {background-color: #f0f0f0;
}.option:last-child {border-bottom: none;
}.option:hover {background-color: #f0f0f0;
}.no-data {padding: 10px;text-align: center;color: #999;
}.icon-wrapper::after {content: '';position: absolute;top: 50%;right: 28rpx;transform: translateY(-50%);width: 0;height: 0;border: 10rpx solid transparent;border-top: 10rpx solid #999;transition: transform 0.3s ease;
}.icon-wrapper.open::after {transform: translateY(-50%) rotate(180deg);-webkit-transform: translateY(-50%) rotate(180deg);-moz-transform: translateY(-50%) rotate(180deg);-ms-transform: translateY(-50%) rotate(180deg);-o-transform: translateY(-50%) rotate(180deg);
}

效果图:

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

推理大模型的后训练增强技术-Reasoning模型也进化到2.0了,这次居然学会用工具了

论文题目&#xff1a;START: Self-taught Reasoner with Tools 论文链接&#xff1a;https://arxiv.org/pdf/2503.04625 论文简介 Reasoning模型也进化到2.0了&#xff0c;这次居然学会用工具了&#xff01;✨ 最近有个叫START的方法&#xff0c;让大模型也能学着用工具&#…

Idea集成docker通过ca加密实现镜像打包

​ Idea集成docker实现镜像打包_ideadocker镜像打包-CSDN博客 ​ 之前通过这种方式虽然可以实现idea通过maven打jar包的同时把docker镜像也进行打包&#xff0c;但是这种方式存在很大漏洞&#xff0c;就是服务器的2375端口大开&#xff0c;任何人拿着idea通过这种方式都可以连…

SOC与电压的关系

与电池相关的参数都与SOC有关&#xff0c;也就是电池剩余容量的百分比即荷电状态。 SOC百分之二十时&#xff0c;对应3.2V,SOC80&#xff05;时对应3.3V。

塔能科技:做节能界的“催化剂”,加速工厂能源改造变革

在全球坚定不移地迈向可持续发展的宏大进程中&#xff0c;节能降耗早已从一种发展理念&#xff0c;深度融入到经济社会发展的每一个脉络之中&#xff0c;成为企业在激烈市场竞争中实现降本增效的核心策略&#xff0c;更是推动整个社会朝着绿色、低碳、循环方向转型的关键支撑点…

【算法学习之路】11.并查集

并查集 前言一.简介二.基础并查集三.基础并查集题目12 四.种类并查集&#xff08;扩展域并查集&#xff09;五.种类并查集的题目 前言 我会将一些常用的算法以及对应的题单给写完&#xff0c;形成一套完整的算法体系&#xff0c;以及大量的各个难度的题目&#xff0c;目前算法也…

【微服务】SpringBoot整合LangChain4j 操作AI大模型实战详解

目录 一、前言 二、Langchain4j概述 2.1 Langchain4j 介绍 2.1.1 Langchain4j 是什么 2.1.2 主要特点 2.2 Langchain4j 核心组件介绍 2.3 Langchain4j 核心优势 2.4 Langchain4j 核心应用场景 三、SpringBoot 整合 LangChain4j 组件使用 3.1 前置准备 3.1.1 获取apik…

【图片批量转换合并PDF】多个文件夹的图片以文件夹为单位批量合并成一个PDF,基于wpf的实现方案

项目背景: 多个图片分布在不同文件夹,如何以文件夹为单位批量合并成一个PDF,还要保证文件夹里面图片大小和顺序 实现功能: 1、单张图片的转换PDF:一张图临时转一下 2、多张图片转换成PDF:多张图单独转成PDF 3、多级目录多张图转换成PDF:多级目录多张图单独转成多个PDF…

因果推荐|可解释推荐系统的反事实语言推理

论文&#xff1a;https://arxiv.org/pdf/2503.08051 代码&#xff1a;GitHub - kylokano/CausalX 很新的论文&#xff0c;南大五天前挂到arxiv的&#xff0c;代码基于Recbole&#xff0c;没给全但是提供了足够的验证。 1 动机 可解释推荐不仅提供高质量的推荐&#xff0c;而…

Zabbix安装(保姆级教程)

Zabbix 是一款开源的企业级监控解决方案,能够监控网络的多个参数以及服务器、虚拟机、应用程序、服务、数据库、网站和云的健康状况和完整性。它提供了灵活的通知机制,允许用户为几乎任何事件配置基于电子邮件的告警,从而能够快速响应服务器问题。Zabbix 基于存储的数据提供…

【spring boot 实现图片验证码 前后端】

导入hutool依赖 <!--hutool--><dependency><groupId>cn.hutool</groupId><artifactId>hutool-all</artifactId><version>5.8.36</version>获取验证码接口 Autowiredprivate Captcha captcha;private final static Long VALIDA…

arthas基础命令

文章目录 1. help2. cat3. grep4. pwd5. cls6. session7. reset8. version9. history10. quit11. stop12. keymapArthas 命令行快捷键后台异步命令相关快捷键小结 1. help 作用&#xff1a;查看命令帮助信息 2. cat 作用&#xff1a;打印文件内容&#xff0c;和linux里的cat命…

痉挛性斜颈护理宝典:重拾生活平衡

痉挛性斜颈会给患者的生活带来诸多不便&#xff0c;有效的健康护理对缓解症状、提升生活质量十分关键。 在日常活动方面&#xff0c;患者应保持正确的姿势。站立和坐姿要挺直脊背&#xff0c;避免长时间低头或歪头&#xff0c;减少颈部肌肉的额外负担。睡眠时&#xff0c;选择高…

虚拟定位 1.2.0.2 | 虚拟定位,上班打卡,校园跑步模拟

Fake Location是一款运行于安卓平台上的功能强大、简单实用的虚拟定位软件。它能够帮助用户自定义位置到地图上的任意地方&#xff0c;以ROOT环境运行不易被检测&#xff0c;同时也支持免ROOT运行。提供路线模拟、步频模拟、WIFI模拟等方式&#xff0c;支持反检测。 大小&…

C++基础 [五] - String的模拟实现

目录 前言 string类的模拟实现 成员函数的实现 构造函数 拷贝构造函数 赋值运算符重载 析构函数 元素访问的实现 operator[ ] Iterator - 迭代器 容量大小的实现 size capacity reserve ​编辑resize 内容修改的实现 push_back append operator(char ch) …

嵌入式硬件--开发工具-AD使用常用操作

ad16.1.12 1.如何显示/隐藏其他图层 在pcb界面点击L--试图界面中找到“视图选项”--单层模式选择 not in single layer mode 在pcb界面点击L--试图界面中找到“视图选项”--单层模式选择 gray scale other layers 【Altium】AD如何只显示一层&#xff0c;隐藏其他层显示&…

浏览器好用的去广告插件和暗黑模式护眼插件

提升浏览体验&#xff1a;Edge浏览器的Adblock和Dark Mode扩展 Adblock&#xff1a;告别广告干扰 功能&#xff1a;高效拦截弹窗、横幅和视频广告&#xff0c;提升网页整洁度&#xff0c;加快加载速度&#xff0c;节省流量。安装链接&#xff1a;安装Adblock Dark Mode for E…

MySQL-基础篇

从数据库的基础的概念特性到数据库当中的SQL语句&#xff0c;再到数据库当中的存储引擎、索引优化以及分库分表、数据库的集群&#xff0c;甚至于数据库的底层原理 MySQL概述SQL函数约束多表查询事务 这块由于上学期学过一些就速过。 MySQL概述 通过SQL就可以操作数据库管理…

fastapi+angular外卖系统

说明&#xff1a; fastapiangular外卖系统 1.美食分类&#xff08;粥&#xff0c;粉&#xff0c;面&#xff0c;炸鸡&#xff0c;炒菜&#xff0c;西餐&#xff0c;奶茶等等&#xff09; 2.商家列表 &#xff08;kfc&#xff0c;兰州拉面&#xff0c;湘菜馆&#xff0c;早餐店…

2025高频面试算法总结篇【递归回溯动态规划】

文章目录 递归&回溯131. 分割回文串面试题 08.12. 八皇后 动态规划72编辑距离5. 最长回文子串279. 完全平方数300. 最长递增子序列139. 单词拆分 递归&回溯 131. 分割回文串 回溯思路&#xff1a; 临界条件&#xff1a; if (start s.length) > 保存 循环遍历这个…

Ubuntu docker安装milvusdb

一、安装docker 1.更新软件包 sudo apt update sudo apt upgrade sudo apt-get install docker-ce docker-ce-cli containerd.io查看是否安装成功 docker -v二、使用国内的镜像下载 milvusdb Docker中国区官方镜像: https://registry.docker-cn.com milvusdb/milvus - Doc…