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

【微信小程序】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|首页搜索框 | 我的咖啡店-综合实训

首页-搜索框-跳转 引言 在微信小程序中&#xff0c;首页的搜索框是用户交互的重要入口。本文将通过“我的咖啡店”小程序的首页搜索框实现&#xff0c;详细介绍如何在微信小程序中创建和处理搜索框的交互。 1. 搜索函数实现 onClickInput函数在用户点击搜索框时触发&#x…...

独一无二,万字详谈——Linux之文件管理

Linux文件部分的学习&#xff0c;有这一篇的博客足矣! 目录 一、文件的命名规则 1、可以使用哪些字符&#xff1f; 2、文件名的长度 3、Linux文件名的大小写 4、Linux文件扩展名 二、文件管理命令 1、目录的创建/删除 &#xff08;1&#xff09;、目录的创建 ① mkdir…...

React:前端开发领域的璀璨之星

亲爱的小伙伴们&#x1f618;&#xff0c;在求知的漫漫旅途中&#xff0c;若你对深度学习的奥秘、Java 与 Python 的奇妙世界&#xff0c;亦或是读研论文的撰写攻略有所探寻&#x1f9d0;&#xff0c;那不妨给我一个小小的关注吧&#x1f970;。我会精心筹备&#xff0c;在未来…...

C/C++ 数据结构与算法【哈夫曼树】 哈夫曼树详细解析【日常学习,考研必备】带图+详细代码

哈夫曼树&#xff08;最优二叉树&#xff09; 1&#xff09;基础概念 **路径&#xff1a;**从树中一个结点到另一个结点之间的分支构成这两个结点间的路径。 **结点的路径长度&#xff1a;**两结点间路径上的分支数。 **树的路径长度&#xff1a;**从树根到每一个结点的路径…...

基于NodeMCU的物联网窗帘控制系统设计

最终效果 基于NodeMCU的物联网窗帘控制系统设计 项目介绍 该项目是“物联网实验室监测控制系统设计&#xff08;仿智能家居&#xff09;”项目中的“家电控制设计”中的“窗帘控制”子项目&#xff0c;最前者还包括“物联网设计”、“环境监测设计”、“门禁系统设计计”和“小…...

喜报 | 擎创科技入围上海市优秀信创解决方案

近日&#xff0c;由上海市经信委组织的“2024年上海市优秀信创解决方案”征集遴选活动圆满落幕&#xff0c;擎创科技凭借实践经验优秀的《擎创夏洛克智能预警与应急处置解决方案》成功入选“2024年上海市优秀信创解决方案”名单。 为激发创新活力&#xff0c;发挥标杆作用&…...

windows10下使用沙盒多开uiautoanimation可行性验证

文章目录 ⭐前言⭐sandboxie下载使用⭐pyinstaller打包python的uiautoanimation成exe⭐结论⭐结束 ⭐前言 大家好&#xff0c;我是yma16&#xff0c;本文分享windows下使用沙盒多开uiautoanimation可行性验证。 背景 实现多开应用程序从而进行自动化控制&#xff0c;批量处理大…...

电脑报错wsdprintproxy.dll丢失?修复wsdprintproxy.dll文件缺失的实用方法

在使用电脑的过程中&#xff0c;我们可能会遇到各种各样的错误提示&#xff0c;其中之一就是系统提示wsdprintproxy.dll文件丢失。这个DLL文件是Windows操作系统中的一个重要组件&#xff0c;它通常与Windows的打印功能相关。当这个文件丢失或损坏时&#xff0c;可能会导致打印…...

Kubernetes 的资源管理方式

集群架构 Docker 是每一个节点&#xff08;包括 Master 节点和 Node 节点&#xff09;的运行时环境。 kubelet 负责控制所有容器的启动和停止等&#xff0c;保证每个节点&#xff08;包括 Master 节点和 Node 节点&#xff09;正常工作&#xff0c;并且帮助 Node 节点和 Maste…...

layui动态拼接生成下拉框验证必填项失效问题

利用 jQuery 动态拼接下拉框时&#xff0c;lay-verify"required" 失效了&#xff0c;有以下几种原因。 1. <form></form>标签 加入 layui 类&#xff0c;class"layui-form" 。提交按钮上加自动提交&#xff0c;lay-submit ""; 。需…...

