微信小程序中点击搜素按钮没有反应,可能是样式问题(按钮被其他元素覆盖或遮挡)

文章目录

      • 1. 确认 `bindtap` 绑定在正确的元素上
      • 2. 检查是否有遮挡或重叠元素
      • 3. 检查 `this` 上下文绑定问题
      • 4. 清除微信小程序开发者工具的缓存
      • 5. 用微信开发者工具查看事件绑定
      • 6. 确保 `handleSearch` 没有拼写错误
      • 进一步调试
  • 1、searchResults.wxml
  • 2、searchResults.wxss
  • 3、searchResults.js
  • 4、searchResults.json

在这里插入图片描述

在这里插入图片描述
如果点击搜索按钮后没有看到 console.log('handleSearch called'); 的输出,说明 handleSearch 函数并未被触发。以下是一些可能的原因和对应的解决方法:

1. 确认 bindtap 绑定在正确的元素上

确保在按钮元素上正确地绑定了 bindtap,如下:

<button class="search-button" bindtap="handleSearch">搜索</button>

确保元素没有被禁用(例如,通过 disabled 属性禁用)。

2. 检查是否有遮挡或重叠元素

在微信小程序中,如果按钮被其他元素覆盖或遮挡,点击事件可能不会生效。检查页面布局,确保按钮没有被其他层级更高的元素覆盖。

3. 检查 this 上下文绑定问题

确保 handleSearch 函数的上下文在 Page 中是正确的。如果是从模板引入的代码或是组件中引用的函数,可能需要显式绑定上下文。

4. 清除微信小程序开发者工具的缓存

有时,微信开发者工具的缓存可能会导致代码变更没有立即生效。尝试以下步骤:

  1. 在微信开发者工具中选择 “编译”
  2. 如果问题依旧,选择 “清除缓存并重新编译”

5. 用微信开发者工具查看事件绑定

在微信开发者工具中查看页面的 DOM 结构,检查按钮的 bindtap 是否被正确绑定。

6. 确保 handleSearch 没有拼写错误

再次确认 handleSearch 函数的名称在 HTML 和 JS 文件中拼写一致。

进一步调试

如果以上步骤无效,请尝试在页面的 onLoad 中手动调用 handleSearch 函数来排查是否是事件绑定问题:

onLoad: function(options) {// 手动调用以确认 handleSearch 能正常运行this.handleSearch();
}

如果手动调用后能看到 console.log('handleSearch called'); 的输出,则可以进一步确认是点击事件未正确触发。

1、searchResults.wxml

<view><view class="search-box"><input class="search-input" placeholder="{{value}}"bindinput="handleSearchInput"  bindconfirm="handleSearch"/><button class="search-button" bindtap="handleSearch">搜索</button></view><!-- 商品搜索结果卡片容器 --><view class="search-result"><block wx:for="{{products}}" wx:key="id"><!-- 商品信息展示区域 --><view class="product-card card-layout-{{cardLayout}}"><!-- 商品图片 --><image class="product-image" src="{{item.image}}"  /><!-- 商品描述和价格 --> <view class="product-info"><text class="product-title">{{item.name}}</text><!-- 商品元信息和价格在同一行显示 --><view class="meta-price-container"><view class="product-meta"><text class="product-origin">{{item.location}}</text><text class="product-barcode">条码:{{item.jancode}}</text></view><view class="product-price"><text class="price">{{item.standardPrice}}<text style="font-size:14rpx;"></text></text></view></view></view></view></block></view>
</view>

2、searchResults.wxss

