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