Zusammenfassung der Wertübertragungsmethoden in WeChat-Miniprogrammen

巴扎黑
Freigeben: 2017-09-06 10:49:42
Original
1850 Leute haben es durchsucht

微信小程序 传值取值
小程序里常见的取值有以下几种,一个完整的项目写下来,用到的概率几乎是100%。
列表index下标取值
页面传值
form表单取值
1. 列表index下标取值
实现方式是:data-index="pw_index"挖坑及e.currentTarget.dataset.index来填坑即可
1.1 生成值

<image src="../../../images/icon_delete.png" /><text>删除</text>
Nach dem Login kopieren


在删除图标与文字添加data-index="pw_index"自定义属性以及绑定点击事件bindtap="delete"

<view data-index="pw_index" bindtap="delete">&lt;image src="../../../images/icon_delete.png" /&gt;&lt;text&gt;删除&lt;/text&gt;</view>
Nach dem Login kopieren


实现delete方法,取到index下标值。


图片:1.png

Zusammenfassung der Wertübertragungsmethoden in WeChat-Miniprogrammen

delete: function (e) {
  var index = parseInt(e.currentTarget.dataset.index);
  console.log("index" + index);
}
Nach dem Login kopieren


如果不使用e.currentTarget而使用e.target会怎样?
将会导致仅点中才能输出index值,点子元素将输出NaN。


图片:2.png

Zusammenfassung der Wertübertragungsmethoden in WeChat-Miniprogrammen

那target有什么用呢,用于区分子元素与外部元素要分别处理时,比如换用户头像的场景,点击头像本身预览大图,而头像所在的点整一行,将是切换头像。


图片:3.png

Zusammenfassung der Wertübertragungsmethoden in WeChat-Miniprogrammen

关于二者区别的详情说明,请见文档:https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/event.html
1.2 取出值
试图从index数据中找出相应元素删除地址

// 找到当前地址AVObject对象
var address = that.data.addressObjects[index];
// 给出确认提示框
wx.showModal({
  title: &#39;确认&#39;,
  content: &#39;要删除这个地址吗?&#39;,
  success: function(res) {
    if (res.confirm) {
      // 真正删除对象
      address.destroy().then(function (success) {
        // 删除成功提示
        wx.showToast({
          title: &#39;删除成功&#39;,
          icon: &#39;success&#39;,
          duration: 2000
        });
        // 重新加载数据
        that.loadData();
      }, function (error) {
 
      });
    }
  }
})
Nach dem Login kopieren


2. 页面传值
从收货地址列表页中传地址id到编辑页面,以读取原地址供修改之用。
address/list页面实现以下代码

&lt;view class="container" data-index="pw_index" bindtap="edit"&gt;&lt;image src="../../../images/icon_edit.png" /&gt;&lt;text&gt;编辑&lt;/text&gt;&lt;/view&gt;
 
edit: function (e) {
  var that = this;
  // 取得下标
  var index = parseInt(e.currentTarget.dataset.index);
  // 取出id值
  var objectId = this.data.addressObjects[index].get(&#39;objectId&#39;);
  wx.navigateTo({
    url: &#39;../add/add?objectId=&#39;+objectId
  });
},
address/add页面实现onLoad(options)方法,从url路径中获取objectId
onLoad: function (options) {
  var objectId = options.objectId
}
Nach dem Login kopieren


然后就是访问网络以及渲染页面了。


图片:4.png

Zusammenfassung der Wertübertragungsmethoden in WeChat-Miniprogrammen

3. form表单取值
3.1 方式一,通过

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!