微信小程序商品循环列表点击弹出当前的商品信息

# 欢迎来到wxfdpp的博客
本博主也是第一次发，有什么问题，我们一起讨论吧：

• 微信小程序之跳坑日记-1

---

循环列表点击图片显示当前的信息，如图

当我们点击图片的时候会跳出如下的模态框

是怎么做到的呢！下面我们来详细说明一下

<view class="goodsshow" wx:for="{{goodslist}}" wx:key="{{item.id}}">
    <view class="goodsshow-50">
      <!-- data自定义属性-->
      <view catchtap="modelpop" data-sellingrate="{{item.sellingrate}}" data-name="{{item.name}}" data-img="{{item.img}}" data-number="{{item.number}}" data-id="{{item.id}}" class="goodsshow-image">
        <image src="{{item.img}}"></image>
      </view>
      <view class="goodsshow-text">
        <view class="goodsshow-text1">{{item.name}}</view>
        <view class="goodsshow-text2">{{item.numbers}}</view>
      </view>
    </view>
    <view class="goodsshow-20">
      <view bindtap="popup" data-id="{{item.id}}" class="{{0==item.number?'active-show':'active-hidden'}} active-posres">
        <view class="active-abso {{currentItem1==item.id?'show1':''}}">当前的库存不足,请及时补货</view>
        <image src="{{warn}}"></image>
      </view>
      <view class="{{0==item.number?'active-red':''}}">{{item.number}}件</view>
    </view>
    <view class="goodsshow-20" data-id="{{item.id}}">
      <text hidden="{{hiddentext}}">{{item.sellingrate}}</text>
      <text hidden="{{!hiddentext}}">{{item.scale}}</text>
    </view>
    <view class="goodsshow-10" catchtap="hiddenup" data-id="{{item.id}}">
      ...
    </view>

• 使用wx:for=”{{goodslist}}”遍历goodlis，在上面的代码中，我们使用item.×××直接渲染到页面就可以了 但是一定要有wx:key=”{{item.id}}”这个东西，后面要用的到哦

接下来我们就来做点击图片实现弹窗
第一步：给点击的元素增加自定义的属性，例如data-id 等获取到当前点击元素的信息

<view catchtap="modelpop" data-sellingrate="{{item.sellingrate}}" data-name="{{item.name}}" data-img="{{item.img}}" data-number="{{item.number}}" data-id="{{item.id}}" class="goodsshow-image">
        <image src="{{item.img}}"></image>
</view>

第二步：在js中操作 先定义变量 而后在点击的函数内部把之前用自定义属性获取到的信息赋值给data定义的变量，

data: {
    msgItem:"msgItem1",
    hidden:true,
    hiddentext:false,
    modelNumber:null,
    modelImg:null,
    modelName:null,
    modelsellingrate:null,
    selectPerson: true,
    }

 modelpop: function (e) {
    // console.log("弹出框", e.currentTarget.dataset)
    var that = this;
    that.setData({
      hidden: false,
      modelNumber: e.currentTarget.dataset.number,
      modelImg: e.currentTarget.dataset.img,
      modelName: e.currentTarget.dataset.name,
      modelsellingrate: e.currentTarget.dataset.sellingrate,
    })
  },

第三步：把已经修改过后的全局变量直接使用{{}}渲染到你的弹出框里就OK了，不要问我弹出框怎么做，自己找度娘吧

<!--弹出框-->
<modal bindtap="cancel" class="model" hidden="{{hidden}}" confirm-text="" cancel-text="">
  <view class="model-img">
    <image src="{{modelImg}}"></image>
  </view>
  <view class="model-name">{{modelName}}</view>
  <view class="model-number">
    <view class="number-text1">库存：{{modelNumber}}</view>
    <view class="number-text2">销售率：{{modelsellingrate}}</view>
  </view>
</modal>
<!--弹出框结束-->

- 好了楼主的第一次发帖就这样结束了，希望能给大家带来帮助