【微信小程序】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…...
独一无二,万字详谈——Linux之文件管理
Linux文件部分的学习,有这一篇的博客足矣! 目录 一、文件的命名规则 1、可以使用哪些字符? 2、文件名的长度 3、Linux文件名的大小写 4、Linux文件扩展名 二、文件管理命令 1、目录的创建/删除 (1)、目录的创建 ① mkdir…...
React:前端开发领域的璀璨之星
亲爱的小伙伴们😘,在求知的漫漫旅途中,若你对深度学习的奥秘、Java 与 Python 的奇妙世界,亦或是读研论文的撰写攻略有所探寻🧐,那不妨给我一个小小的关注吧🥰。我会精心筹备,在未来…...
C/C++ 数据结构与算法【哈夫曼树】 哈夫曼树详细解析【日常学习,考研必备】带图+详细代码
哈夫曼树(最优二叉树) 1)基础概念 **路径:**从树中一个结点到另一个结点之间的分支构成这两个结点间的路径。 **结点的路径长度:**两结点间路径上的分支数。 **树的路径长度:**从树根到每一个结点的路径…...
基于NodeMCU的物联网窗帘控制系统设计
最终效果 基于NodeMCU的物联网窗帘控制系统设计 项目介绍 该项目是“物联网实验室监测控制系统设计(仿智能家居)”项目中的“家电控制设计”中的“窗帘控制”子项目,最前者还包括“物联网设计”、“环境监测设计”、“门禁系统设计计”和“小…...
喜报 | 擎创科技入围上海市优秀信创解决方案
近日,由上海市经信委组织的“2024年上海市优秀信创解决方案”征集遴选活动圆满落幕,擎创科技凭借实践经验优秀的《擎创夏洛克智能预警与应急处置解决方案》成功入选“2024年上海市优秀信创解决方案”名单。 为激发创新活力,发挥标杆作用&…...
windows10下使用沙盒多开uiautoanimation可行性验证
文章目录 ⭐前言⭐sandboxie下载使用⭐pyinstaller打包python的uiautoanimation成exe⭐结论⭐结束 ⭐前言 大家好,我是yma16,本文分享windows下使用沙盒多开uiautoanimation可行性验证。 背景 实现多开应用程序从而进行自动化控制,批量处理大…...
电脑报错wsdprintproxy.dll丢失?修复wsdprintproxy.dll文件缺失的实用方法
在使用电脑的过程中,我们可能会遇到各种各样的错误提示,其中之一就是系统提示wsdprintproxy.dll文件丢失。这个DLL文件是Windows操作系统中的一个重要组件,它通常与Windows的打印功能相关。当这个文件丢失或损坏时,可能会导致打印…...
Kubernetes 的资源管理方式
集群架构 Docker 是每一个节点(包括 Master 节点和 Node 节点)的运行时环境。 kubelet 负责控制所有容器的启动和停止等,保证每个节点(包括 Master 节点和 Node 节点)正常工作,并且帮助 Node 节点和 Maste…...
layui动态拼接生成下拉框验证必填项失效问题
利用 jQuery 动态拼接下拉框时,lay-verify"required" 失效了,有以下几种原因。 1. <form></form>标签 加入 layui 类,class"layui-form" 。提交按钮上加自动提交,lay-submit ""; 。需…...
VUE3+VITE简单的跨域代理配置
出于安全考虑,未设置前端白名单,前端开发时,需要配置代理。 在本地创建一个虚拟服务器,发送请求数据,同时接受请求的数据, 利用服务器与服务器间,交互,不会有跨域问题,也…...
Xdebug
1、开启xdebug扩展 2、修改一下php.ini文件 xdebug.remote_enable 1 xdebug.remote_autostart 13、vscode安装插件php debug 4、生成launch.json文件,好像啥都不用改 5、vscode没有配置php路径的,需要去配置: 6、发起请求 8、代码断…...
IDEA | SpringBoot 项目中使用 Apifox 上传接口
目录 1 安装 Apifox Helper 插件2 获取 Apifox 的 API 访问令牌3 IDEA 中设置 API 访问令牌4 IDEA 中上传接口5 常见问题5.1 如何自动设置目录名5.2 如何自动设置接口名5.3 如何更改上传位置 Apifox 官方指南: https://apifox.com/help/applications-and-p…...
列表分页返回对象
列表分页返回对象 仅针对于新项目,因为一般进入公司后项目都是已经搭建好的,只需要在原有框架基础上操作就可以了,但是遇到从0开始的项目并且还没有架构需要自己搭框架的时候就需要自己想办法找各种封装格式。 下面记录分页列表返回的封装格式…...
微软edge浏览器 v131.0.2903.99便携版
前言 Microsoft Edge浏览器是个新浏览器,它用起来很简单,界面也很清爽。这个浏览器功能特别多,里面还带了微软的小助手Contana,能帮用户做不少贴心的事儿。它支持安装各种小工具(插件),还能在网…...
Prometheus 专栏 —— Prometheus入门介绍
Prometheus 是? Prometheus 是一个开源的服务监控系统和时序数据库,主要用于收集、存储、查询和告警时间序列数据,这些数据通常反映了系统或者应用的状态或性能 Prometheus 的基本功能是? 数据采集数据存储数据查询告警通知 Prometheus 监控核心组件?…...
元宇宙在教育行业主要有哪些应用场景?
近两年来,元宇宙风潮在全球范围内迅速掀起了一股新的浪潮,“元宇宙”已成为各行各业探索新发展方向的热门话题,教育行业亦不例外。那么元宇宙在教育行业主要有哪些应用场景呢? 以下为主要适用场景: 课程实践ÿ…...
JZ31 栈的压入、弹出序列
题目来源:栈的压入、弹出序列_牛客题霸_牛客网 题目:如下 输入两个整数序列,第一个序列表示栈的压入顺序,请判断第二个序列是否可能为该栈的弹出顺序。假设压入栈的所有数字均不相等。例如序列1,2,3,4,5是某栈的压入顺序…...
电脑缺失libcurl.dll怎么解决?详解电脑libcurl.dll文件丢失问题
一、libcurl.dll文件丢失的原因 libcurl.dll是一个用于处理URL传输的库文件,广泛应用于各种基于网络的应用程序。当这个文件丢失时,可能会导致相关应用程序无法正常运行。以下是libcurl.dll文件丢失的一些常见原因: 软件安装或卸载不完整&a…...
Ribbon、Nacos
目录 Ribbon 常见负载算法 切换负载均衡算法 Nacos注册中心 下载和运行 微服务模块接入注册中心 consumer-80模块 配置类 Controller Nacos配置中心 Nacos分类配置(实现配置隔离) DataID方案 Group方案 Namespace方案 总结 Ribbon Ribbon…...
Vue记事本应用实现教程
文章目录 1. 项目介绍2. 开发环境准备3. 设计应用界面4. 创建Vue实例和数据模型5. 实现记事本功能5.1 添加新记事项5.2 删除记事项5.3 清空所有记事 6. 添加样式7. 功能扩展:显示创建时间8. 功能扩展:记事项搜索9. 完整代码10. Vue知识点解析10.1 数据绑…...
Admin.Net中的消息通信SignalR解释
定义集线器接口 IOnlineUserHub public interface IOnlineUserHub {/// 在线用户列表Task OnlineUserList(OnlineUserList context);/// 强制下线Task ForceOffline(object context);/// 发布站内消息Task PublicNotice(SysNotice context);/// 接收消息Task ReceiveMessage(…...
大语言模型如何处理长文本?常用文本分割技术详解
为什么需要文本分割? 引言:为什么需要文本分割?一、基础文本分割方法1. 按段落分割(Paragraph Splitting)2. 按句子分割(Sentence Splitting)二、高级文本分割策略3. 重叠分割(Sliding Window)4. 递归分割(Recursive Splitting)三、生产级工具推荐5. 使用LangChain的…...
渲染学进阶内容——模型
最近在写模组的时候发现渲染器里面离不开模型的定义,在渲染的第二篇文章中简单的讲解了一下关于模型部分的内容,其实不管是方块还是方块实体,都离不开模型的内容 🧱 一、CubeListBuilder 功能解析 CubeListBuilder 是 Minecraft Java 版模型系统的核心构建器,用于动态创…...
工程地质软件市场:发展现状、趋势与策略建议
一、引言 在工程建设领域,准确把握地质条件是确保项目顺利推进和安全运营的关键。工程地质软件作为处理、分析、模拟和展示工程地质数据的重要工具,正发挥着日益重要的作用。它凭借强大的数据处理能力、三维建模功能、空间分析工具和可视化展示手段&…...
相机Camera日志分析之三十一:高通Camx HAL十种流程基础分析关键字汇总(后续持续更新中)
【关注我,后续持续新增专题博文,谢谢!!!】 上一篇我们讲了:有对最普通的场景进行各个日志注释讲解,但相机场景太多,日志差异也巨大。后面将展示各种场景下的日志。 通过notepad++打开场景下的日志,通过下列分类关键字搜索,即可清晰的分析不同场景的相机运行流程差异…...
成都鼎讯硬核科技!雷达目标与干扰模拟器,以卓越性能制胜电磁频谱战
在现代战争中,电磁频谱已成为继陆、海、空、天之后的 “第五维战场”,雷达作为电磁频谱领域的关键装备,其干扰与抗干扰能力的较量,直接影响着战争的胜负走向。由成都鼎讯科技匠心打造的雷达目标与干扰模拟器,凭借数字射…...
C++八股 —— 单例模式
文章目录 1. 基本概念2. 设计要点3. 实现方式4. 详解懒汉模式 1. 基本概念 线程安全(Thread Safety) 线程安全是指在多线程环境下,某个函数、类或代码片段能够被多个线程同时调用时,仍能保证数据的一致性和逻辑的正确性…...
CSS | transition 和 transform的用处和区别
省流总结: transform用于变换/变形,transition是动画控制器 transform 用来对元素进行变形,常见的操作如下,它是立即生效的样式变形属性。 旋转 rotate(角度deg)、平移 translateX(像素px)、缩放 scale(倍数)、倾斜 skewX(角度…...
GO协程(Goroutine)问题总结
在使用Go语言来编写代码时,遇到的一些问题总结一下 [参考文档]:https://www.topgoer.com/%E5%B9%B6%E5%8F%91%E7%BC%96%E7%A8%8B/goroutine.html 1. main()函数默认的Goroutine 场景再现: 今天在看到这个教程的时候,在自己的电…...
