小程序中對應詳情頁的傳值

########  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}}代替，不過此時item.id必須在list數組中給出。不過何必這樣多此一舉來達到相同的效果----通過增加一個屬性值。