开发 .swan 文件

这部分是每个智能小程序页面的展现模板,类似于 Web 开发中的 HTML,SWAN 模板中使用的标签均为 SWAN 组件规定的标签。

代码示例

  1. <view s-for="item in items" class="single-item" bind:tap="oneItemClick" bind:touchstart="oneItemTouchStart" bind:touchmove="oneItemTouchmove" bind:touchcancel="oneItemTouchcancel" bind:touchend="oneItemTouchEnd">
  2. <image src="{{item.imgsrc}}" class="single-img"></image>
  3. <view class="single-text-area">
  4. <text class="single-title">
  5. {{item.title}}
  6. </text>
  7. <view s-if="{{item.tags}}" class="tag-area">
  8. <text s-for="tag in item.tags" class="{{tag.className}}">
  9. {{tag.content}}
  10. </text>
  11. </view>
  12. </view>
  13. </view>
  14. <view class="view-more" bind:tap="loadMore">
  15. <text>点击加载更多</text>
  16. </view>

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

代码示例

在开发者工具中预览效果

  1. <text class="wrap">hello world</text>
  2. <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>
Page({
    data: {
    persons: [
        {name: 'superman'},
        {name: 'spiderman'}
    ]
    }
});

条件

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

代码示例

<view s-if="is4G">4G</view>
<view s-elif="isWifi">Wifi</view>
<view s-else>Other</view>
Page({
    data: {
    is4G: true,
    isWifi: false
    }
});

事件

事件处理

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

代码示例

<view class="view-more" bind:tap="loadMore">
    点击加载更多
</view>
Page({
    loadMore: function () {
    console.log('加载更多被点击');
    }
});

目前支持的事件类型有:

类型触发条件
touchstart手指触摸开始
touchmove手指触摸后进行移动
touchend手指触摸结束
touchcancel手指触摸动作被打断,如来电提醒等
tap手指触摸后马上离开动作

事件对象

当开发者绑定方法到事件,事件触发时,SWAN 会给触发的方法传递事件对象,事件对象因事件不同而不同,目前基础的事件对象结构为:

属性类型说明
typeString事件类型
currentTargetObject事件触发的属性集合

dataset

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

代码示例

<view data-swan="1" bind:tap="viewtap">dataset-test</view>
Page({
    viewtap: function (event) {
    console.log('value is:', event.currentTarget.dataset.swan);// 输出1
    }
});

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

代码示例

<view data-swan={{test}} bind:tap="viewtap">dataset-test</view>
// 同<view data-swan="{{test}}" bind:tap="viewtap">dataset-test</view>
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

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

Touch 对象

属性类型描述
pageX , pageYNumber距离文档左上角的距离,横向为 X,纵向为 Y
clientX , clientYNumber距离屏幕视口左上角距离,横向为 X,纵向为 Y

代码示例

 <view bind:touchstart="viewtouchstart">viewtouchstart</view>
Page({
    viewtouchstart: function (event) {
        console.log('value is:', event.touches);
        // 输出 clientX: 44,clientX: 47,pageX: 44, pageY: 47
    }
});