VUE3+VITE简单的跨域代理配置

出于安全考虑&#xff0c;未设置前端白名单&#xff0c;前端开发时&#xff0c;需要配置代理。 在本地创建一个虚拟服务器&#xff0c;发送请求数据&#xff0c;同时接受请求的数据&#xff0c; 利用服务器与服务器间&#xff0c;交互&#xff0c;不会有跨域问题&#xff0c;也…...

Xdebug

1、开启xdebug扩展 2、修改一下php.ini文件 xdebug.remote_enable 1 xdebug.remote_autostart 13、vscode安装插件php debug 4、生成launch.json文件&#xff0c;好像啥都不用改 5、vscode没有配置php路径的&#xff0c;需要去配置&#xff1a; 6、发起请求 8、代码断…...

IDEA | SpringBoot 项目中使用 Apifox 上传接口

目录 1 安装 Apifox Helper 插件2 获取 Apifox 的 API 访问令牌3 IDEA 中设置 API 访问令牌4 IDEA 中上传接口5 常见问题5.1 如何自动设置目录名5.2 如何自动设置接口名5.3 如何更改上传位置 Apifox 官方指南&#xff1a; https://apifox.com/help/applications-and-p…...

列表分页返回对象

列表分页返回对象 仅针对于新项目&#xff0c;因为一般进入公司后项目都是已经搭建好的&#xff0c;只需要在原有框架基础上操作就可以了&#xff0c;但是遇到从0开始的项目并且还没有架构需要自己搭框架的时候就需要自己想办法找各种封装格式。 下面记录分页列表返回的封装格式…...

微软edge浏览器 v131.0.2903.99便携版

前言 Microsoft Edge浏览器是个新浏览器&#xff0c;它用起来很简单&#xff0c;界面也很清爽。这个浏览器功能特别多&#xff0c;里面还带了微软的小助手Contana&#xff0c;能帮用户做不少贴心的事儿。它支持安装各种小工具&#xff08;插件&#xff09;&#xff0c;还能在网…...

Prometheus 专栏 —— Prometheus入门介绍

Prometheus 是? Prometheus 是一个开源的服务监控系统和时序数据库&#xff0c;主要用于收集、存储、查询和告警时间序列数据&#xff0c;这些数据通常反映了系统或者应用的状态或性能 Prometheus 的基本功能是? 数据采集数据存储数据查询告警通知 Prometheus 监控核心组件?…...

元宇宙在教育行业主要有哪些应用场景?

近两年来&#xff0c;元宇宙风潮在全球范围内迅速掀起了一股新的浪潮&#xff0c;“元宇宙”已成为各行各业探索新发展方向的热门话题&#xff0c;教育行业亦不例外。那么元宇宙在教育行业主要有哪些应用场景呢&#xff1f; 以下为主要适用场景&#xff1a; 课程实践&#xff…...

JZ31 栈的压入、弹出序列

题目来源&#xff1a;栈的压入、弹出序列_牛客题霸_牛客网 题目&#xff1a;如下 输入两个整数序列&#xff0c;第一个序列表示栈的压入顺序&#xff0c;请判断第二个序列是否可能为该栈的弹出顺序。假设压入栈的所有数字均不相等。例如序列1,2,3,4,5是某栈的压入顺序&#xf…...

电脑缺失libcurl.dll怎么解决?详解电脑libcurl.dll文件丢失问题

一、libcurl.dll文件丢失的原因 libcurl.dll是一个用于处理URL传输的库文件&#xff0c;广泛应用于各种基于网络的应用程序。当这个文件丢失时&#xff0c;可能会导致相关应用程序无法正常运行。以下是libcurl.dll文件丢失的一些常见原因&#xff1a; 软件安装或卸载不完整&a…...

Ribbon、Nacos

目录 Ribbon 常见负载算法 切换负载均衡算法 Nacos注册中心 下载和运行 微服务模块接入注册中心 consumer-80模块 配置类 Controller Nacos配置中心 Nacos分类配置&#xff08;实现配置隔离&#xff09; DataID方案 Group方案 Namespace方案 总结 Ribbon Ribbon…...

