抖音小程序——ttml视图层

和vue和微信小程序差不多,TTML 是用来编写页面结构用的标签语言。

1.TTML-数据绑定

基本数据绑定

<view> {{ message }} </view>

Page({
  data: {
    message: "Hello World!"
  }
});

条件渲染tt:if

<view tt:if="{{condition}}"> </view>

三元运算

<view hidden="{{flag ? true : false}}"> Hidden </view>

扩展运算符 ... 将对象展开

现在只支持在 template 上定义对象,在其它标签上这么写会报错.

<template is="objectCombine" data="{{...obj1, ...obj2, e: 5}}"></template>
<!-- template到的data是: {a: 1, b: 2, c: 3, d: 4, e: 5} -->
Page({
  data: {
    obj1: {
      a: 1,
      b: 2
    },
    obj2: {
      c: 3,
      d: 4
    }
  }
});

2.TTML-列表渲染tt:for

列表渲染很简单,就是去循环一个数组。和我们的vue的v-for其实是一样的。


<view tt:for="{{lists}}" tt:key="{{index}}">{{item.name}}</view>
 lists: [
      { name: "mm" },
      { name: "ss" },
      { name: "ee" },
      { name: "ll" },

    ]

tt.key的指定方法。

字符串,代表 item 的某个字段,比如tt:key="unique",那么指定 item 的 unique 字段为 key

**this,代表 item 本身,比如tt:key="*this",那么就是用 item 本身(字符串)作为 key

3.条件渲染tt:if

<view tt:if="{{condition}}"> True </view>
// index.js
Page({
  data: {
    condition: true
  }
});

hidden

我们也可以通过一个更加简单的属性来控制标签的展示。

<view hidden="{{condition}}"> True </view>

相比之下,hidden 就简单的多,组件始终会被渲染,只是简单的控制显示与隐藏。相当于v-show。

一般来说,tt:if 有更高的切换消耗而 hidden 有更高的初始渲染消耗。因此,如果需要频繁切换的情景下,用 hidden 更好,如果在运行时条件不大可能改变则 tt:if 较好。

4.TTML-模板template

可以在模板中定义代码片段,然后在不同的地方调用。

使用 name 属性,作为模板的名字。

<template name="msgItem">
  <view>
    <text> {{index}}: {{msg}} </text>
    <text> Time: {{time}} </text>
  </view>
</template>

模版的使用,使用 is 属性,声明需要的使用的模板,

然后将模板所需要的 data 传入。

模板拥有自己的作用域,只能使用 data 传入的数据。

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

js:

obj:{
      a:1,
      b:2,
      c:3
    }
点赞

发表评论

电子邮件地址不会被公开。 必填项已用*标注