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

如图

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

这里是源代码

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。