当前位置：首页 > news >正文

微信小程序 van-dropdown-menu

news 来源：原创 2025/7/17 17:41:32

点击其他按钮，关闭van-dropdown-menu下拉框

- DropdownMenu 引入
- 页面使用
- - index.wxml
  - index.scss
  - index.ts(重点)
  - index.ts(全部)

DropdownMenu 引入

在app.json或index.json中引入组件

"usingComponents": {"van-dropdown-menu": "@vant/weapp/dropdown-menu/index","van-dropdown-item": "@vant/weapp/dropdown-item/index"
}

页面使用

下面是完成的使用步骤

index.wxml

<view class="seach-Main"><view class="class-main"><van-dropdown-menu active-color="#FFD69A" custom-class="menuMain" ><van-dropdown-itemtitle-class="ItemMain"value="{{ value1 }}" options="{{ option1 }}"bind:change="onDropDownChange" id="item"/></van-dropdown-menu></view><van-search class="search-text" background="#000000" value="{{ value }}" placeholder="请输入产品编号/名称" placeholder-style="font-size:28rpx;" clearable="true" use-action-slot left-icon="search" bind:focus="onFocusClick" bind:change="onChange" bind:search="submitHandle"><view slot="action" bind:tap="submitHandle" style="color: #FFFFFF;">搜索</view></van-search></view>

index.scss

  .seach-Main {display: flex;justify-content: space-around;width: 100%;align-items: center;position: relative;.search-text {width: 100%;}.search-image {display: flex;position: absolute;width: 44rpx;left: 40rpx;image {width: 44rpx;height: 44rpx;}}}.seach-Main .van-search__content--square {background-color: var(--bannerBgColor) !important;border-radius: 10rpx 10rpx 10rpx 10rpx;border: 2rpx solid var(--bannerBgColor);}.seach-Main .cell-index--van-cell__value {text-align: left;}.seach-Main .van-field__control {color: var(--titleColor);}.seach-Main .van-cell__left-icon-wrap {color: var(--titleColor) !important;}// 选择.class-main {.menuMain {background-color: var(--mainBgColor);}.ItemMain {color: var(--titleColor);}}.van-cell {background-color: var(--bannerBgColor) !important;color: var(--titleColor) !important;border: none;}/* 样式文件 */.class-main .van-cell::after {border: none;}

上面var()都是引用的公共样式，可以换成自己项目需要的样式。

index.ts(重点)

在这里，需要实现输入框选中时，van-dropdown-menu组件需要关闭。所以在输入框组件里增加了bind:focus="onFocusClick"方法。在这个方法里面实现关闭操作。

// 输入框聚焦关闭组件onFocusClick() {this.selectComponent('#item').toggle(false);},

在这里插入图片描述

刚开始没注意官方文档的说明，现将该方法着重展示出来。

index.ts(全部)

