微信小程序开发实战基础二、wxml模板,动态更新内联样式

1、模板使用

1、wxml中创建模板

<template name="msgItem">

<view>

<text> {{index}}: {{msg}} </text>

<text> Time: {{time}} </text>

</view>

</template>

2、js中准备数据

data: {

item: {

index: 0,

msg: 'this is a template',

time: '2016-06-18'

},

},

3、引用模板

一个模板

<template is="msgItem" data="{{...item}}"/>

多个模板 

<block wx:for="{{[1, 2, 3, 4, 5]}}">
  <template is="{{item % 2 == 0 ? 'even' : 'odd'}}"/>
</block>

 2、动态更新内联样式

1、js里面准备数据

data: {

eleColor: 'blue',

eleFontsize: '48rpx'

},

2、wxml动态调用内联样式值

<view style="color: {{eleColor}}; font-size: {{eleFontsize}}">sfwefwef分为非</view>

发布了339 篇原创文章 · 获赞 66 · 访问量 36万+

猜你喜欢

转载自blog.csdn.net/meixi_android/article/details/94736931