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

如图

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

这里是源代码

 <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.mzph.cn/news/691663.shtml

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

相关文章

Vue3实现带动画效果的tab栏切换

效果图如下所示&#xff1a; 实现思路&#xff1a; 其实很简单 1、首先切换tab栏时tab标签激活下标与对应显示内容下标要一致。 2、其次点击tab栏切换时更新下标 3、最后就是css添加动画效果 这样就了&#xff01;&#xff01;&#xff01; 上全部代码 <template><…

Profibus转ModbusRS485网关在空调系统应用

随着我国工业自动化整体水平的不断提高&#xff0c;企业中的控制系统和控制设备的种类越来越多&#xff1b;同时随着市场经济的发展&#xff0c;各个企业也对DCS系统能将控制系统的各个运行参数实时传送到上位机的系统中进行加工处理&#xff0c;这对DCS系统提出了通讯问题。开…

《Solidity 简易速速上手小册》第5章:智能合约的安全性(2024 最新版)

文章目录 5.1 安全性的重要性5.1.1 基础知识解析深入理解安全性的多维度影响智能合约安全的关键要素 5.1.2 重点案例&#xff1a;防止重入攻击案例 Demo&#xff1a;构建一个防重入的提款合约案例代码WithdrawContract.sol 测试和验证拓展功能 5.1.3 拓展案例 1&#xff1a;预防…

Day50 739每日温度 496下一个更大元素I 503下一个更大元素II

739 每日温度 请根据每日 气温 列表&#xff0c;重新生成一个列表。对应位置的输出为&#xff1a;要想观测到更高的气温&#xff0c;至少需要等待的天数。如果气温在这之后都不会升高&#xff0c;请在该位置用 0 来代替。 例如&#xff0c;给定一个列表 temperatures [73, 7…

面试经典150题——生命游戏

​"Push yourself, because no one else is going to do it for you." - Unknown 1. 题目描述 2. 题目分析与解析 2.1 思路一——暴力求解 之所以先暴力求解&#xff0c;是因为我开始也没什么更好的思路&#xff0c;所以就先写一种解决方案&#xff0c;没准写着写…

22-k8s中pod的调度-亲和性affinity

一、概述 在k8s当中&#xff0c;“亲和性”分为三种&#xff0c;节点亲和性、pod亲和性、pod反亲和性&#xff1b; 亲和性分类名称解释说明nodeAffinity节点亲和性通过【节点】标签匹配&#xff0c;用于控制pod调度到哪些node节点上&#xff0c;以及不能调度到哪些node节点上&…

Linux-ls命令

目录 ls&#xff1a;查看目录下文件/文件夹 ls -l&#xff1a;列表显示文件 ls -a&#xff1a;显示所有文件正常情况下‘ . ’开头的文件是隐藏的 ls -la&#xff1a;以列表形式显示所有文件包括隐藏文件 ls -lt&#xff1a;按时间倒序查看文件 ls -R&#xff1a;递归方式…

【git 使用】超级好用的 git reset 和 git revert 功能对比和使用方法

首先你要知道 git 区分暂存区和工作区&#xff0c;如果你用过 sourcetree 你就会知道 git reset 超级好用 git reset 命令用于将当前分支的 HEAD 指针移动到指定的提交&#xff0c;并且可以选择性地修改工作区和暂存区的状态。git reset 命令有几种常用的用法&#xff0c;主要…

突破百度地图Web API的配额限制,实现接口调用自由!

声明 本文章中所有内容仅供学习交流,抓包内容、敏感网址、数据接口均已做脱敏处理,严禁用于商业用途和非法用途,否则由此产生的一切后果均与作者无关,若有侵权,请联系我立即删除! 引言 好久没用百度地图开放平台,最近发现平台调整了接口调用的策略,增加了实名认证,…

STM32 USART详细解读(理论知识)

文章目录 前言一、同步传输和异步传输二、UART协议三、UART硬件结构1.波特率&#xff0c;数据位&#xff0c;校验位&#xff0c;停止位设置2.数据发送流程3.数据接收流程4.中断控制 总结 前言 本篇文章来给大家讲解一下STM32中的USART&#xff0c;USART是STM32中非常重要的一个…

