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

文章目录

      • 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: '',  // 存储的 token
      products: [], // 存储搜索结果
      searchValue: ''
  },

  onLoad: function (options) {
      const { value, token } = options; // 获取传递过来的搜索关键词和 token
      this.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; // 获取 token
    if (!value) {
      wx.showToast({
        title: '请输入搜索内容',
        icon: 'none'
      });
      return;
    }
    // 向后端发起请求
    this.fetchProducts(value, token);
  }
});

4、searchResults.json

{
  "usingComponents": {}
}

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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Git获取本地仓库和常用指令

一、获取本地仓库 1&#xff09;在电脑的任意位置创建一个空目录&#xff08;例如test01&#xff09;作为我们的本地Git仓库 2&#xff09;进入这个目录中&#xff0c;点击右键打开Git bash窗口 3&#xff09;执行命令git init&#xff08;初始化当前目录为一个git仓库&…

两个好用的GIF制作软件,轻松制作动图表情包

分享2个好用的GIF制作软件&#xff0c;支持GIF录制、视频转GIF、图片合成GIF&#xff0c;可以满足绝大部分的GIF制作需求&#xff01; 1、ScreenToGif&#xff1a;GIF录制/视频转GIF 一款特别好用的GIF录制和编辑工具&#xff0c;界面简单易用。安装后一打开就能看到它的四大…

RN安卓应用打包指南

React Native&#xff08;简称RN&#xff09;是一个用于开发跨平台移动应用的开源框架&#xff0c;它允许你使用JavaScript和React来构建在iOS和Android上运行的应用。要将React Native项目打包成安卓应用&#xff08;APK&#xff09;&#xff0c;可以按照以下步骤进行&#xf…

【生物学&水族馆】金鱼成体幼苗检测活体识别系统源码&数据集全套:改进yolo11-Parc

改进yolo11-DynamicHGNetV2等200全套创新点大全&#xff1a;金鱼成体幼苗检测活体识别系统源码&#xff06;数据集全套 1.图片效果展示 项目来源 人工智能促进会 2024.10.30 注意&#xff1a;由于项目一直在更新迭代&#xff0c;上面“1.图片效果展示”和“2.视频效果展示”展…

【商汤科技-注册/登录安全分析报告】

前言 由于网站注册入口容易被黑客攻击&#xff0c;存在如下安全问题&#xff1a; 暴力破解密码&#xff0c;造成用户信息泄露短信盗刷的安全问题&#xff0c;影响业务及导致用户投诉带来经济损失&#xff0c;尤其是后付费客户&#xff0c;风险巨大&#xff0c;造成亏损无底洞…

node和npm版本冲突

问题描述&#xff1a; 解决办法&#xff1a; 一、 查看自己当前的node和npm版本 node -v npm -v 二、 登录node官网地址 node官网地址 https://nodejs.org/zh-cn/about/previous-releases 查看与自己node版本兼容的是哪一版本的npm,相对应进行更新即可。 三 升级node 下载最…

python 爬虫 入门 五、抓取图片、视频

目录 一、图片、音频 二、下载视频&#xff1a; 一、图片、音频 抓取图片的手法在上一篇python 爬虫 入门 四、线程&#xff0c;进程&#xff0c;协程-CSDN博客里面其实有&#xff0c;就是文章中的图片部分&#xff0c;在那一篇文章&#xff0c;初始代码的28&#xff0c;29行…

服务器的免密登录和文件传输

在天文学研究中&#xff0c;通常会采用ssh登录服务器&#xff0c;把复杂的计算交给服务器&#xff0c;但是如果你没有进行额外的配置&#xff0c;那么登录服务器&#xff0c;以及和服务器进行文件传输&#xff0c;每次都要输入账号和密码&#xff0c;比较不方便&#xff0c;Win…

前端八股文第二篇

11.事件循环 事件循环&#xff08;Event Loop&#xff09;是 JavaScript 运行时中的一种机制&#xff0c;用于处理异步操作和事件驱动的编程。在浏览器环境中&#xff0c;事件循环是指浏览器通过事件队列&#xff08;Event Queue&#xff09;来管理和调度异步任务的执行顺序。…

VBox增强功能、VBoxLinuxAdditions安装、共享文件夹问题解决

