dlt

DLT (DLT Language) is a set of tag language designed by the framework, combined with basic components and an event system, which can be used to construct the structure of a page.

Let's take a look at some simple examples to see what capabilities DLT has:

Data Binding

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

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

List Rendering

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

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

Conditional Rendering

<!-- 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",
  },
});

Event Binding

Note:

1. Event binding parameters can only be added to attributes through data-*, and then obtained through dataset, and must be in lowercase.
2. Because the underlying DLT is based on the Vue2.x framework, the following event binding methods can also be triggered:

<!-- 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) {
    // Get parameters
    const dataset = event.currentTarget.dataset;
    console.log(dataset.splitwidth);
    console.log(dataset.splitheight);
    console.log(dataset.splitimgwidth);
    // ...
  },
});