Page({/*** 页面的初始数据*/data: {value1: '',option1: [{ text: '全部', value: '' },{ text: '干货', value: 'GH' },{ text: '调味', value: 'TW' },],groupType:'', // 分类searchField:'',// 输入框搜索内容
},
// 输入框聚焦关闭onFocusClick() {this.selectComponent('#item').toggle(false);},// 筛选onDropDownChange(e: any) {let index = e.detailif (index == 0 && this.data.value1 == 0) {index = ''}this.setData({'groupType': index,})},// 输入框值改变时的方法onChange(e: any) {this.setData({searchField: e.detail,});// 调用搜索接口},// 点击搜索按钮方法submitHandle() {this.selectComponent('#item').toggle(false); // 关闭弹框var vkey = this.data.value;if (vkey) {// 搜索关键字不为空时的操作} else {// 搜索关键字为空时的操作}},)}

最终效果如下：

点击其他方法，关闭van-dropdown-menu

微信小程序 van-dropdown-menu

点击其他按钮，关闭van-dropdown-menu下拉框 DropdownMenu 引入页面使用index.wxmlindex.scssindex.ts(重点)index.ts(全部) DropdownMenu 引入在app.json或index.json中引入组件 "usingComponents": {"van-dropdown-menu": "vant/weapp…...

编程日记 2025/7/17 17:41:32

再见 Smartdaili，你好 Decodo！

我们将翻开新的篇章，推出新的名称以及更好的代理和刮擦解决方案。了解我们如何帮助全球用户构建、测试和扩展他们的公共网络数据项目。 Smartproxy，即后来的Smartdaili，由一个行业专业人士和企业家团队于2018年创立，其使命是创建一…...

编程日记 2025/7/16 22:03:06

海量文本中的词语距离：在 O(n) 时间内找到最近的词对

想象一个巨大的日志文件、一部鸿篇巨著或者网络爬虫抓取的数据——它们可能达到 TB 级别。现在，假设你需要找出两个特定的词（比如词语1 和词语2）在这段庞大文本中出现时，彼此“靠得最近”的距离是多少。挑战： …...

编程日记 2025/7/16 22:19:06

TextCNN 模型文本分类实战：深度学习在自然语言处理中的应用

在自然语言处理（NLP）领域，文本分类是研究最多且应用最广泛的任务之一。从情感分析到主题识别，文本分类技术在众多场景中都发挥着重要作用。最近，我参与了一次基于 TextCNN 模型的文本分类实验，从数据准备到…...

编程日记 2025/7/17 17:14:18

前台调用接口的方式及速率对比

一、引言在现代 Web 开发中，前台与后台的数据交互至关重要，而调用接口是实现这一交互的关键手段。不同的接口调用方式在速率上可能存在差异，这会影响用户体验和应用性能。本文将详细介绍几种常见的前台调用接口方式，并对它们的速…...

编程日记 2025/7/17 16:02:01

高级java每日一道面试题-2025年4月21日-基础篇[反射篇]-如何使用反射获取一个类的所有方法？

如果有遗漏,评论区告诉我进行补充面试官: 如何使用反射获取一个类的所有方法？ 我回答: 在Java中，反射是一种强大的机制，允许程序在运行时检查或“反射”自身，从而动态地操作类、字段、方法和构造函数等。这在需要动态调用方法…...

编程日记 2025/7/17 16:04:18

中间件：Tomcat、Redis、Nginx jar包要和tomcat相匹配 jar包：commons-pool2-2.2.jar、jedis-2.5.2.jar、tomcat-redis-session-manage-tomcat7.jar 配置Tomcat /conf/context.xml <?xml version1.0 encodingutf-8?> <!--Licensed to the A…...

编程日记 2025/7/17 17:25:13

2.6 递归

递归特性： >.一递一归 >.终止条件一般为：0 1 -1 #测试函数的返回值为函数 def test_recursion():return test_recursion() print(test_recursion()) RecursionError: maximum recursion depth exceeded #案例：计算 …...

编程日记 2025/7/16 17:02:38

鸿蒙应用开发：如何修改APP名称与APP的图标

如何修改APP的名称？ 修改APP的名称需要修改entry/src/main/resources/base/element/string.json文件将EntryAbility_label的value修改为“需要修改成的名字”。文件目录： 代码修改： {"string": [{"name": "modu…...

编程日记 2025/7/15 16:44:48

AI 模型在前端应用中的典型使用场景和限制

典型使用场景 1. 智能表单处理 // 使用TensorFlow.js实现表单自动填充 import * as tf from tensorflow/tfjs; import { loadGraphModel } from tensorflow/tfjs-converter;async function initFormPredictor() {// 加载预训练的表单理解模型const model await loadGraphMod…...

编程日记 2025/7/17 14:14:20

前端性能优化全攻略：JavaScript 优化、DOM 操作、内存管理、资源压缩与合并、构建工具及性能监控

1 为什么需要性能优化？ 1.1 性能优化的核心价值：用户体验与业务指标性能优化不仅是技术层面的追求，更是直接影响用户体验和业务成败的关键因素。用户体验（UX）： 响应速度：用户期望页面加载时…...

编程日记 2025/7/17 16:54:58

使用 acme.sh 自动更新 SSL 证书的指南

上篇文章讲了一下如何利用acme.sh来申请ssl，但没有讲3个月到期后如何续期，续期的时候会碰到什么问题？ 1.查看当前的当前签发域名的到期时间 acme.sh list 2.重新申请ssl acme.sh --issue --dns dns_namesilo -d xxx.ai -d *.xxx.ai --dns…...

编程日记 2025/7/16 20:17:31

查看Spring Boot项目所有配置信息的几种方法，包括 Actuator端点、日志输出、代码级获取等方式，附带详细步骤和示例

以下是查看Spring Boot项目所有配置信息的几种方法，包括 Actuator端点、日志输出、代码级获取等方式，附带详细步骤和示例： 1. 使用Spring Boot Actuator Actuator是Spring Boot提供的监控和管理工具，包含/configprops端点可查看…...

编程日记 2025/6/29 9:32:50

C++与C

文章目录 C与C命令空间const关键字new/delete表达式引用（重点）概念引用的本质引用的使用场景引用作为函数的参数引用作为函数的返回值总结强制转换函数重载extern "C"默认参数 bool类型inline（内联）函数异常处理&…...

编程日记 2025/7/17 16:42:47

Nginx中间件的解析

目录一、Nginx的核心架构解析二、Nginx的典型应用场景三、Nginx的配置优化实践四、Nginx的常见缺陷与漏洞一、Nginx的核心架构解析事件驱动与非阻塞IO模型 Nginx采用基于epoll/kq等系统调用的事件驱动机制，通过异步非阻塞方式处理请求，…...

编程日记 2025/7/17 17:03:18

Ansys Zemax | 在 MATLAB 中使用 ZOS-API 的技巧

附件下载联系工作人员获取附件本文将介绍一些在MATLAB中使用 ZOS-API 的技巧，以提高您的工作效率并充分利用 ZOS-API 的功能。简介 OpticStudio开发了应用程序接口 (API) ，用户可以使用API与不同的脚本环境进行连接和交互。使用API，用…...

编程日记 2025/7/17 16:21:04

js 生成pdf 并上传文件

js 生成pdf 并上传文件使用 JsPDF html2Canvas 代码直接使用注意注释 import JsPDF from jspdf import html2Canvas from html2canvas // 上传文件的方法 import { handleUploadImage } from /utils/uploadQuillEditdownPDF() {// 要打印元素的idconst cloneDom document.…...

编程日记 2025/7/17 14:41:13

刷刷刷刷刷sql题

NSSCTF 【SWPUCTF 2021 新生赛】easy_sql 这题虽然之前做过，但为了学习sql，整理一下就再写一次打开以后是杰哥的界面注意到html网页标题的名称是 “参数是wllm” 那就传参数值试一试首先判断注入类型（数字型或字符型） 传1 …...

编程日记 2025/7/11 18:12:28

JavaScript 中的 this 及 this 指向的改变方法

在 JavaScript 的世界里，this是一个既强大又容易让人困惑的概念。它的指向在不同的函数调用场景下会动态变化，而call()、apply()和bind()这三个方法则为我们提供了精确控制this指向的能力。本文将从基础概念出发，结合具体案例，带大…...

编程日记 2025/7/17 16:44:27

安卓模拟器绕过检测全解析：雷电、MuMu、蓝叠、逍遥、夜神与WSA完整指南

安卓模拟器绕过检测全解析：雷电、MuMu、蓝叠、逍遥、夜神与WSA完整指南模拟器过检测合集雷电mumu蓝叠逍遥夜神WSA 转自风车2025 前言随着手机游戏和应用的普及，越来越多的用户选择在PC上通过模拟器来运行安卓应用。然而，许多应用和游戏为…...

编程日记 2025/7/17 13:14:55

VSCode中安装GitGraph

前提是先安装git，官方下载地址：Git - Downloads 1. 在VSCode中安装GitGraph插件 2. 文件->首选项->设置，打开设置界面，在设置界面搜索git path 3. 打开配置文件配置git安装路径： 4. 打开源代码管理，…...

编程日记 2025/7/17 17:12:39

StartAI「万物迁移」功能设计师实操教程：模特换衣场景应用

一、功能核心优势解析智能识别与场景融合基于迁移学习算法，精准定位服装轮廓（支持复杂材质如蕾丝、镂空设计），自动匹配目标场景的光影方向与色温。效率革命传统PS手动换衣需2-3小时，使用万物迁移可压缩至2-5分…...

编程日记 2025/7/17 17:23:57

【RK3588 嵌入式图形编程】-SDL2-扫雷游戏-放置标记

放置标记文章目录放置标记1、概述2、更新Globals.h3、放置标记4、渲染标记5、标记计数6、完整代码7、改进建议8、总结在本文中，我们实现标记放置和跟踪以完成的扫雷游戏项目。 1、概述在我们扫雷游戏文章系列的最后部分中，我们将添加玩家在可疑的地雷位置放置标记的功能。…...

编程日记 2025/7/17 16:27:21

【Python】Selenium切换网页的标签页的写法（全！！！）

在使用selenium做网站爬取测试的时候，我们经常会遇到一些需要点击的元素，才能点击到我们想要进入的页面， 于是我们就要模拟不断地点点点击鼠标的样子。这个时候网页上就会有很多的标签页，你的浏览器网页标签栏 be like: 那…...

编程日记 2025/7/16 22:38:01

Spring Boot多环境配置详解

一、为什么需要多环境配置在实际项目开发中，我们通常需要将应用部署到不同的环境中，比如： 开发环境（dev） - 开发人员本地开发调试使用测试环境（test） - 测试人员功能测试使用生产环境&#x…...

编程日记 2025/7/17 16:18:57

进阶篇第 6 篇：时间序列遇见机器学习与深度学习

进阶篇第 6 篇：时间序列遇见机器学习与深度学习 (图片来源: Tara Winstead on Pexels) 在上一篇中，我们探讨了如何通过精心的特征工程，将时间序列预测问题转化为机器学习可以处理的监督学习任务。我们学习了如何创建滞后特征、滚动统计特征…...

编程日记 2025/7/17 17:30:28

RHCE 作业二（密钥登录实验）

1.进入ssh主配置文件恢复配置： 2.vim进入ssh子文件夹查看配置 3.重启服务 /etc/ssh/ key结尾或者.pub结尾的文件全部都是密钥 sshd_confg.d目录是服务的子配置文件 ssh_confg.d目录是客户端你的子配置文件 ~/.ssh/ 是当前用户的配置文件 4.服务器和客户端分别…...

编程日记 2025/6/29 9:34:27

android contentProvider 踩坑日记

写此笔记原因学习《第一行代码》到第8章节实现provider时踩了一些坑，因此记录下来给后来人和自己一个提示，仅此而已。包含内容 Sqlite数据库CURD内容provider界面provider项目中书籍管理provider实现逻辑用adb shell确认providercontentResolver接收…...

编程日记 2025/6/29 9:32:56

K8s：概念、特点、核心组件与简单应用

一、引言在当今云计算和容器技术蓬勃发展的时代，Kubernetes（简称 K8s）已成为容器编排领域的事实标准。它为管理容器化应用提供了高效、可靠的解决方案，极大地简化了应用的部署、扩展和运维过程。无论是小型初创公司还是大型企业…...

编程日记 2025/7/11 1:04:55

基于表面肌电信号sEMG的手势识别——以Ninapro DB1数据集使用CNN网络识别为例

完整代码获取评论区或者私信留邮箱接论文辅导！中文核心辅导！SCI三四区辅导！ 可接模型改进任务描述表面肌电信号( sEMG ) 是一种生物电信号，存在于肌肉神经。当大脑下达肌肉动作指令，肌肉会产生控制信号&#xff…...

编程日记 2025/7/10 18:27:36

黑盒测试——等价类划分法实验

任务： 设某程序有两个输入：整数x1和整数x2，计算Yf(x1,x2)。x1和x2的取值范围为1< x1<500,1< x2<500。当x1在[1,200) 取值且x2在[1,300] 取值时，Yf(x1,x2) x1x2；当x1在[200,500] 取值且x2在[1,300] 取值时&…...

编程日记 2025/7/11 12:05:01

深度学习4月22笔记

1、过拟合与欠拟合在训练深层神经网络时，由于模型参数较多，在数据量不足时很容易过拟合。而正则化技术主要就是用于防止过拟合，提升模型的泛化能力(对新数据表现良好)和鲁棒性（对异常数据表现良好）。 1. 概念认知 …...

编程日记 2025/7/17 8:20:38

【MySQL数据库入门到精通-03 数据类型及案列】

文章目录一、三类数据类型二、数值类型三、字符串类型四、日期时间类型五、日期时间类型一、三类数据类型 MySQL中的数据类型有很多，主要分为三类：数值类型、字符串类型、日期时间类型。二、数值类型比如： 1). 年龄字段 – 不会出现负数…...

编程日记 2025/7/15 11:40:37

【机器学习】决策树算法中的 “黄金指标”：基尼系数深度剖析

一、基尼系数的基本概念基尼系数（Gini Impurity）在决策树分类算法中，是用于衡量数据纯度的重要指标，与信息熵有着相似的功能。在样本集合里，基尼系数代表随机选取一个样本时，该样本被分错的概率。假设一…...

编程日记 2025/7/16 18:40:15

植被参数遥感反演技术革命！AI+Python支持向量机/随机森林/神经网络/CNN/LSTM/迁移学习在植被参数反演中的实战应用与优化

在全球气候变化与生态环境监测的重要需求下，植被参数遥感反演作为定量评估植被生理状态、结构特征及生态功能的核心技术，正面临诸多挑战。随着遥感技术的发展，数据复杂度不断提升，模型精度的要求也越来越高。同时，多源…...

编程日记 2025/7/13 11:57:40

【AI】SpringAI 第四弹：接入本地大模型 Ollama

Ollama 是一个开源的大型语言模型服务工具。它的主要作用是帮助用户快速在本地运行大模型， 简化了在 Docker 容器内部署和管理大语言模型（LLM）的过程。 1. 确保Ollama 已经启动 # 查看帮助文档 ollama -h# 自动下载并启动 ollama run deeps…...

编程日记 2025/7/11 1:17:17

C# MP3 伴奏

使用建议： 参数调节指南： 低频人声残留：降低CenterFrequency(800-1500Hz) 高频人声残留：提高CenterFrequency(2500-3500Hz) 消除力度不足：提高EliminationStrength(0.9-1.0) 伴奏失真：降低EliminationSt…...

编程日记 2025/7/14 8:55:24

【springsecurity oauth2授权中心】将硬编码的参数提出来放到 application.yml 里 P3

在application.yml里添加配置 application.yml oauth2:client:id: clientsecret: secretauthentication-method: client_secret_basicgrant-types: authorization_code,refresh_tokenredirect-uris:- http://localhost:8081/login/oauth2/code/client- http://localhost:8081…...

编程日记 2025/7/10 19:29:37