《Qt C++ 与 OpenCV:解锁视频播放程序设计的奥秘》

引言:探索视频播放程序设计之旅 在当今数字化时代,多媒体应用已渗透到我们生活的方方面面,从日常的视频娱乐到专业的视频监控、视频会议系统,视频播放程序作为多媒体应用的核心组成部分,扮演着至关重要的角色。无论是在个人电脑、移动设备还是智能电视等平台上,用户都期望…...

12.找到字符串中所有字母异位词

&#x1f9e0; 题目解析 题目描述&#xff1a; 给定两个字符串 s 和 p&#xff0c;找出 s 中所有 p 的字母异位词的起始索引。 返回的答案以数组形式表示。 字母异位词定义&#xff1a; 若两个字符串包含的字符种类和出现次数完全相同&#xff0c;顺序无所谓&#xff0c;则互为…...

mysql已经安装,但是通过rpm -q 没有找mysql相关的已安装包

文章目录 现象&#xff1a;mysql已经安装&#xff0c;但是通过rpm -q 没有找mysql相关的已安装包遇到 rpm 命令找不到已经安装的 MySQL 包时&#xff0c;可能是因为以下几个原因&#xff1a;1.MySQL 不是通过 RPM 包安装的2.RPM 数据库损坏3.使用了不同的包名或路径4.使用其他包…...

AI病理诊断七剑下天山,医疗未来触手可及

一、病理诊断困局&#xff1a;刀尖上的医学艺术 1.1 金标准背后的隐痛 病理诊断被誉为"诊断的诊断"&#xff0c;医生需通过显微镜观察组织切片&#xff0c;在细胞迷宫中捕捉癌变信号。某省病理质控报告显示&#xff0c;基层医院误诊率达12%-15%&#xff0c;专家会诊…...

AGain DB和倍数增益的关系

我在设置一款索尼CMOS芯片时&#xff0c;Again增益0db变化为6DB&#xff0c;画面的变化只有2倍DN的增益&#xff0c;比如10变为20。 这与dB和线性增益的关系以及传感器处理流程有关。以下是具体原因分析&#xff1a; 1. dB与线性增益的换算关系 6dB对应的理论线性增益应为&…...

基于SpringBoot在线拍卖系统的设计和实现

摘 要 随着社会的发展&#xff0c;社会的各行各业都在利用信息化时代的优势。计算机的优势和普及使得各种信息系统的开发成为必需。 在线拍卖系统&#xff0c;主要的模块包括管理员&#xff1b;首页、个人中心、用户管理、商品类型管理、拍卖商品管理、历史竞拍管理、竞拍订单…...

SQL慢可能是触发了ring buffer

简介 最近在进行 postgresql 性能排查的时候,发现 PG 在某一个时间并行执行的 SQL 变得特别慢。最后通过监控监观察到并行发起得时间 buffers_alloc 就急速上升,且低水位伴随在整个慢 SQL,一直是 buferIO 的等待事件,此时也没有其他会话的争抢。SQL 虽然不是高效 SQL ,但…...

JavaScript 数据类型详解

JavaScript 数据类型详解 JavaScript 数据类型分为 原始类型&#xff08;Primitive&#xff09; 和 对象类型&#xff08;Object&#xff09; 两大类&#xff0c;共 8 种&#xff08;ES11&#xff09;&#xff1a; 一、原始类型&#xff08;7种&#xff09; 1. undefined 定…...

Windows安装Miniconda

一、下载 https://www.anaconda.com/download/success 二、安装 三、配置镜像源 Anaconda/Miniconda pip 配置清华镜像源_anaconda配置清华源-CSDN博客 四、常用操作命令 Anaconda/Miniconda 基本操作命令_miniconda创建环境命令-CSDN博客...

LLaMA-Factory 微调 Qwen2-VL 进行人脸情感识别(二)

在上一篇文章中,我们详细介绍了如何使用LLaMA-Factory框架对Qwen2-VL大模型进行微调,以实现人脸情感识别的功能。本篇文章将聚焦于微调完成后,如何调用这个模型进行人脸情感识别的具体代码实现,包括详细的步骤和注释。 模型调用步骤 环境准备:确保安装了必要的Python库。…...