开发 .swan 文件

代码示例

标签可以拥有属性，需要注意的是，swan中的属性是大小写敏感的，也就是说 class 和 Class 在swan中是不同的属性。

代码示例

<text Class="wrap">hello world</text>

一个文件夹可以有两个swan文件。

代码示例

<!-- xxx.swan -->
<view>
    Hello My {{ name }}
</view>

// xxx.js
Page({
    data: {
    name: 'SWAN'
    }
});

循环

开发者可以通过在元素上添加s-for指令，来渲染一个列表。

代码示例

<view>
    <view s-for="p in persons">
    {{p.name}}
    </view>
</view>

条件

开发者可以通过在元素上添加s-if指令，来在视图层进行逻辑判断：

代码示例

Page({
    data: {
    is4G: true,
    isWifi: false
    }
});

事件

事件处理

开发者可以使用bind: + 事件名来进行事件绑定

代码示例

<view class="view-more" bind:tap="loadMore">
    点击加载更多
</view>

Page({
    loadMore: function () {
    console.log('加载更多被点击');
    }
});

目前支持的事件类型有：

事件对象

dataset

开发者可以在组件中自定义数据，并在事件发生时，由 SWAN 所在事件对象中，传递给绑定函数。

代码示例

Page({
    viewtap: function (event) {
    console.log('value is:', event.currentTarget.dataset.swan);// 输出1
    }
});

属性值也可以动态的去改变，有所不同的是，属性值必须被包裹在双引号中, 且引号可加可不加

代码示例

Page({
    data: {
        test: 1
    },
    viewtap: function (event) {
    console.log('value is:', event.currentTarget.dataset.swan);// 输出1
    }
});

需要注意的是变量名是大小写敏感的，也就是说 test 和 Test 是两个不同的变量。

代码示例

<view data-swan="{{test}}" bind:tap="viewtap">dataset-test</view>

Page({
    data: {
        test: 1,
        Test: 2
    },
    viewtap: function (event) {
    console.log('value is:', event.currentTarget.dataset.swan);// 输出1
    }
});

touches

开发者在接收到触摸类事件后，在事件对象上，可以接收到当前停留在屏幕上的触摸点。

代码示例

 <view bind:touchstart="viewtouchstart">viewtouchstart</view>