微信小程序开发记录

数据传递

JS向wxml传递数据

案例1

JS

this.setData({
    'key': {a: 1},
});

wxml

<!-- 显示1 -->
<text>{{key.a}}</text>

案例2

JS

this.setData({
    'key': {a: 1},
});

wxml1

<import src="wxml2 path" />
<template is="wxml2 name" data="{{...key}}"/>

wxml2(wxml2被import进wxml1中,并且wxml1通过扩展运算符将数据传递给wxml2)

<!-- 显示1,由此可见扩展运算符的好处就是省略了`key.`符号 -->
<text>{{a}}</text>

wxml向JS传递数据

案例1

wxml

<view bindtap='click' data-item='{{item}}'></view>

JS

click(e) {
    let item = e.currentTarget.dataset.item;
    //item就是传递的数据
}

FAQ

margin对第二行失效?

<text class="title">{{title}}</text>
.title{margin: 0 10px;}

使用上述方式,会发现当title因过长而换行时,第二行的外边距没有生效,可以为其设置display:block;解决。

添加新评论