• 开发 .swan 文件
  • 基础数据绑定
  • 循环
  • 条件
  • 事件
    • 事件处理
    • 事件对象
    • dataset
    • touches

开发 .swan 文件

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

代码示例

• SWAN

 
 
 

  
  
  
<view s-for="item in items" class="single-item" bind:tap="oneItemClick" bind:touchstart="oneItemTouchStart" bind:touchmove="oneItemTouchmove" bind:touchcancel="oneItemTouchcancel" bind:touchend="oneItemTouchEnd">
  
  
  
 <image src="{{item.imgsrc}}" class="single-img"></image>
  
  
  
 <view class="single-text-area">
  
  
  
 <text class="single-title">
  
  
  
 {{item.title}}
  
  
  
 </text>
  
  
  
 <view s-if="{{item.tags}}" class="tag-area">
  
  
  
 <text s-for="tag in item.tags" class="{{tag.className}}">
  
  
  
 {{tag.content}}
  
  
  
 </text>
  
  
  
 </view>
  
  
  
 </view>
  
  
  
</view>
  
  
  
<view class="view-more" bind:tap="loadMore">
  
  
  
 <text>点击加载更多</text>
  
  
  
</view>
 
 
 

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

代码示例

在开发者工具中打开

在开发者工具中打开

在 WEB IDE 中打开

• SWAN

 
 
 

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

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

代码示例

在开发者工具中打开

在开发者工具中打开

在 WEB IDE 中打开

基础数据绑定

代码示例

• SWAN
• JS

 
 
 

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

 
 
 

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

循环

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

代码示例

• SWAN
• JS

 
 
 

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

 
 
 

  
  
  
Page({
  
  
  
 data: {
  
  
  
 persons: [
  
  
  
 {name: 'superman'},
  
  
  
 {name: 'spiderman'}
  
  
  
 ]
  
  
  
 }
  
  
  
});
 
 
 

条件

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

代码示例

• SWAN
• JS

 
 
 

  
  
  
<view s-if="is4G">4G</view>
  
  
  
<view s-elif="isWifi">Wifi</view>
  
  
  
<view s-else>Other</view>
 
 
 

 
 
 

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

事件

详情请参考事件处理。

事件处理

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

代码示例

• SWAN
• JS

 
 
 

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

 
 
 

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

目前支持的事件类型有：

事件对象

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

• JSON

 
 
 

  
  
  
{
  
  
  
 "changedTouches": [{
  
  
  
 "clientX": 194,
  
  
  
 "clientY": 401,
  
  
  
 "force": 0,
  
  
  
 "identifier": 0,
  
  
  
 "pageX": 194,
  
  
  
 "pageY": 401,
  
  
  
 "x": null,
  
  
  
 "y": null
  
  
  
 }],
  
  
  
 // 事件触发的属性集合
  
  
  
 "currentTarget": {
  
  
  
 "dataset": {},
  
  
  
 "id": "_9be18",
  
  
  
 "offsetLeft": 31,
  
  
  
 "offsetTop": 377
  
  
  
 },
  
  
  
 "detail": {
  
  
  
 "x": 194,
  
  
  
 "y": 401
  
  
  
 },
  
  
  
 "target": {
  
  
  
 "dataset": {},
  
  
  
 "id": "_9be18",
  
  
  
 "offsetLeft": 31,
  
  
  
 "offsetTop": 377
  
  
  
 },
  
  
  
 "timeStamp": 10303373,
  
  
  
 "touches": [],
  
  
  
 // 事件类型
  
  
  
 "type": "tap"
  
  
  
}
 
 
 

dataset

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

代码示例

• SWAN
• JS

 
 
 

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

 
 
 

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

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

代码示例

• SWAN
• JS

 
 
 

  
  
  
<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) {
  
  
  
 // 输出1
  
  
  
 console.log('value is:', event.currentTarget.dataset.swan);
  
  
  
 }
  
  
  
});
 
 
 

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

代码示例

• SWAN
• JS

 
 
 

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

 
 
 

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

touches

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

Touch 对象

代码示例

• SWAN
• JS

 
 
 

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

 
 
 

  
  
  
Page({
  
  
  
 viewtouchstart: function (event) {
  
  
  
 console.log('value is:', event.touches);
  
  
  
 // 输出 clientX: 44，clientX: 47，pageX: 44, pageY: 47
  
  
  
 }
  
  
  
});