收藏
回答

请教wx for 中弹出窗的传值方式?

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>


目前效果图

但是点开里面的详情,只返回最后一条记录的参数

每条都返回这个

请问,我要怎么把每条记录的参数精确传输进去。

谢谢大家!

回答关注问题邀请回答
收藏

2 个回答

  • brave
    brave
    2021-12-14
    //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>
    
    2021-12-14
    有用 3
    回复 1
    • D.F
      D.F
      2021-12-14
      正解,感谢
      2021-12-14
      回复
  • 困难
    困难
    2021-12-14

    如果我没看错的话,循环弹窗,然后每一个弹窗的判断条件都是一样的???那要怎么区分点击的是哪个弹窗呢?你确定是只弹出最后一个,不是全部弹出来只是最后一个覆盖了剩下的?

    没必要循环弹窗吧,在外面写弹窗,然后根据点击传入对应的数据就好了。

    2021-12-14
    有用
    回复 1
    • D.F
      D.F
      2021-12-14
      感谢回复,确实只弹出最后一个,不管点哪条记录,就是只传了最后一个记录的下标进去了而已。如果我不设置弹窗,其实按原来的item.字段是能准确取值的,加弹窗为了省篇幅。
      2021-12-14
      回复
登录 后发表内容