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

如图

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

这里是源代码

 <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.hqwc.cn/news/479121.html

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

相关文章

Uniapp-开发小程序

文章目录 前言一、npm run xxx —— cross-env: Permission denied解决方法&#xff08;亲测有效&#xff09;其他解决方法&#xff1a; 二、macOS 微信开发者工具选择uniapp 用 vscode 开发 总结 前言 macOS下 uniapp 开发小程序。 一、npm run xxx —— cross-env: Permissi…

ACE的MPC编译

如下需要下载已经生成好的工程&#xff0c;链接如下: Releases DOCGroup/ACE_TAO GitHub 步骤1 下载ACE:ACE 下载MPC:MPC 下载perl并安装&#xff1a;perl 注意&#xff1a;perl安装中勾选将perl路径添加到path环境变更中&#xff0c;安装完后重启 解压ACE后路径如下:…

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

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

JAVA高并发——人手一支笔:ThreadLocal

文章目录 1、ThreadLocal的简单使用2、ThreadLocal的实现原理3、对性能有何帮助4、线程私有的随机数发生器ThreadLocalRandom4.1、反射的高效替代方案4.2、随机数种子4.3、探针Probe的作用 除了控制资源的访问&#xff0c;我们还可以通过增加资源来保证所有对象的线程安全。比如…

从低像素到高清晰,批量提升TIFF图片像素,高效管理图片库

你是否曾经因为手中持有的TIFF图片像素过低&#xff0c;而无法展现出其应有的魅力而苦恼&#xff1f;在数字化时代&#xff0c;像素就是图像的生命力&#xff0c;而一张低像素的TIFF图片往往无法满足我们日益增长的视觉需求。 第一步&#xff0c;首先我们要进入首助剪辑高手主页…

基于SSM的在线教学质量评价系统(有报告)。Javaee项目。ssm项目。

演示视频&#xff1a; 基于SSM的在线教学质量评价系统&#xff08;有报告&#xff09;。Javaee项目。ssm项目。 项目介绍&#xff1a; 采用M&#xff08;model&#xff09;V&#xff08;view&#xff09;C&#xff08;controller&#xff09;三层体系结构&#xff0c;通过Spri…

04 Aras Innovator二次开发-客户端方法

客户端方法为JS方法。 系统提供了很多触发点&#xff0c;可以嵌入客户端方法&#xff0c;如下&#xff1a; 1 对象类的客户端事件页签&#xff1a; 2 窗体的Form Event和Filed Event 3.关系类的网格事件&#xff1a; 4 属性事件&#xff1a; 5.可自定义Action,触发客户端事件…

springboot746旧物置换网站

springboot746旧物置换网站 获取源码——》公主号&#xff1a;计算机专业毕设大全

【plt.hist绘制直方图】:从入门到精通,只需一篇文章!【Matplotlib可视化】

【&#x1f4ca;plt.pie绘制直方图】&#xff1a;从入门到精通&#xff0c;只需一篇文章&#xff01;【Matplotlib可视化】&#xff01; 利用Matplotlib进行数据可视化示例 &#x1f335;文章目录&#x1f335; &#x1f4c8; 一、引言&#x1f50d; 二、plt.hist()函数基础&am…

前端仔浅浅复习一下服务器的购买与使用

最近想买个服务器搭建个博客玩玩&#xff0c;所以就重新熟悉一下&#xff0c;从0到1&#xff0c;从购买服务器到使用的整个流程。 产品选择 阿里云和腾讯云两个大头居多&#xff0c;两个都有新人首购优化&#xff0c;100以内一年&#xff0c;对比一下看哪边的优惠力度大就选哪…

AT24C02(I2C总线)通信的学习

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、存储器介绍二、AT24C02芯片二、I2C总线I2C电路规范I2C时序结构I2C数据帧AT24C02数据帧 总结 前言 学习AT24C02(I2C总线)芯片 一、存储器介绍 RAM&#xf…

自适应网站建站源码系统 带完整的安装代码包以及搭建教程

在当今数字化时代&#xff0c;拥有一个功能全面且能够适应不同设备的网站对于企业和个人来说至关重要。罗峰给大家分享一款全新的自适应网站建站源码系统&#xff0c;它不仅提供了完整的安装代码包&#xff0c;还附带了详细的搭建教程&#xff0c;帮助用户轻松构建出具有响应式…