VBox增强功能、VBoxLinuxAdditions安装、共享文件夹问题解决 文章目录 VBox增强功能、VBoxLinuxAdditions安装、共享文件夹问题解决1.VBoxLinuxAdditions.run&#xff1a;找不到命令解决方案 2.可以看到共享文件夹。但是不能看到里面的内容。解决方案 参考 共享文件夹设置&…

【计算机网络 - 基础问题】每日 3 题(五十八)

✍个人博客&#xff1a;https://blog.csdn.net/Newin2020?typeblog &#x1f4e3;专栏地址&#xff1a;http://t.csdnimg.cn/fYaBd &#x1f4da;专栏简介&#xff1a;在这个专栏中&#xff0c;我将会分享 C 面试中常见的面试题给大家~ ❤️如果有收获的话&#xff0c;欢迎点赞…

AT系列之74HC595级联数码管

记录我学习例程,学习用做企业级的使用的逻辑,欢迎讨论指正。 首先了解AT系列芯片原理,32位单片机,模仿stm32各个系列的,我这边学习使用AT32F421系列的芯片。其实系统学过stm32都可很快上手。下面这个是雅特力官方网址,各种资料都可以免费下载学习。 雅特力科技 : 32位微…

算法:排序

排序算法 1. 简单排序1.1 直接插入排序1.2 冒泡排序1.3 简单选择排序 2. 希尔排序3. 快速排序4. 堆排序5. 归并排序 将文件的内容按照某种规则进行排列。 排序算法的稳定判定&#xff1a;若在待排序的一个序列中&#xff0c; R i R_i Ri​和 R j R_j Rj​的关键码相同&#xf…

docker部署手册(离线)

文章目录 一、下载地址二、部署环境三、安装部署3.1 上传安装包3.2 解压3.3 创建docker.service3.4 创建daemon.json 文件3.5 授权3.6 启动3.7 查看信息3.8 设置开机启动3.9 允许远程连接到docker方法一&#xff1a;修改docker.service方法二&#xff1a;修改daemon.json 3.10 …

OpenWRT旁路由应该怎么设置?每一步都给你指出来!

前言 小白最近家里的网络出了问题&#xff0c;于是折腾了好多次路由器&#xff08;软路由系统重装&#xff09;&#xff0c;这样直接就影响到其他小伙伴的网络了。 为了不影响其他小伙伴赚钱&#xff0c;小白就想着在软路由&#xff08;主路由系统&#xff09;旁边再加个软路…

LaTeX 特殊符号、加帽子符号、横线和波浪线、绝对值符号

LaTeX 特殊符号、加帽子符号、横线和波浪线_latex hat-CSDN博客 1 加帽子 \hat{E} \widehat{E} 2 加绝对值 % L1公式 \begin{align}L_{reg} \begin{cases}0.5(E^{}-\widehat{E})^{2} & \text{if } $$\left| g-\widehat{g}\right|$$<1 $$ \\$$\left| E^{}-\widehat{…

贷中额度策略调整

用户使用金融产品后&#xff0c;就会产生一些数据&#xff0c;比如&#xff1a;使用APP的行为数据&#xff0c;这个可以通过埋点进行收集&#xff0c;或借贷行为数据&#xff0c;是否逾期等。为了给用户更好的产品体验和提升风险防范水平&#xff0c;策略同学就会对存量的用户进…

统信UOS下启动图形界面应用工具manager报错:No protocol specified的解决办法

☞ ░ 前往老猿Python博客 ░ https://blog.csdn.net/LaoYuanPython 一、问题情况 达梦提供了丰富的图形界面工具&#xff0c;包括&#xff1a;manager、monitor、dbca等&#xff0c;但在统信操作系统进入终端去启动manager时报错&#xff1a;No protocol specified。 咨询了达…

【论文阅读】ESRGAN+

学习资料 论文题目&#xff1a;进一步改进增强型超分辨率生成对抗网络&#xff08;ESRGAN : FURTHER IMPROVING ENHANCED SUPER-RESOLUTION GENERATIVE ADVERSARIAL NETWORK&#xff09;论文地址&#xff1a;2001.08073代码&#xff1a;ncarraz/ESRGANplus&#xff1a; ICASSP …

优秀的服务器性能要看哪些方面

服务器性能指标主要看的是速度和稳定性&#xff0c;服务器的性能要求是什么&#xff1f;服务器的多处理器特性、内存容量、磁盘性能及可扩展性是选择服务器要考虑的主要因素。互联网时代的发展服务器的种类也越来越多。 服务器的性能要求是什么&#xff1f; 运行服务器软件的…