.search-box {position: relative; /* 使子元素可以相对于此容器定位 */display: inline-block; /* 使容器成为内联块级元素 */padding: 5px;border-radius: 5px;width: 100%; /* 使搜索框占据父容器的宽度 */}
.search-input {font-family: Inter;           /* 设置字体为 Inter */font-size: 26rpx;             /* 字体大小为 26 像素 */font-weight: 400;            /* 字体粗细为正常 (400 代表正常) */line-height: 31.47rpx;        /* 行高为 31.47 像素,控制行间距 */text-align: left;            /* 文本左对齐 */flex: 1;height: 60rpx;border-width: 1rpx;border-style: solid;border-color: rgba(0, 0, 0, 0.1);border-radius: 90rpx;margin-right: 50rpx;margin-left: -5rpx;padding-right: 150rpx;
}
button:not([size=mini]) {margin-left: 15.05rpx;margin-right: auto;width: 148rpx;height: 60rpx;
}
.search-button {position: absolute;top: 50%; /* 将按钮垂直居中 */transform: translateY(-50%); /* 因为 top 是基于元素高度的一半,所以需要向上移动一半的高度 */right: 50rpx;  /* 将按钮置于搜索框的右边缘附近 */width: 148rpx;height: 60rpx;border: none;border-radius: 90rpx;background-color: #0A8E43;/* 按钮背景颜色 */color: white; /* 按钮文字颜色 */cursor: pointer;outline: none; /* 移除默认焦点边框 */font-family: Inter;font-size: 26rpx;font-weight: 400;line-height: 31.47rpx;text-align: center;}

3、searchResults.js

const { baseUrl } = require('../../config/config');
const config = require('../../config/config')
Page({data: {value: '',  // 搜索的关键词token: '',  // 存储的 tokenproducts: [], // 存储搜索结果searchValue: ''},onLoad: function (options) {const { value, token } = options; // 获取传递过来的搜索关键词和 tokenthis.setData({value: value,token: token});// 调用函数进行数据请求this.fetchProducts(value, token);},// 获取搜索结果的函数fetchProducts: function (value, token) {wx.request({url: baseUrl + '/product/admin/list', // 替换为你的 API 地址method: 'GET',data: {field:'name',value: value,page: 0,size: 10},header: {'token': token // 使用从前一个页面传递过来的 token},success: (res) => {if (res.statusCode === 200) {const  products= res.data.data.content || [] // 更新搜索结果// 确保图片URL格式正确const formattedProducts = products.map(product => ({...product,image: `${config.imageBaseUrl}${product.image}`}));this.setData({products:formattedProducts });} else {wx.showToast({title: '搜索失败,请重试',icon: 'none'});}},fail: () => {wx.showToast({title: '网络错误,请重试',icon: 'none'});}});},handleSearchInput: function(e) {console.log("Input event triggered with value:", e.detail.value);this.setData({searchValue: e.detail.value // 更新输入框的值});},handleSearch: function() {console.log('handleSearch called');const value = this.data.searchValue; // 获取输入的值const token = this.data.token; // 获取 tokenif (!value) {wx.showToast({title: '请输入搜索内容',icon: 'none'});return;}// 向后端发起请求this.fetchProducts(value, token);}
});

4、searchResults.json

{"usingComponents": {}
}

在这里插入图片描述
在这里插入图片描述

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

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

相关文章

偷懒总结篇|贪心算法|动态规划|单调栈|图论

由于这周来不及了&#xff0c;先过一遍后面的思路&#xff0c;具体实现等下周再开始详细写。 贪心算法 这个图非常好 122.买卖股票的最佳时机 II(妙&#xff0c;拆分利润) 把利润分解为每天为单位的维度&#xff0c;需要收集每天的正利润就可以&#xff0c;收集正利润的区间…

[C高手编程] 进程编程与IPC

&#x1f496;&#x1f496;⚡️⚡️专栏&#xff1a;C高手编程-面试宝典/技术手册/高手进阶⚡️⚡️&#x1f496;&#x1f496; 「C高手编程」专栏融合了作者十多年的C语言开发经验&#xff0c;汇集了从基础到进阶的关键知识点&#xff0c;是不可多得的知识宝典。如果你是即将…

基于SSM+小程序的旅游社交登录管理系统(旅游4)

&#x1f449;文末查看项目功能视频演示获取源码sql脚本视频导入教程视频 1、项目介绍 ​ 本旅游社交小程序功能有管理员和用户。管理员有个人中心&#xff0c;用户管理&#xff0c;每日签到管理&#xff0c;景点推荐管理&#xff0c;景点分类管理&#xff0c;防疫查询管理&a…

k8s 二进制部署安装(一)

目录 环境准备 初始化操作系统 部署docker 引擎 部署 etcd 集群 准备签发证书环境 部署 Master01 服务器相关组件 apiserver scheduler controller-manager.sh admin etcd 存储了 Kubernetes 集群的所有配置数据和状态信息&#xff0c;包括资源对象、集群配置、元数据…

阿里云镜像源无法访问?使用 DaoCloud 镜像源加速 Docker 下载(Linux 和 Windows 配置指南)

&#x1f680; 作者主页&#xff1a; 有来技术 &#x1f525; 开源项目&#xff1a; youlai-mall &#x1f343; vue3-element-admin &#x1f343; youlai-boot &#x1f343; vue-uniapp-template &#x1f33a; 仓库主页&#xff1a; GitCode&#x1f4ab; Gitee &#x1f…

银河麒麟V10系统下libopenblas.so.0和libllmlmf库的安装

1、当前linux服务器系统是银河麒麟V10&#xff0c;具体的内核和cpu型号如下&#xff1a; 2、使用:uname -a来进行查询 Linux localhost.localdomain 4.19.90-89.16.v2401.ky10.x86_64 #1 SMP Sat Sep 14 13:09:47 CST 2024 x86_64 x86_64 x86_64 GNU/Linux 3、在部署QT开发的应…

高清 MV 无字幕视频素材

在当下的短视频和自媒体时代&#xff0c;高清无字幕的视频素材无疑是创作者们的“得力助手”。不管是用于剪辑情感励志视频、制作搞笑段子&#xff0c;还是创作风景航拍视频&#xff0c;优质的素材库都能让你的创作如虎添翼。今天&#xff0c;我就为大家介绍几个海外的高质量素…

如何使用Qlik Sense Util

Qlik Sense Util 是 Qlik Sense 的一个实用工具&#xff0c;它可以帮助管理员执行各种配置和维护任务。 以下是使用 Qlik Sense Util 工具的一些基本步骤&#xff1a; 1. **运行 QlikSenseUtil.exe**&#xff1a; - 在中心节点上&#xff0c;打开文件资源管理器并导航到 C:…

服务器作业2

架设一台NFS服务器&#xff0c;并按照以下要求配置 关闭防火墙 [rootlocalhost ~]# systemctl stop firewalld [rootlocalhost ~]# setenforce 0 配置文件设置&#xff1a; [rootlocalhost ~]# vim /etc/exports 1、开放/nfs/shared目录&#xff0c;供所有用户查询资料 共享…

Scott Brinker:Martech App 的未来在中小企业和中端市场

中端市场营销支出增加 Product Hunt网站上每周发布的与营销技术相关的产品数量和TechCrunch网站上发布的新融资公告数量持续增加。最近&#xff0c;很多公司都在借助OpenAI、Azure和AWS的新API&#xff0c;赶上生成式人工智能的浪潮。可以肯定的是&#xff0c;有很多重复的想法…

IDEA集成AI的DevAssist插件使用指南

DevAssit使用背景&#xff0c;这类工具通常旨在帮助开发者提高效率&#xff0c;简化开发流程。这类工具包括但不限于&#xff1a; 代码编辑器插件&#xff1a;提供自动补全、代码提示等功能。 构建工具&#xff1a;帮助自动化构建过程。 调试工具&#xff1a;提供更强大的调试功…

anaconda 创建环境失败 解决指南

anaconda 创建环境失败 解决指南 一、问题描述 我在宿舍有一台电脑。由于我经常泡在实验室&#xff0c;所以那台电脑不是经常用&#xff0c;基本吃灰。昨天晚上突然有在那台电脑上使用Camel-AI部署多智能体协同需求&#xff0c;便戳开了电脑&#xff0c;问题也随之而来。 当…

河北统计年鉴(2000-2021年)

《河北统计年鉴》不仅记录了河北省经济社会发展的历史轨迹&#xff0c;还系统地展示了其现状。它涵盖了经济发展、人口就业、社会事业、居民生活、环境保护等多个领域的数据资料 2000-2021年河北统计年鉴数据整理资源-CSDN文库https://download.csdn.net/download/2401_845856…

创建和管理IPAM

IPAM&#xff08;IP Address Manager&#xff09;为用户提供全局地址管理的能力。创建IPAM后&#xff0c;您可以在IPAM中创建私网作用范围。每个私网作用范围都代表一个独立的地址作用域&#xff0c;在私网作用范围中可以创建地址池来管理和分配IP地址资源。本文为您介绍如何创…

esp32学习:语音识别教程esp-skainet库的使用

乐鑫推出了基于esp_sr算法的语音识别应用esp-skainet。官方介绍&#xff1a;ESP-Skainet 以最便捷的方式支持基于乐鑫的 ESP32系列 芯片的唤醒词识别和命令词识别应用程序的开发。使用 ESP-Skainet&#xff0c;您可以轻松构建唤醒词识别和命令词识别应用程序。 支持的主要功能…

模拟信号采集显示器+GPS同步信号发生器制作全过程(焊接、问题、代码、电路)

1、制作最小系统板 在制作最小系统板的时候&#xff0c;要用USB转TTL给板子供电&#xff0c;留了一个电源输入的四个接口&#xff0c;同时又用排针引出来VCC和GND用于后续其他外设的电源供应&#xff0c;电源配有电源指示灯和保护电容&#xff0c; 当时在焊接的时候把接口处的…

首席数据官和首席数据分析官

根据分析人士的预测&#xff0c;首席数据官&#xff08;CDO&#xff09;和首席数据分析官&#xff08;CDAO&#xff09;必须更有效地展示他们对企业和AI项目的价值&#xff0c;以保障其在高管层的地位。Gartner的最新报告指出&#xff0c;CDO和CDAO在AI时代需要重新塑造自身定位…

Python毕业设计选题:基于Django+Vue的图书馆管理系统

开发语言&#xff1a;Python框架&#xff1a;djangoPython版本&#xff1a;python3.7.7数据库&#xff1a;mysql 5.7数据库工具&#xff1a;Navicat11开发软件&#xff1a;PyCharm 系统展示 系统首页 图书馆界面 图书信息界面 个人中心界面 后台登录界面 管理员功能界面 用户…

Docker:namespace环境隔离 CGroup资源控制

Docker&#xff1a;namespace环境隔离 & CGroup资源控制 Docker虚拟机容器 namespace相关命令ddmkfsdfmountunshare 进程隔离文件隔离 CGroup相关命令pidstatstresscgroup控制 内存控制CPU控制 Docker 在开发中&#xff0c;经常会遇到环境问题&#xff0c;比如程序依赖某个…

RabbitMq-队列交换机绑定关系优化为枚举注册

&#x1f4da;目录 &#x1f4da;简介:&#x1f680;比较&#x1f4a8;通常注册&#x1f308;优化后注册 ✍️代码&#x1f4ab;自动注册的关键代码 &#x1f4da;简介: 该项目介绍&#xff0c;rabbitMq消息中间件&#xff0c;对队列的注册&#xff0c;交换机的注册&#xff0c…