QT多线程应用及代码示例

一.多线程的原理和功能 1.多线程&#xff08;multithreading&#xff09;是指从软件或者硬件上实现多个线程并发执行的技术。 2.多线程的功能和作用主要包括&#xff1a; 提高程序的并发性和效率&#xff1a;多线程可以同时执行多个任务&#xff0c;不同的线程可以同时读写不…

腾讯云助力酒店IT系统上云,实现出海业务的双重优势

潮起潮涌&#xff0c;随着时代浪潮的翻涌&#xff0c;生活处处可见是巨大的变化&#xff0c;衣食住行都有了更多更大的需求&#xff0c;出门旅游观赏当地风景品尝特色美食的前提是要住好&#xff0c;只有休息好了才有更多的精力去游玩。酒店系统的升级上云让登记变得更加便捷&a…

【机器学习笔记】13 降维

降维概述 维数灾难 维数灾难(Curse of Dimensionality)&#xff1a;通常是指在涉及到向量的计算的问题中&#xff0c;随着维数的增加&#xff0c;计算量呈指数倍增长的一种现象。在很多机器学习问题中&#xff0c;训练集中的每条数据经常伴随着上千、甚至上万个特征。要处理这…

【Linux】git操作 - gitee

1.使用 git 命令行 安装 git yum install git 2.使用gitee 注册账户 工作台 - Gitee.com 进入gitee&#xff0c;根据提示注册并登录 新建仓库 仓库名称仓库简介初始换仓库 3.Linux-git操作 进入仓库&#xff0c;选择“克隆/下载” 复制下面的两行命令进行git配置 然后将仓库clo…

教师专业发展的五个阶段

每当人们谈论教师&#xff0c;总会联想到“传道授业解惑”的崇高形象。但教师的专业成长&#xff0c;绝非一蹴而就。今天&#xff0c;就让我们一起探秘教师专业发展的五个阶段&#xff0c;看看一位普通教师是如何历练成为教育行家的。 阶段一&#xff1a;新手摸索期 初入教育行…

走进科学系列之遭遇鬼打墙的OUTLOOK

网管小贾 / sysadm.cc 正值春运&#xff0c;车站里熙熙攘攘、人头攒动。 鲍勃和约瑟夫正在候车室&#xff0c;等待检票。 “嗨&#xff01;约瑟夫&#xff01;快来看看&#xff0c;我的电脑出问题了&#xff01;” “得了吧&#xff0c;马上就要检票上车了&#xff0c;你就不…

调用接口时不时出现 Error: socket hang up

项目场景&#xff1a; 提示&#xff1a;这里简述项目相关背景&#xff1a; 今天采用golang创建了一个http服务&#xff0c;准备对若干接口进行测试。 问题描述 提示&#xff1a;这里描述项目中遇到的问题&#xff1a; 在测试第一个接口时&#xff0c;发现采用postman调用接口…

Ansible yum模块 主要用于软件安装

目录 选项 实例 安装一个tree实例卸载一个 tree 选项 name   #所安装的包的名称 state  #present—>安装&#xff0c; latest—>安装最新的, absent—> 卸载软件。 update_cache  #强制更新yum的缓存 conf_file  #指定远程yum安装时所依赖的配置文件&…

5G车载路由器引领无人驾驶车联网应用

随着无人驾驶技术的不断发展&#xff0c;车联网正逐渐成为实现智能交通的重要组成部分。5G车载路由器将在车联网的应用中起到至关重要的作用&#xff0c;它能够满足无人驾驶应用的低时延、高速率和实时控制等需求&#xff0c;进一步推动无人驾驶车联网技术。 5G路由器具备低时延…

从 AGP 4.1.2 到 7.5.1——XmlParser、GPathResult、QName 过时

新年首发&#xff0c; 去年的问题&#xff0c;今年解决~ 问题 & 排查 1: Task failed with an exception. ----------- * What went wrong: Execution failed for task :app:processCommonReleaseManifest. > org.xml.sax.SAXParseException; lineNumber: 1; columnNu…