微信小程序开发实战基础二、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>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值