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

文章目录

      • 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.rhkb.cn/news/460671.html

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

相关文章

实验干货|电流型霍尔传感器采样设计03-信号调理

在前两篇博客中&#xff0c;将霍尔输出的电流信号转换成了有正有负的电压信号&#xff0c;但是DSP需要采集0~3V的电压信号&#xff0c;因此需要对信号缩放并抬升至全部为正的信号。 常见的方法是&#xff0c;通过比例放大(缩小)电路对信号进行放缩&#xff0c;通过加法电路抬升…

SQLI LABS | Less-20 POST-Cookie Injections-Uagent field-error based

关注这个靶场的其它相关笔记&#xff1a;SQLI LABS —— 靶场笔记合集-CSDN博客 0x01&#xff1a;过关流程 输入下面的链接进入靶场&#xff08;如果你的地址和我不一样&#xff0c;按照你本地的环境来&#xff09;&#xff1a; http://localhost/sqli-labs/Less-20/ 可以看到…

爬虫+数据保存2

爬取数据保存到MySQL数据库 这篇文章, 我们来讲解如何将我们爬虫爬取到的数据, 进行保存, 而且是把数据保存到MySQL数据库的方式去保存。 目录 1.使用pymysql连接数据库并执行插入数据sql代码(insert) 2.优化pymysql数据库连接以及插入功能代码 3.爬取双色球网站的数据并保…

echarts 遍历多个图表,并添加resize缩放

数据结构&#xff1a; data() { return { charts: [ { title: Chart 1, xAxisData: [Mon, Tue, Wed, Thu, Fri, Sat, Sun], yAxisData: [120, 200, 150, 80, 70, 110, 130], }, { title: Chart 2, xAxisData: [Jan, Feb, Mar, Apr, May, Jun, Jul], yAxisData: [22…

Linux 中,flock 对文件加锁

在Linux中&#xff0c;flock是一个用于对文件加锁的实用程序&#xff0c;它可以帮助协调多个进程对同一个文件的访问&#xff0c;避免出现数据不一致或冲突等问题。以下是对flock的详细介绍&#xff1a; 基本原理 flock通过在文件上设置锁来控制多个进程对该文件的并发访问。…

(五)Web前端开发进阶2——AJAX

目录 2.Axios库 3.认识URL 4.Axios常用请求方法 5.HTTP协议——请求报文/响应报文 6.前后端分离开发 7.Element组件库 1.Ajax概述 AJAX 是异步的 JavaScript和XML(Asynchronous JavaScript And XML)。简单点说&#xff0c;就是使用XMLHttpRequest 对象与服务器通信。它可…

使用C#学习Office文件的处理(pptx docx xlsx)

Office文件 是指PPT 、word、Excel 这些常用工具生成的文件 &#xff0c;例如 pptx docx xlsx。 这些文件的读取和生成有很多很多库 例如 NOPI 、DevExpress、C1、Aspose、Teleric 等等&#xff0c;各有各的优缺点。俺今天不讲这个&#xff0c;俺只是讲讲如何了解Office文件的…

2020年下半年网络规划设计师上午真题及答案解析

1.在支持多线程的操作系统中&#xff0c;假设进程P创建了线程T1&#xff0c;T2&#xff0c;T3&#xff0c;那么下列说法中正确的是&#xff08; &#xff09;。 A.该进程中已打开的文件是不能被T1&#xff0c;T2和T3共享的 B.该进程中T1的栈指针是不能被T2共享&#xff0c;但…

Java 使用Maven Surefire插件批量运行单元测试

在基于Maven的Java项目中可以使用Maven 的 mvn test 命令来运行单元测试。 示例 有一个简单的Maven 项目&#xff0c; pom.xml 只导入了JUnit 5 的相关依赖&#xff1a; <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://m…

Linux CentOS7下创建SFTP服务器

本文详细介绍了在Linux CentOS上部署安全文件传输协议&#xff08;SFTP&#xff09;服务器的全过程。SFTP基于SSH&#xff08;安全壳层协议&#xff09;提供文件传输服务&#xff0c;继承了SSH的安全特性&#xff0c;如数据加密、完整性验证和服务器认证等&#xff0c;确保数据…

电科金仓(人大金仓)更新授权文件(致命错误: XX000: License file expired.)

