JS中的弹窗函数
//弹窗
showModal(e) {
this.setData({
modalName: e.currentTarget.dataset.target
})
},
hideModal(e) {
this.setData({
modalName: null
})
},
WXML中的调用方式
<view wx:for="{{re}}" wx:key="re" class="search_result">
<!-- 当提交空白表单的时候 -->
<view class="empty bg-red erro">{{item.empty}}</view>
<!-- 当查询不到结果的时候 -->
<view class="noresult bg-red erro">{{item.noresult}}</view>
<!-- 当有搜索结果的时候 -->
<!-- <view class="resname">{{item.xkzadd}}</view>-->
<view class="cu-bar bg-white margin-top">
<view class="action">
<text class="cuIcon-title text-orange "></text> {{item.warehousename}}
</view>
<view class="action">
<button class="cu-btn bg-green shadow" bindtap="showModal" data-target="Modal" >详情</button>
</view>
</view>
<view class="cu-modal {{modalName=='Modal'?'show':''}}">
<view class="cu-dialog">
<view class="cu-bar bg-white justify-end">
<view class="content text-red text-bold">{{item.warehousename}}</view>
<view class="action" bindtap="hideModal">
<text class="cuIcon-close text-red"></text>
</view>
</view>
<!-- 弹窗内容 -->
<view class="cu-list menu card-menu margin-bottom-xl shadow-lg radius" >
<view class="cu-item ">
<text class="text-black">城市:{{item.city}}</text>
</view>
<view class="cu-item ">
<text class=" text-black">属性:{{item.properties}}</text>
</view>
<view class="cu-item ">
<text class=" text-black">库容:{{item.Storage}}</text>
</view>
<view class="cu-item ">
<text class=" text-blue">其他信息仅限内部查看</text>
</view>
</view>
<!-- 弹窗结束 -->
</view>
</view>
</view>
目前效果图
但是点开里面的详情,只返回最后一条记录的参数
每条都返回这个
请问,我要怎么把每条记录的参数精确传输进去。
谢谢大家!
//js Page({ data: { info: null }, showModal(e) { this.setData({ info: e.currentTarget.dataset.info }) }, hideModal(){ this.setData({ info: null }) } }) //wxml <button class="cu-btn bg-green shadow" bindtap="showModal" data-info="{{item}}">详情</button> <view class="cu-modal {{info ?'show':''}}"> <view class="cu-dialog"> <view class="cu-bar bg-white justify-end"> <view class="content text-red text-bold">{{info.warehousename}}</view> <view class="action" bindtap="hideModal"> <text class="cuIcon-close text-red"></text> </view> </view> <!-- 弹窗内容 --> <view class="cu-list menu card-menu margin-bottom-xl shadow-lg radius" > <view class="cu-item"> <text class="text-black">城市:{{info.city}}</text> </view> <view class="cu-item"> <text class="text-black">属性:{{info.properties}}</text> </view> <view class="cu-item"> <text class="text-black">库容:{{info.Storage}}</text> </view> <view class="cu-item"> <text class="text-blue">其他信息仅限内部查看</text> </view> </view> <!-- 弹窗结束 --> </view> </view> </view>
如果我没看错的话,循环弹窗,然后每一个弹窗的判断条件都是一样的???那要怎么区分点击的是哪个弹窗呢?你确定是只弹出最后一个,不是全部弹出来只是最后一个覆盖了剩下的?
没必要循环弹窗吧,在外面写弹窗,然后根据点击传入对应的数据就好了。