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

如图

遍历列表的过程中需要绑定数据,点击时候需要绑定数据

这里是源代码

xml 复制代码
 <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要大写,小程序会转化

js 复制代码
  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。

相关推荐
说私域5 小时前
定制开发开源AI智能名片S2B2C商城小程序:技术赋能商业价值实现路径研究
大数据·人工智能·小程序·开源
说私域6 小时前
基于开源AI大模型AI智能名片S2B2C商城小程序,探究私域电商中人格域积累与直播电商发展
人工智能·小程序·开源·零售
雅致教育6 小时前
基于微信小程序的医院挂号预约系统设计与实现
微信小程序·小程序
@PHARAOH1 天前
WHAT - uni-app 条件编译技术
小程序·uni-app·条件编译
hunzi_11 天前
选择网上购物系统要看几方面?
java·微信小程序·小程序·uni-app·php
芭拉拉小魔仙1 天前
Uniapp Vue3 小程序接入实时音视频TUICallKit遇到的问题
小程序·uni-app·实时音视频
2305_797882091 天前
AI识图小程序的功能框架设计
人工智能·微信小程序·小程序
暮雨哀尘1 天前
微信小程序开发:开发实践
开发语言·算法·微信小程序·小程序·notepad++·性能·技术选型
幽络源小助理2 天前
微信小程序实验室管理SSM系统设计与实现
微信小程序·小程序
zoahxmy09292 天前
微信小程序 request 流式数据处理
微信小程序