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

# 欢迎来到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><!--弹出框结束-->

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