微信小程序之列表渲染后跳转详情页面（页面跳转带参数 和 js获取参数）

1.列表页面样式：

<view class="table">
    <block wx:for="{{staffList}}" wx:key="{{index}}">
      <view class="tr" bindtap="onStaffDetail" data-index='{{index}}'>
        <view class="td_1">
          <view class='one_div'>
            <view class='tx_1'>{{item.staffName}}</view>
            <block wx:if="{{item.sex=='MAN'}}">
              <view class="tx_2">男</view>
            </block>
            <block wx:elif="{{item.sex=='WOMAN'}}">
              <view class="tx_2">女</view>
            </block>
            <block wx:else>
              <view class="tx_2">未知</view>
            </block>
            <view class='tx_3'>{{item.roleName}}</view>
          </view>
 
          <view class='two_div'>
            <view class='tx_4'>{{item.orgName}}</view>
            <block wx:if="{{item.enable==true}}">
              <view class="tx_5">在职</view>
            </block>
            <block wx:elif="{{item.enable==false}}">
              <view class="tx_5">离职</view>
            </block>
          </view>
        </view>
      </view>
    </block>
  </view>

2.列表js跳转详情页面函数： 

 onStaffDetail:function(e){
    var index = parseInt(e.currentTarget.dataset.index);
    var staffId=this.data.staffList[index].staffId;
    wx.navigateTo({
      url: '/pages/staffdetail/index?staffId=' + this.data.staffList[index].staffId,
    })
  },

3.详情页面获取所传参数js: 

onLoad: function(options) {
    var that = this;
    this.setData({
      staffId: options.staffId
    })  
    var staffId=this.data.staffId;
    http.get('/staffDetail', {
      staffId: staffId
    }, function(err, res) {
      if (res.success == false) {
        wx.redirectTo({
          url: '/pages/login/index',
        })
      }
      if (res.errCode == 0) {
        that.setData({
          staffDetail: res.data
        })
      }
    });
 
 
 
  },

 

 

 

来源：CSDN

作者：chunchun1230

链接：https://blog.csdn.net/chunchun1230/article/details/103511510