【微信小程序】3|首页搜索框 | 我的咖啡店-综合实训
首页-搜索框-跳转
引言
在微信小程序中，首页的搜索框是用户交互的重要入口。本文将通过“我的咖啡店”小程序的首页搜索框实现，详细介绍如何在微信小程序中创建和处理搜索框的交互。
1. 搜索函数实现
onClickInput函数在用户点击搜索框时触发，显示加载提示并跳转到搜索页面。
// pages/home/home.js
Page({onClickInput: function() {wx.showLoading({title: '努力加载中...',});wx.navigateTo({url: '/pages/search/search' // 请根据实际路径修改});},// ...其他函数
});2. WXML 结构
在home.wxml中，我们使用<van-search>组件创建搜索框，并使用<swiper>组件创建轮播图。
<!--pages/home/home.wxml-->
<view class="home"><!-- 搜索框开始 --><van-search shape="round" background="#fff" placeholder="搜索咖啡店" bind:click-input="onClickInput"></van-search><!-- 搜索框结束 --><!-- 轮播图开始 --><swiper indicator-dots indicator-active-color="#ff7173" autoplay interval="3000" circular><swiper-item wx:for="{{bannerList}}" wx:key="index"><image src="{{item}}" referrerPolicy="no-referrer" class="b-img" /></swiper-item></swiper><!-- 轮播图结束 -->
</view>结语
通过上述步骤，我们成功在“我的咖啡店”小程序的首页实现了搜索框功能。用户可以通过点击搜索框跳转到搜索页面，进行搜索操作。
完整代码
home.js
// pages/home/home.jsPage({//页面的初始数据data: {// 轮播图数据bannerList: ['https://i-blog.csdnimg.cn/direct/420b00699f0643d88fd7bd549cba78a4.png','https://i-blog.csdnimg.cn/direct/d41b0f66fc404023b4796cb0dd8bafaa.png','https://i-blog.csdnimg.cn/direct/92f3b715f4d94723a6b9b1d941d16aa3.png','https://i-blog.csdnimg.cn/direct/2c21368a3870417f9ca522b2c0975b5d.png']},// 搜索函数，点击搜索框时触发onClickInput: function () {// 加载提示wx.showLoading({title: '努力加载中...',});// 直接跳转到搜索页面wx.navigateTo({url: '/pages/search/search' // 请根据实际路径修改});},})home.wxml
<!--pages/home/home.wxml--><!-- div ==> view img ==> image --><view class="home"><!-- 搜索框开始 --><van-search shape="round" background="#fff" placeholder="{{defaultSearchHint}}" bind:click-input="onClickInput"></van-search><!-- 搜索框结束 --><!-- 轮播图开始 --><swiper indicator-dots indicator-active-color="#ff7173" autoplay interval="3000" circular><!-- wx:for="{{数据}}" wx:key 默认 index下标 item每一项 --><swiper-item wx:for="{{bannerList}}" wx:key="index"><image src="{{item}}" referrerPolicy="no-referrer" class="b-img" /></swiper-item></swiper><!-- 轮播图结束 --></view>展示
相关文章：
【微信小程序】3|首页搜索框 | 我的咖啡店-综合实训
首页-搜索框-跳转 引言 在微信小程序中，首页的搜索框是用户交互的重要入口。本文将通过“我的咖啡店”小程序的首页搜索框实现，详细介绍如何在微信小程序中创建和处理搜索框的交互。 1. 搜索函数实现 onClickInput函数在用户点击搜索框时触发&#x…...
虚幻引擎是什么？
Unreal Engine，是一款由Epic Games开发的游戏引擎。该引擎主要是为了开发第一人称射击游戏而设计，但现在已经被成功地应用于开发模拟游戏、恐怖游戏、角色扮演游戏等多种不同类型的游戏。虚幻引擎除了被用于开发游戏，现在也用于电影的虚拟制片…...
分布式光纤传感|分布式光纤测温|线型光纤感温火灾探测器DTS|DTS|DAS|BOTDA的行业16年的总结【2024年】
背景： 从2008年，从事分布式光纤传感行业已经过了16年时间了，依稀记得2008年，看的第一遍论文就是中国计量大学张在宣老爷子的分布式光纤测温综述，我的经历算是行业内极少数最丰富的之一。混过学术圈： 发表…...
【无标题】学生信息管理系统界面
网页是vue框架，后端直接python写的没使用框架...
ES7+ React/Redux/GraphQL/React-Native snippets 使用指南
VS Code React Snippets 使用指南 目录 简介基础方法React 相关React Native 相关Redux 相关PropTypes 相关控制台相关React 组件相关 简介 ES7 React/Redux/GraphQL/React-Native snippets 是一个用于 VS Code 的代码片段插件，它提供了大量用于 React 开发的代…...
Java中三大构建工具的发展历程（Ant、Maven和Gradle）
🐸 背景 我们要写一个Java程序，一般的步骤是编译，测试，打包。 这个构建的过程，如果文件比较少，我们可以手动使用java, javac,jar命令去做这些事情。但当工程越来越大，文件越来越多，…...
【国产NI替代】32振动/电压（配置复合型）高精度终端采集板卡，应用于复杂的大型测量场景
32振动/电压（配置复合型）高精度终端采集板卡 采用 EP4CE115F29I7 型号的 FPGA ，是一款 高精度，多通道动态信号采集器，主要应用 在复杂的大型测量并对成本要求不敏感的场 合，默认具备 8 个测量板卡&#…...
)
服务器上加入SFTP------(小白篇 1)
在服务器上配置 SFTP (基于 SSH 的文件传输协议) 通常比传统 FTP 更安全，因为它默认加密通信。以下是详细的配置步骤，以 Ubuntu 或 CentOS 为例。 1.服务器上加入SFTP------(小白篇 1) 2.加入SFTP 用户------(小白篇 2) 3.代码加入SFTP JAVA —&#…...
突围边缘：OpenAI开源实时嵌入式API，AI触角延伸至微观世界
当OpenAI宣布开源其名为openai-realtime-embedded-sdk的实时嵌入式API时，整个科技界都为之震惊。这一举动意味着，曾经遥不可及的强大AI能力，如今可以被嵌入到像ESP32这样的微型控制器中，真正地将AI的触角延伸到了物联网和边缘计算…...
【含开题报告+文档+PPT+源码】基于SpringBoot+Vue的影视网站系统的设计与实现
开题报告 随着互联网的快速发展和普及，人们对于娱乐和信息的需求越来越大。影视网站作为一种提供短视频、影视、电视剧、综艺节目等视频资源的网站，受到了广大用户的喜爱。然而，现有的影视网站系统仍然存在着一些安全性不强，用户…...
 : 全年排班日历)
前端技术(26) : 全年排班日历
来源: 通义千问 效果图 代码 <!DOCTYPE html> <html lang"zh-CN"><head><meta charset"UTF-8"><title>年度日历</title><style>body {font-family: Arial, sans-serif;}.calendar-container {margin: 20px au…...
Linux网络——TCP的运用
系列文章目录 文章目录 系列文章目录一、服务端实现1.1 创建套接字socket1.2 指定网络接口并bind2.3 设置监听状态listen2.4 获取新链接accept2.5 接收数据并处理（服务）2.6 整体代码 二、客户端实现2.1 创建套接字socket2.2 指定网络接口2.3 发起链接con…...
Elasticsearch 数据存储底层机制详解
Elasticsearch 数据存储底层机制详解 Elasticsearch 的底层存储机制依赖 Lucene 来实现数据的组织和管理。下面从数据存储的 流转过程 和 管理机制 两个方面来详细说明。 1. 数据存储流程 当一个文档通过 REST API 被写入 Elasticsearch 时，会经历以下流程&#x…...
Spring Boot 中 Map 的最佳实践
在Spring Boot中使用Map时，请遵循以下最佳实践: 1.避免在Controller中 直接使用Map。应该使用RequestBody 接收-个DTO对象或者 RequestParam接收参数，然后在Service中处 理Map。 2.避免在Service中 直接使用原始的Map。应该使用Autowired 注入-个专门…...
es6 字符串每隔几个中间插入一个逗号
const insertCommaEveryNChars (str, n) > {// 将字符串转换为数组，以便我们可以更容易地操作每个字符const chars str.split();// 使用map遍历数组，并在每隔n个字符后插入逗号const result chars.map((char, index) > {// 检查当前位置是否是n…...
区块链共识机制深度揭秘：从PoW到PoS，谁能主宰未来？
区块链的技术背后，最大的挑战之一就是如何让多个分布在全球各地的节点在没有中心化管理者的情况下达成一致，确保数据的一致性和安全性。这一切都依赖于区块链的核心——共识机制。共识机制不仅决定了区块链的安全性、效率和去中心化程度，还对…...
)
SQL Server 新建 用户 登录失败。 (Microsoft SQL Server,错误: 18456)
新建用户后用SQLserver shen身份验证一直提示用户登录用户 登录失败。 (Microsoft SQL Server,错误: 18456)。 问题： 新建标题: 连接到服务器 无法连接到 DESKTOP-GKBXLEE。 其他信息: 用户 ‘’ 登录失败。 (Microsoft SQL Server，错误: 18456) 解…...
AW36518芯片手册解读（3）
接前一篇文章：AW36518芯片手册解读（2） 二、详述 3. 功能描述 （1）上电复位 当电源电压VIN降至预定义电压VPOR（典型值为2.0V）以下时，该设备会产生复位信号以执行上电复位操作&#x…...
有没有免费提取音频的软件？音频编辑软件介绍！
出于工作和生活娱乐等原因，有时候我们需要把音频单独提取出来（比如歌曲伴奏、人声清唱等、乐器独奏等）。要提取音频必须借助音频处理软件，那么有没有免费提取音频的软件呢？下面我们将为大家介绍几款免费软件࿰…...
一次医院RIS系统的升级
2020-03-11 目录 数据库升级... 1 数据结构升级... 1 系统配置... 2 WEB服务器准备... 3 启动ASP.NET State Service服务... 3 检查IIS. 4 发布站点... 4 添加应用程序池... 4 发布网站... 5 处理打印模板... 6 web.config的配置... 6 处理图片文件目录... 6 修改W…...
clickhouse测试报告
一、背景 针对当前实施的项目，面临着两个主要挑战：一是需要存储更详细的原始数据和中间数据，二是现有基于MySQL的数据存储解决方案在数据量增长时性能受限，特别是在进行跨年历史数据的即时分析时。为了解决这些问题…...
Elasticsearch安装和数据迁移
Elasticsearch安装和数据迁移 Elasticsearch安装 下载并解压Elasticsearch 首先下载Elasticsearch的tar.gz文件，并将其解压： wget https://artifacts.elastic.co/downloads/elasticsearch/elasticsearch-8.8.2-linux-x86_64.tar.gz tar -xzf elastics…...
K8s证书过期
part of the existing bootstrap client certificate is expired: 2023-11-27 12:44:12 0000 UTC 查看运行日志： journalctl -xefu kubelet 重新生成证书： #重新生成证书 kubeadm alpha certs renew all #备份旧的配置文件 mv /etc/kubernetes/*.conf…...
JSONException:java.lang.String cannot be converted to JSONObject异常的解决方法
在用org.json.JSONObject解析从网络获取的json数据时，遇到JSONException:java.lang.String cannot be converted to JSONObject，打印字符串，查看json字符串没有问题，研究了好长时间，终于找到问题，造成问题的…...
 --- 整体架构)
[源码解析] 模型并行分布式训练Megatron (2) --- 整体架构
link [源码解析] 模型并行分布式训练Megatron (2) --- 整体架构 目录 [源码解析] 模型并行分布式训练Megatron (2) --- 整体架构 0x00 摘要0x01 启动 1.1 分布式启动1.2 构造基础 1.2.1 获取模型1.2.2 获取数据集1.2.3 步进函数 1.2.3.1 广播数据0x02 Pretrain0x03 初始化 3.1 …...
kubeadm搭建k8s集群
前置环境： 准备三台虚拟机 192.168.1.104（用来做k8s的mater节点） 192.168.1.105（节点node2） 192.168.1.109（节点node3） 关闭防火墙 systemctl stop firewalld systemctl disable firewalld安装…...
家用无线路由器的 2.4GHz 和 5GHz
家中的无线路由器 WiFi 名称有两个，一个后面带有 “5G” 的标记，这让人产生疑问：“连接带‘5G’的 WiFi 是不是速度更快？” 实际上，这里的 “5G” 并不是移动通信中的 5G 网络，而是指路由器的工作频率为 5G…...
#渗透测试#漏洞挖掘#红蓝攻防#漏洞挖掘#未授权漏洞-Es未授权漏洞
免责声明 本教程仅为合法的教学目的而准备，严禁用于任何形式的违法犯罪活动及其他商业行为，在使用本教程前，您应确保该行为符合当地的法律法规，继续阅读即表示您需自行承担所有操作的后果，如有异议，请立即停…...
Windows 使用 非安装版MySQL 8
1.下载MySQL 8 https://cdn.mysql.com//Downloads/MySQL-8.0/mysql-8.0.40-winx64.zip 2.创建my.ini 下载解压后，发现根目录没有my.ini文件，需手动创建 my.ini # For advice on how to change settings please see # http://dev.mysql.com/doc/refma…...
nginx Rewrite 相关功能
一、Nginx Rewrite 概述 定义 Nginx 的 Rewrite 模块允许对请求的 URI 进行重写操作。它可以基于一定的规则修改请求的 URL 路径，然后将请求定向到新的 URL 地址，这在很多场景下都非常有用，比如实现 URL 美化、网站重构后的 URL 跳转等。主要…...
2024年AI相关的论文写作经验（附实践资料下载）
在撰写AI相关的论文时，以下是一些实用的经验和技巧： 明确写作目标：在开始写作之前，明确你的论文类型（期刊论文、毕业论文等）和目标，这将影响你的写作方式和工具选择。 AI辅助文献检索ÿ…...
List详解
List详解 在Java中，List是一个接口，它继承自Collection接口。List接口为数据的有序集合提供了操作接口，其中可以包含重复的元素。这个接口的实现类以特定的方式存储元素，允许元素根据索引进行访问，同时还支持通过迭代…...
Flutter实现可拖拽操作Draggable
文章目录 1. Draggable 控件的构造函数主要参数： 2. Draggable 的工作原理3. 常见用法示例 1：基本的拖拽控件解释：示例 2：与 DragTarget 配合使用解释： 4. Draggable 的回调详解5. 总结 Draggable 是 Flutter 中一个用…...
【QSS样式表 - ⑥】：QPushButton控件样式
文章目录 QPushBUtton控件样式QSS示例 QPushBUtton控件样式 常用子控件 常用伪状态 QSS示例 代码： QPushButton {background-color: #99B5D1;color: white;font-weigth: bold;border-radius: 20px; }QPushButton:hover {background-color: red; }QPushButton:p…...
DPO（Direct Preference Optimization）算法解释：中英双语
中文版 DPO paper: https://arxiv.org/pdf/2305.18290 DPO 算法详解：从理论到实现 1. 什么是 DPO？ DPO（Direct Preference Optimization）是一种直接基于人类偏好进行优化的算法，旨在解决从人类偏好数据中训练出表现…...
_kaic)
springboot495基于java的物资综合管理系统的设计与实现(论文+源码)_kaic
摘 要 如今社会上各行各业，都喜欢用自己行业的专属软件工作，互联网发展到这个时候，人们已经发现离不开了互联网。新技术的产生，往往能解决一些老技术的弊端问题。因为传统物资综合管理系统信息管理难度大，容错率低&am…...
JavaScript语言的编程范式
JavaScript：面向对象与函数式编程的双重奏 在编程世界中，JavaScript 无疑是一颗璀璨的明星，它不仅主宰着前端开发领域，还在后端、桌面应用、甚至物联网设备上展现出了强大的生命力。JavaScript 的魅力在于其灵活多变的编程范式&a…...
MyBatis动态 SQL 的执行原理
MyBatis 动态 SQL 是 MyBatis 框架中的一个重要特性，它允许开发者根据条件动态地生成不同的 SQL 语句。通过使用动态 SQL，开发者可以根据传入的参数动态地构建 SQL 查询，这样就避免了写多个 SQL 语句，提升了代码的灵活性和可维护性…...
PostgreSQL自带的一个命令行工具pg_waldump
pg_waldump是PostgreSQL自带的一个命令行工具，用于以人类可读的形式显示PostgreSQL数据库集簇的预写式日志（Write-Ahead Logging，WAL）。以下是对pg_waldump的详细介绍： 一、主要用途 pg_waldump主要用于调试或教育目…...
K8s 常用资源介绍
在 Kubernetes 中，资源指的是可以在集群中管理的对象（Objects）。这些资源用来定义和控制应用、服务、以及集群的状态。以下是 Kubernetes 中常见的资源及其用途介绍： 1. 工作负载资源（Workloads Resources）…...
基于 Python 大数据的拼团购物数据分析系统的设计与实现
标题:基于 Python 大数据的拼团购物数据分析系统的设计与实现 内容:1.摘要 本文设计并实现了一个基于 Python 大数据的拼团购物数据分析系统。通过对拼团购物数据的收集、清洗和分析，系统能够为商家提供用户行为分析、商品销售情况分析等功能，帮助商家更…...
finalshell密码解密
finalshell密码解密 在线网站运行java https://c.runoob.com/compile/10/ import java.io.ByteArrayOutputStream; import java.io.DataOutputStream; import java.io.IOException; import java.math.BigInteger; import java.security.MessageDigest; import java.security.N…...
利用Java爬虫速卖通按关键字搜索AliExpress商品
在这个信息爆炸的时代，数据的价值日益凸显。对于电商领域的从业者来说，能够快速获取商品信息成为了一项重要的技能。速卖通（AliExpress）作为全球领先的跨境电商平台，拥有海量的商品数据。本文将介绍如何使用Java语言编…...
每天40分玩转Django：Django缓存
一、Django缓存概述 在高并发的Web应用中,缓存是提高性能的重要手段。通过缓存频繁访问的数据,可以显著减少数据库查询和渲染模板的时间,从而加快响应速度,提升用户体验。Django提供了多层级的缓存方案,可以灵活地满足不同场景下的缓存需求。 Django支持的缓存方式包括: 视图…...
matrix-breakout-2-morpheus
将这一关的镜像导入虚拟机，出现以下页面表示导入成功 以root身份打开kali终端，输入以下命令，查看靶机ip arp-scan -l 根据得到的靶机ip，浏览器访问进入环境 我们从当前页面没有得到有用的信息，尝试扫描后台 发现有一个…...
第七节：GLM-4v-9b模型的视觉模型源码解读
文章目录 前言一、EVA2CLIPModel视觉编码模块结构二、PatchEmbedding图像分块源码解读三、GLM的transformer结构源码解读四、GLU映射方法源码解读前言 清华智普的GLM-4v-9b模型，作为优化的多模态大模型，特别适用于国内应用场景，解决了国外模型本地化不足的问题。本专栏提供…...
@RestControllerAdvice和@ControllerAdvice的区别
RestControllerAdvice 和 ControllerAdvice 都是 Spring 框架中的注解，用于定义全局的异常处理、数据绑定、模型属性共享等功能。它们的区别主要体现在返回值的处理和适用的场景。 1. ControllerAdvice 功能： ControllerAdvice 是 Spring MVC 提供的全局…...
c++ 类似与c# 线程 AutoResetEvent 和 ManualResetEvent的实现
在 C 中，没有直接类似于 C# 的 AutoResetEvent 和 ManualResetEvent 的类，但可以通过一些线程同步机制来实现类似的功能。C 提供了一些线程同步原语，如 std::condition_variable 和 std::mutex，这些可以用来模拟类似于 C# 中 Auto…...
简单贪吃蛇小游戏的设计与实现
文章目录 1、知识预备1.1 WIN32 API1.1.1 什么是WIN32 API1.1.2 了解部分WIN32 API1.1.2.1 控制台坐标1.1.2.2 控制台光标1.1.2.3 获取键盘按键情况 2.1 宽字符2.1.1 C语言的国际化2.1.2 宽字符的打印 2、 贪吃蛇游戏设计2.1 游戏开始2.2 游戏运行2.2.1 更新分数2.2.2 按键检测…...
)
动态规划＜五＞ 子数组问题(含对应LeetcodeOJ题)
目录 引例 经典LeetcodeOJ题 1.第一题 2.第二题 3.第三题 4.第四题 5.第五题 6.第六题 7.第七题 引例 OJ传送门 Leetcode<53> 最大子数组和 画图分析: 使用动态规划解决 1.状态表示 dp[i]表示以i位置为结尾的所有子数组中的最大和 2.状态转移方程 子数组的问题可以…...