当前位置: 首页 > news >正文

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

如图

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

这里是源代码

 <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。

相关文章:

  • spring boot 使用AOP实现是否已登录检测
  • 机器学习基础(四)非监督学习的进阶探索
  • Nginx基础入门
  • 10、内网安全-横向移动域控提权NetLogonADCSPACKDC永恒之蓝
  • GPT-SoVITS-WebUI 克隆声音 macos搭建
  • 计算机组成原理(4)-----Cache的原理及相关知识点
  • 解决vscode每次git pull/push都需要输入账号密码
  • 软件测试面试常见问题【含答案】
  • java异常处理设计
  • Docker之MySQL8安装、容器数卷挂载、数据库导入导出操作
  • Resolving Low-Level Graphics Issues
  • 我为什么不喜欢关电脑?
  • 【深度学习每日小知识】交并集 (IoU)
  • Python+ddt+Excel实现接口自动化测试生成完美测试报告
  • SpringBoot+WebSocket实现即时通讯(一)
  • python3.6+scrapy+mysql 爬虫实战
  • 时间复杂度分析经典问题——最大子序列和
  • android高仿小视频、应用锁、3种存储库、QQ小红点动画、仿支付宝图表等源码...
  • CoolViewPager:即刻刷新,自定义边缘效果颜色,双向自动循环,内置垂直切换效果,想要的都在这里...
  • crontab执行失败的多种原因
  • es6(二):字符串的扩展
  • maven工程打包jar以及java jar命令的classpath使用
  • Node.js 新计划:使用 V8 snapshot 将启动速度提升 8 倍
  • python 装饰器(一)
  • 百度地图API标注+时间轴组件
  • 高度不固定时垂直居中
  • 构建工具 - 收藏集 - 掘金
  • 将回调地狱按在地上摩擦的Promise
  • 聊聊springcloud的EurekaClientAutoConfiguration
  • 目录与文件属性:编写ls
  • 深入浅出webpack学习(1)--核心概念
  • 微信小程序设置上一页数据
  • 最简单的无缝轮播
  • #vue3 实现前端下载excel文件模板功能
  • $L^p$ 调和函数恒为零
  • (03)光刻——半导体电路的绘制
  • (ros//EnvironmentVariables)ros环境变量
  • (附源码)ssm考生评分系统 毕业设计 071114
  • (一)Java算法:二分查找
  • (转)http-server应用
  • (转)linux自定义开机启动服务和chkconfig使用方法
  • (转)socket Aio demo
  • .form文件_SSM框架文件上传篇
  • .Net Core webapi RestFul 统一接口数据返回格式
  • .NET/C# 将一个命令行参数字符串转换为命令行参数数组 args
  • .NET中winform传递参数至Url并获得返回值或文件
  • @ConditionalOnProperty注解使用说明
  • [ IOS ] iOS-控制器View的创建和生命周期
  • [ vulhub漏洞复现篇 ] Apache APISIX 默认密钥漏洞 CVE-2020-13945
  • [ACM] hdu 1201 18岁生日
  • [Angular 基础] - 指令(directives)
  • [BROADCASTING]tensor的扩散机制
  • [BUG]Datax写入数据到psql报不能序列化特殊字符
  • [BZOJ] 2006: [NOI2010]超级钢琴
  • [docker] Docker容器服务更新与发现之consul