zoukankan      html  css  js  c++  java
  • 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);
     
     
     
  • 相关阅读:
    ASP.NET Razor
    ASP.NET Razor
    ASP.NET Razor
    ASP.NET Razor C# 和 VB 代码语法
    ASP.NET Razor 简介
    aspnet_regiis -i VS 20XX 的开发人员命令提示符
    web.config
    Java_Freemarker
    SQL SELECT INTO 语句
    SQL UNION 和 UNION ALL 操作符
  • 原文地址:https://www.cnblogs.com/tian-sun/p/7405814.html
Copyright © 2011-2022 走看看