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

向右看齐 2022-05-18 05:43 204阅读 0赞

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

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

本篇会用得到它们的~

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

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

下面进入正题！！

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

先上效果：

![70][]

源码：

主页

index.wxml

<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][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中的

改成

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\}\}代替。一般用后面的，上面只是简单的测试！

[https_blog.csdn.net_syleapn_article_details_81289337]: https://blog.csdn.net/syleapn/article/details/81289337
[70]: /images/20220518/57e1068474e54c99912da320199c11a5.png
[https_blog.csdn.net_syleapn_article_details_79940396]: https://blog.csdn.net/syleapn/article/details/79940396