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

如图

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

这里是源代码

 <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,一经查实,立即删除!

相关文章

Flask——基本前后端数据传输示例

文章目录 步骤1: 使用 requests 发送 JSON 数据步骤2: 使用 Flask 接收并反序列化 JSON 数据 要实现您的需求&#xff0c;我们可以通过两个步骤来完成&#xff1a;首先&#xff0c;使用 Python 的 requests 库发送 JSON 格式的数据&#xff1b;其次&#xff0c;使用 Flask 框架…

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…

Python 进阶语法:正则表达式

正则表达式是一个特殊的字符序列&#xff0c;它能帮助你方便的检查一个字符串是否与某种模式匹配。 在 Python 中&#xff0c;使用 re 模块来处理正则表达式。re 模块提供了一组函数&#xff0c;允许你在字符串中进行模式匹配、搜索和替换操作。re 模块使 Python 语言拥有完整…

面试经典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;递归方式…

_update_by_query简单使用

POST user_2023-11-01/_update_by_query {"script": {"source": "ctx._source.remark 测试","lang": "painless"},"query": {"term": {"domain.keyword": "talen"}} } "sour…

basicsr 安装问题

basicsr依赖torch和torchvision和tb-nightly 安装时&#xff0c;如果使用单一源安装&#xff0c;由于原的包不完整性&#xff0c;容易导致安装失败&#xff1a;tb-nightly清华源不存在 所以建议安装方式为&#xff1a; 例如我的requirements内容如下&#xff1a; basicsr1.4.…

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

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

大语言模型高质量提示词工程技巧指南

目录 前言 第一章&#xff1a;提示词工程&#xff08;Prompt&#xff09;技术简介 第二章&#xff1a;提示词技术基础 第三章&#xff1a;角色提示 第四章&#xff1a;“让我们思考一下”提示 第五章&#xff1a;自洽提示 第六章&#xff1a;种子词提示 第七章&#xf…

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

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

2024年 BEC攻击激增,企业该如何防范?

根据Verizon发布的数据泄漏报告显示&#xff0c;2023年商业邮件欺诈(BEC)攻击占社交工程攻击的50%以上&#xff0c;黑客们不仅在增加攻击数量&#xff0c;而且在伪造邮件方面变得更加真实和自动化。 黑客分子不仅擅长用AI编写极具说服力的钓鱼电子邮件&#xff0c;而且还能逃避…

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;不同的线程可以同时读写不…

代码随想录Day56 | 300.最长递增子序列 674. 最长连续递增序列 718. 最长重复子数组

代码随想录Day56 | 300.最长递增子序列 674. 最长连续递增序列 718. 最长重复子数组 300.最长递增子序列674.最长连续递增序列718.最长重复子数组 300.最长递增子序列 文档讲解&#xff1a;代码随想录 视频讲解&#xff1a; 动态规划之子序列问题&#xff0c;元素不连续&#x…

大处着手、大小结合!现货黄金短线趋势如何判断?

现货黄金以交易灵活而著称&#xff0c;但是投资者发现&#xff0c;现货黄金的短期行情是多变的&#xff0c;要捕捉到现货黄金短期趋势其实也不容易。下面我们就来讨论一下判断现货黄金短线趋势的方法&#xff0c;这个方法的关键在于“大小结合”。 大指的是基本分析。很多投资者…

【leetcode】贪心算法介绍

详细且全面地分析贪心算法常用的解题套路、数据结构和代码逻辑如下&#xff1a; 找最值型&#xff1a; 每一步选择都是局部最优解&#xff0c;最后得到的结果就是全局最优解。常用于找零钱问题、区间覆盖问题等。一般情况下&#xff0c;可以通过排序将数据进行处理&#xff0c;…