小程序中对应详情页的传值

######## 2018.7.30/18:46 #########

上一篇博文中已明了e.target与e.currentTarget的区别，详情点这里查看https://blog.csdn.net/syleapn/article/details/81289337

本篇会用得到它们的~

下面进行今天的重点，页面传值的方式很多，我尽可能的通过实例列出，欢迎大家的补充~

小程序页面传值，通常是传多个，本篇也是进行多值传递的讲解，掌握了多值的传递，单个值的传递就很简单了，而且多值也常用到。

下面进入正题！！

方法一：通过设置id的方法来传值

先上效果：

源码：

主页

index.wxml

<!--index页  -->
<!--页面传值（多个参数）  -->



<!--通过设置id的方法标识来传值  -->
<block wx:for="{{list}}" wx:key="">     
      <view class='View' bindtap='detail' id='{{index}}'>        
         <view class="viewNum">第{{index+1}}个View</view>  
         <view>{{item.a1}}</view>
         <view>{{item.a2}}</view>
         <view>{{item.a3}}</view>
     </view>
</block>

index.wxss

.View{
  padding: 20rpx 0;
  margin: 24rpx 0;
  background-color: cyan;
  font-size: 30rpx;
  line-height: 40rpx;
}

.viewNum{
  color: red;
  font-size: 34rpx;
  margin-bottom: 20rpx;
}

index.js

Page({
  data: {
    // 数据
    list: [
      {
        a1: "name11",
        a2: "name12",
        a3: "name13"
      }, 
      {
        a1: "name21",
        a2: "name22",
        a3: "name23"
      }, 
      {
        a1: "name31",
        a2: "name32",
        a3: "name33"
      }, 
    ]
  },

  // 方法
  detail: function (e) {
    var that = this
    //获取当前点击元素的id(索引值)
    var Id = e.currentTarget.id;  
    //获取当前点击元素的属性值。
    var mesg = that.data.list[Id]; 
    //因为获取到的值是个对象，url只能传字符串，所以必须把它转化为字符串。
    mesg = JSON.stringify(mesg); 
    //跳转到详情页 
    wx.navigateTo({      
      //在接收页面的url后面加上“？自定义名称=字符串”就可以通过url传值
      url: '../detail/detail?Mesgs=' + mesg,      
     
    })
  },
})

详情页

detail.wxml

<!--详情页  -->
<view>
     <view>{{detail.a1}}</view>  
     <view>{{detail.a2}}</view>  
     <view>{{detail.a3}}</view>  
</view>

detail.js

Page({
 data:{
  // 对象
  detail:{},
 },
  
  onLoad: function (options) {   
    var that= this
    // 字符串转json
    var info = JSON.parse(options.Mesgs);        
    console.log(info)  

    that.setData({
      // 把从index页面获取到的属性值赋给详情页的detail，供详情页使用
      detail: info
    })

  }
})

############## 下班了，吃饭啦，先写到这儿~ ############

##### 2018.7.30/22.01 ######

说明：1>上面代码中用了字符串与JSON转化，关于它们的转化以及为何转化请参考:https://blog.csdn.net/syleapn/article/details/79940396

2>上面方法有局限，只能适用于详情页是相同的模块~

3>为了提高代码执行率，一般写上wx:key。不过不写不影响运行结果，只是给个警告。

4>上述代码id="{{n}}，这个n为wx:for-index的值，当wx:for-index更改时，n做相应的调整即可。

方法二：通过设置data-*的方式来传值

只需将方法一中的代码做如下调整即可：

1>将index.wxml中的

 <view class='View' bindtap='detail' id='{{index}}'>

改成

 <view class='View' bindtap='detail' data-id='{{index}}'>

2>index.js中的

 var Id = e.currentTarget.id;

改成

var Id = e.currentTarget.dataset.id;

即可；

说明：

1>方法二中的data-id="{{n}}中，这个n也为wx:for:index的值。

2>上述方法一、二中的id="{{index}}与data-id="{{index}}可用id="{{item.id}}"与data-id="{{item.id}}代替。一般用后面的，上面只是简单的测试！

Syleapn

发布了32 篇原创文章 · 获赞 57 · 访问量 13万+

私信关注

小程序中对应详情页的传值

猜你喜欢