问题:电科金仓(人大金仓)数据库链接异常,重启失败,查看日志如下: 致命错误: XX000: License file expired. 位置: PostmasterMain, postmaster.c:725 解决方法: 一、下载授权文件 根据安装版本在官网下载授权文件(电科金仓-成为世界卓越的数据库产品与服务提供商)…

3D Gaussian Splatting代码详解(二):模型构建

3 模型构建 gaussians GaussianModel(dataset.sh_degree) 3.1 初始化函数 __init__ 构造函数 构造函数 __init__ 的主要作用是初始化 3D 高斯模型的各项参数和激活函数&#xff0c;用于生成 3D 空间中的高斯表示。 初始化球谐函数的参数&#xff1a; self.active_sh_degre…

一文讲明白大模型分布式逻辑(从GPU通信原语到Megatron、Deepspeed)

1. 背景介绍 如果你拿到了两台8卡A100的机器&#xff08;做梦&#xff09;&#xff0c;你的导师让你学习部署并且训练不同尺寸的大模型&#xff0c;并且写一个说明文档。你意识到&#xff0c;你最需要学习的就是关于分布式训练的知识&#xff0c;因为你可是第一次接触这么多卡…

Python毕业设计选题:基于协同过滤的校园音乐推荐系统小程序-django+uniapp

开发语言&#xff1a;Python框架&#xff1a;djangouniappPython版本&#xff1a;python3.7.7数据库&#xff1a;mysql 5.7数据库工具&#xff1a;Navicat11开发软件&#xff1a;PyCharm 系统展示 管理员登录界面 管理员功能界面 用户管理 音乐信息管理 音乐类型管理 留言板管…

【python】OpenCV—findContours(4.4)

文章目录 1、功能描述2、代码实现3、完整代码4、结果展示5、涉及到的库函数6、参考 1、功能描述 找出物体轮廓&#xff0c;根据 PCA 计算特征值和特征向量&#xff0c;绘制特征值和特征向量&#xff0c;来初步展示物体的方向 2、代码实现 导入库函数&#xff0c;读入图片&am…

Jmeter实际应用

环境准备 JDK1.8Jmeter 5.6.3 下载地址Jmeter 插件 下载地址 放到lib/ext下 常用命令 # 启动 sh jmeter# 集群模式下启动节点&#xff0c;不启动用不了集群 sh jmeter-server#生成ssl需要的证书, 这里会要求输入个密码&#xff0c;是要在jmeter中用的 keytool -import -ali…

Javaweb 实验4 xml

我发现了有些人喜欢静静看博客不聊天呐&#xff0c; 但是ta会点赞。 这样的人呢帅气低调有内涵&#xff0c; 美丽大方很优雅。 说的就是你&#xff0c; 不用再怀疑哦 实验四 XML 目的&#xff1a; 安装和使用XML的开发环境认识XML的不同类型掌握XML文档的基本语法了解D…

C#界面设计--9--fatal error C1083: 无法打开包括文件:“jruparse.h”: No such file or directory

1、VS2008-编译时报错“fatal error C1083: 无法打开包括文件:“jruparse.h”: No such file or directory” 2、问题出现的原因及解决方法 1、如果要引入的这些,h文件跟.cpp在同一个目录下&#xff0c;就不会出现这种问题&#xff0c;检査在工程的include目录下是不是真的存…

【机器学习】 15. SVM 支撑向量机 support vector machine,拉格朗日,软边界,核函数

SVM 支撑向量机 support vector machine&#xff0c;拉格朗日&#xff0c;软边界&#xff0c;核函数 1. 超平面边界 margin of hyperplane2. 边界越大的超平面越好原因 3. 线性模型通过决策边界分类4. SVM的问题5. 拉格朗日乘子与SVM结合求最大边界6. SVM软边界和硬边界7. 非线…

SpringBoot获取resources目录下的文件

在 Spring Boot 项目中&#xff0c;获取 resources 目录中的文件路径通常涉及到访问类路径资源&#xff08;classpath resources&#xff09;。Spring Boot 提供了一些工具类和方法&#xff0c;可以方便地访问这些资源。以下是一些常见的方法&#xff1a; 首先&#xff0c;我们…