微信小程序-绑定数据并在后台获取它

如图

在这里插入图片描述
遍历列表的过程中需要绑定数据,点击时候需要绑定数据

这里是源代码

 <block wx:for="{{productList}}" wx:key="productId">
      <view class="product-item" bindtap="handleProductClick" data-product-id="{{item.productId}}">
        <image class="product-image" src="{{item.imageUrl}}" mode="aspectFill"></image>
        <view class="product-info">
          <view class="product-title">{{item.title}}</view>
          <view class="product-price">价格:{{item.price}}元</view>
          <view class="product-id">商品ID:{{item.productId}}</view>
          <view class="seller-id">发布者ID:{{item.sellerId}}</view>
        </view>
        <view class="product-edit">
          <button wx:if="{{item.status === 1}}" class="shangjia-button" data-status="0" data-product-id="{{item.productId}}" catchtap="onShelf">可上架</button>
          <button wx:if="{{item.status === 0}}" class="xiajia-button" data-status="1" data-product-id="{{item.productId}}" catchtap="offShelf">待下架</button>
        </view>
      </view>
    </block>
这里有几个点注意:

1、代码别写到最外层的view上了,传不到这个button上
data-product-id=“{{item.productId}}” XXXXX
2、如何点击按钮获取当前的 商品id和上下架状态呢?
catchtap=“onShelf” 或者 bindtap=“onShelf”

data-product-id=“{{item.productId}}
注意这块不要携程data-productId=”{{}}"

后台获取方式 productId要大写,小程序会转化

  onShelf(event){
   var status = event.currentTarget.dataset.status;
   var productId = event.currentTarget.dataset.productId;
   console.log("on shef" , status)
   console.log("data productId" , productId)
  },

微信小程序中,bindtap和catchtap这两个事件处理器的主要区别在于他们处理事件冒泡的方式不同。
bindtap:当你在元素A上触发了事件,这个事件会一级一级向上(从子元素向父元素)冒泡,也就是说,如果元素A的父元素B和父父元素C等也对这个事件有响应处理,那么他们的处理函数也会被触发。
catchtap:catchtap是一种在当前元素上阻止事件向上冒泡的处理方式。如果你在元素A上触发了catchtap事件,那么这个事件将只会在元素A上被处理,并阻止这个事件继续向上冒泡。这显然在你不希望或者不需要父级元素响应同一事件的时候非常有用。
给个例子,如果你在一个button上用了bindtap,然后这个button又在一个view元素内部,这个view元素也有一个bindtap事件,那么如果你点击了这个button,两个bindtap事件都会被触发。如果你不希望点击button也会触发view上的事件,你就可以使用catchtap替代button上的bindtap。

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

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

相关文章

maven异常记录-must be unique

maven 打包异常记录 我们可以看看一个重要的异常&#xff1a; dependencies.dependency.(groupId:artifactId:type:classifier) must be unique: org.springframework.boot:spring-boot-starter-test 经过检查pom文件 果然是spring-boot-starter-test引用重复&#xff0c;平…

Elasticsearch:什么是搜索引擎?

搜索引擎定义 搜索引擎是一种软件程序或系统&#xff0c;旨在帮助用户查找存储在互联网或特定数据库中的信息。 搜索引擎的工作原理是对各种来源的内容进行索引和编目&#xff0c;然后根据用户的搜索查询向用户提供相关结果列表。 搜索引擎对于希望快速有效地查找特定信息的用…

SpringMVC 的参数绑定之list集合、Map

标签中name属性的值就是pojo类的属性名 参数绑定4 list [对象] <form action"teaupd.do" method"post"> <c:forEach items"${list}" var"tea" varStatus "status"> 教师编号&#xff1a;<input…

基础antdesign的业务型 短时间控件封装(复制即可使用)

