wx 參數傳值

1: data-id
咱們能夠給HTML元素添加自定義的data-*屬性
example:
 
假設頁面裏有下面的元素存在:
<div id="myDiv" data-name="myDiv" data-id="myId"
       data-my-custom-key="This is the value"></div>
 
不久以前我向你們展現了很是有用的 classList API,它是一種HTML5裏提供的原生的對頁面元素的CSS類進行增、刪改的接口,徹底能夠替代jQuery裏的那些CSS類操做方法。而另一個很是有用的API就是  element.dataset API,從火狐6和Chrome8起就開始對它有了支持。這個簡單的API可以讓用戶get或setHTML頁面元素上的data-*屬性。下面咱們來看看它是如何使用的!
想必你們都知道,咱們能夠給HTML元素添加自定義的data-*屬性。你能夠給這個屬性起任何名字,但在使用element.dataset API時你須要主要如下一些規則:
  • element.dataset不可以直接拿來用,否者你會遇到報錯提示
  • 用JavaScript裏使用data-*屬性名時,要把名稱轉變成駝峯式命名(Camel-Case)
  • 名稱不能以xml打頭 
  • 名稱裏不能有大寫字母
假設頁面裏有下面的元素存在:
<div id="myDiv" data-name="myDiv" data-id="myId"
data-my-custom-key="This is the value"></div>
要想獲取這個data-id屬性,你的代碼應該寫成這樣:
// Get the element
var element = document.getElementById("myDiv");

// Get the id
var id = element.dataset.id;
要想獲取data-my-custom-key屬性值,你的代碼應該寫成這樣:
// Retrieves "data-my-custom-key"
var customKey = element.dataset.myCustomKey;
給自定義屬性賦值的方法是這樣的:
// Sets the value to something else
element.dataset.myCustomKey = "Some other value";

// Element would be:
// <div id="myDiv" data-name="myDiv" data-id="myId"
// data-my-custom-key="Some other value"></div>
若是一個自定義屬性並不存在,但在程序中你給它賦值,它會自動建立:
// Set new data- attribute
element.dataset.mootoolsFtw = "true";

// Element would be:
// <div id="myDiv" data-name="myDiv" data-id="myId"
//data-my-custom-key="Some other value" data-mootools-ftw="true">
//</div>
 
也許你會認爲data-*屬性裏能夠存放對象,但事實上不行,dataset不會初始化這些對象。我不清楚dataset對長度的限制,但在裏面存放大量的數據一定會是DOM變得臃腫不堪,很難調試。喜歡使用jQuery的朋友應該知道jQuery裏也有相應的$.data()方法,沒錯,HTML5裏的這個原生的dataset就是來替代它的,
 
使用方法:
 
1: 設置data-id
 <view class="block" bindtap="playTap" data-id="{{song.id}}">
2: 傳值
 playTap:function(e) {
        const dataset = e.currentTarget.dataset;
        wx.navigateTo({
          url: '../play/index?id='+ dataset.id
        })
        console.log(dataset.id);
    }
3: 取值
 onLoad:function (param) {
    //頁面初始化
        this.setData({
            currentId:param.id
        })
}
二 
 
設置id的方法標識來傳值
1:設置 
<view bindtap=「playTap" id="{{song.id}}">
2:取值
經過e.currentTarget.id;獲取設置的id值,並經過設置全局對象的方式來傳遞數值,
三 :
<navigator url="../movie/movie?id={{item.id}}" wx:for="{{movies}}">
onLoad (params){
        app.fetch(API.detail + params.id,(err,data) => {
            console.log(data);
            this.setData({
                title:data.title,
                movie:data,
                loading:false
            });
        })
    }, 
 
go_incollection : function (){
        wx.navigateTo({
          url: '../generalInfo/generalInfo?id=' + this.data.customId + '&name=' + this.data.choseName 
        })
    }
const conf = {
    data:{
    },
    onLoad:function (e) {
        console.log(e.id);
        console.log(e.name);
    }
};
Page(conf);
相關文章
相關標籤/搜索