DLT

DLT 是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。

用以下一些简单的例子来看看 DLT 具有什么能力：

数据绑定

<!--dlt-->
<view :data-num="num" :class=[cls, {'active': isActive}]> {{message}} </view>

// page.js
Page({
  data: {
    cls: "show",
    isActive: true,
    num: 10,
    message: "Hello MINA!",
  },
});

列表渲染

<!--dlt-->
<view s-for="item in array"> {{item}} </view>

// page.js
Page({
  data: {
    array: [1, 2, 3, 4, 5],
  },
});

条件渲染

<!--dlt-->
<view s-if="view == 'TRANSSION'"> WEBVIEW </view>
<view s-elseif="view == 'APP'"> APP </view>
<view s-else="view == 'MINA'"> MINA </view>

// page.js
Page({
  data: {
    view: "MINA",
  },
});

事件绑定

注意：

1. 事件绑定参数只能通过 data-* 添加到属性上，再通过 dateset 获取, 且必须为小写
2. 由于 DLT 底层是基于 Vue2.x 框架实现的，所以以下事件绑定方式也是可以触发的：

<!--dlt-->
<view
  class="items-slider"
  :class="{center: splitNeedDragNum <= 3}"
  :data-splitwidth="splitWidth"
  :data-splitheight="splitHeight"
  :data-splitimgwidth="splitImgWidth"
  :data-demosplitwidth="demoSplitWidth"
  :data-demosplitheight="demoSplitHeight"
  :data-demoimgwidth="demoImgWidth"
  :data-windowswidth="windowsWidth"
  :data-windowsheight="windowsHeight"
  bind:tap="handleClick"
  bind:click.native="handleClick"
  bind:touchstart.native.capture="handleParentTouchStart"
  bind:touchmove.native.capture="handleParentTouchMove"
  bind:touchend.native.capture="handleParentTouchEnd"
>
</view>

Page({
  handleClick(event) {
    // 获取参数
    const dataset = event.currentTarget.dataset;
    console.log(dataset.splitwidth);
    console.log(dataset.splitheight);
    console.log(dataset.splitimgwidth);
    // ...
  },
});