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

如图

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

这里是源代码

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。

相关推荐
老李不敲代码15 小时前
榕壹云预约咨询系统:基于ThinkPHP+MySQL+UniApp打造的灵活预约小程序解决方案
mysql·微信小程序·小程序·uni-app·php
fakaifa15 小时前
【最新版】西陆健身系统源码全开源+uniapp前端
前端·小程序·uni-app·开源·php·约课小程序·健身小程序
二J16 小时前
管理100个小程序-很难吗
android·小程序
qq_3573896318 小时前
陪诊陪检系统源码,陪诊小程序,陪诊APP,陪诊服务,家政上门系统,居家护理陪护源码,医护小程序
小程序
橘猫云计算机设计1 天前
springboot-基于Web企业短信息发送系统(源码+lw+部署文档+讲解),源码可白嫖!
java·前端·数据库·spring boot·后端·小程序·毕业设计
跨时代科技2 天前
洗车小程序系统前端uniapp 后台thinkphp
小程序
依辰2 天前
小程序SAAS产品定制化需求解决方案
前端·javascript·微信小程序
fakaifa2 天前
【最新版】沃德代驾源码全开源+前端uniapp
前端·小程序·uni-app·开源·php·沃德代驾·代驾小程序
18538162800余。2 天前
NFC 碰一碰实现视频源码,网页与小程序协同
小程序
换日线°2 天前
微信小程序拖拽排序有效果图
微信小程序