{/* startFieldName 开始时间标识 endFieldName 结束时间标识 label 同form lable rules 是否开启规则校验 默认开启 detailData 详情数据&#xff0c;用于编辑回显 dateRange 限制结束时间的范围 例如&#xff1a;开始时间选择了 2024-02-05 &#xff0c;加上 dateRange3 后 只…

【MATLAB】BiGRU神经网络回归预测算法

有意向获取代码&#xff0c;请转文末观看代码获取方式~也可转原文链接获取~ 1 基本定义 BiGRU神经网络回归预测算法是一种基于双向门控循环单元&#xff08;GRU&#xff09;的多变量时间序列预测方法。该方法结合了双向模型和门控机制&#xff0c;旨在有效地捕捉时间序列数据中…

基于Java SSM框架实现生鲜食品o2o商城系统项目【项目源码+论文说明】计算机毕业设计

基于java的SSM框架实现生鲜食品o2o商城系统演示 摘要 随着社会的发展&#xff0c;社会的各行各业都在利用信息化时代的优势。计算机的优势和普及使得各种信息系统的开发成为必需。 生鲜食品o2o商城系统&#xff0c;主要的模块包括查看管理员&#xff1b;首页、个人中心、用户…

Process Explorer下载安装使用教程(图文教程)超详细

「作者简介」&#xff1a;CSDN top100、阿里云博客专家、华为云享专家、网络安全领域优质创作者 「推荐专栏」&#xff1a;对网络安全感兴趣的小伙伴可以关注专栏《网络安全入门到精通》 Process Explore 是微软的一款「进程资源管理器」&#xff0c;比Windows系统自带的任务管…

科技云报道:云原生是大模型“降本增效”的解药吗?

科技云报道原创。 在过去一两年里&#xff0c;以GPT和Diffusion model为代表的大语言模型和生成式AI&#xff0c;将人们对AI的期待推向了一个新高峰&#xff0c;并吸引了千行百业尝试在业务中利用大模型。 国内各家大厂在大模型领域展开了激烈的军备竞赛&#xff0c;如&#…

每日学习总结20240219

每日总结 20240219 1.文件类型.csv CSV文件是一种以逗号分隔值&#xff08;Comma-Separated Values&#xff09;为标记的文本文件&#xff0c;它可以用来存储表格数据。每一行表示一条记录&#xff0c;而每一条记录中的字段则使用逗号或其他特定的分隔符进行分隔。 常用场景…

计算机服务器中了halo勒索病毒怎么办?Halo勒索病毒解密数据恢复

众所周知&#xff0c;网络是一把双刃剑&#xff0c;在为人们提供便利的同时&#xff0c;也会带来网络安全威胁。对于企业来说&#xff0c;企业的发展离不开核心数据支撑&#xff0c;数据安全问题是众多企业关心的主要话题。近日&#xff0c;云天数据恢复中心接到很多企业的求助…

Deep Learning with OpenCV DNN Module介绍

Deep Learning with OpenCV DNN Module介绍 1. 源由2. 为什么/什么是OpenCV DNN Module?2.1 支持的不同深度学习功能2.2 支持的不同模型2.3 支持的不同框架 3. 如何使用OpenCV DNN模块3.1 使用从Keras和PyTorch等不同框架转换为ONNX格式的模型3.2 使用OpenCV DNN模块的基本步骤…

MySQL学习Day18——逻辑架构

一、逻辑架构剖析: 1.服务器处理客户端请求: 首先 MySQL 是典型的C/S架构&#xff0c;即client/Server架构&#xff0c;服务器端程序使用的mysqld。不论客户端进程和服务器进程是采用哪种方式进行通信&#xff0c;最后实现的效果都是:客户端进程向服务器进程发送段文本(SQL语…

【elk查日志 elastic(kibana)】

文章目录 概要具体的使用方式一&#xff1a;查找接口调用历史二&#xff1a;查找自己的打印日志三&#xff1a;查找错误日志 概要 每次查日志&#xff0c;我都需要别人帮我&#xff0c;时间长了总觉得不好意思&#xff0c;所以这次下定决心好好的梳理一下&#xff0c;怎么查日…

14-k8s控制器资源-rs控制器replicasets

replicaset副本控制器&#xff0c;简称&#xff1a;rs控制器&#xff1b; 用法&#xff1a;与rc控制器“几乎”相同&#xff1b; 能力&#xff1a;可以指定pod的副本始终存活&#xff0c;相比于rc控制器&#xff1b;支持标签匹配&#xff0c;也支持标签表达式 注意&#xff1a;…

Camunda快速入门(四):设计一个带网关的流程

接上一篇文章&#xff1a;Camunda快速入门&#xff08;三&#xff09;&#xff1a;设计一个人工任务流程并配置表单 在本节中&#xff0c;您将学习如何使用 BPMN 2.0 排他网关&#xff08;Exclusive Gateways&#xff09;使流程更加动态。 1、添加两个网关 我们想修改我们的…

自己动手写编译器:使用 PDA 实现增强和属性语法的解析

在前面章节中我们了解了增强语法和属性语法&#xff0c;特别是看到了这两种语法的结合体&#xff0c;本节我们看看如何使用前面我们说过的自顶向下自动机来实现这两种语法结合体的解析&#xff0c;这里使用的方法也是成熟编译器常用的一种语法解析算法。 首先我们先给出上一节…

虚拟机--pc端和macOS端互通

windows开启虚拟化 要在Windows系统中开启虚拟化&#xff0c;您可以按照以下步骤操作&#xff1a; 准备工作&#xff1a; 确保您的计算机CPU支持虚拟化技术。在BIOS中开启相应的虚拟化支持。 开启虚拟化&#xff1a; 打开控制面板&#xff0c;点击程序或功能项&am…

普通人如何开启真正的赚钱之路

您好&#xff0c;我是码农飞哥&#xff08;wei158556&#xff09;&#xff0c;感谢您阅读本文&#xff0c;欢迎一键三连哦。&#x1f4aa;&#x1f3fb; 1. Python基础专栏&#xff0c;基础知识一网打尽&#xff0c;9.9元买不了吃亏&#xff0c;买不了上当。 Python从入门到精通…

FastAPI学习-31 FastAPI 如何集成 socket.io

前言 socket.io就是基于 websocket 封装的一个库&#xff0c;主要特点是能够进行实时的双向通讯&#xff0c;主要应用场景有实时的聊天&#xff0c;数据实时分析&#xff0c;数据传输&#xff0c;文件协同合作。 有个 socket.io 的fastapi-socketio官方库&#xff0c;该库依赖…

机器学习基础(一)理解机器学习的本质

导读&#xff1a;在本文中&#xff0c;将深入探索机器学习的根本原理&#xff0c;包括基本概念、分类及如何通过构建预测模型来应用这些理论。 目录 机器学习 机器学习概念 相关概念 机器学习根本&#xff1a;模型 数据的语言&#xff1a;特征与标签 训练与测试&#xf…
最新文章