建站
咨詢
售后
建站咨詢
新聞中心
- 開發(fā) .swan 文件
- 基礎(chǔ)數(shù)據(jù)綁定
- 循環(huán)
- 條件
- 事件
- 事件處理
- 事件對(duì)象
- dataset
- touches
開發(fā) .swan 文件
這部分是每個(gè)智能小程序頁面的展現(xiàn)模板，類似于 Web 開發(fā)中的 HTML，SWAN 模板中使用的標(biāo)簽均為 SWAN 組件規(guī)定的標(biāo)簽。
創(chuàng)新互聯(lián)專注于古浪網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗(yàn)。 熱誠(chéng)為您提供古浪營(yíng)銷型網(wǎng)站建設(shè)，古浪網(wǎng)站制作、古浪網(wǎng)頁設(shè)計(jì)、古浪網(wǎng)站官網(wǎng)定制、小程序定制開發(fā)服務(wù)，打造古浪網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供古浪網(wǎng)站排名全網(wǎng)營(yíng)銷落地服務(wù)。
代碼示例
- SWAN
{{item.title}}{{tag.content}}點(diǎn)擊加載更多
標(biāo)簽可以擁有屬性，需要注意的是，swan 中的屬性是大小寫敏感的，也就是說 class 和 Class 在 swan 中是不同的屬性。
代碼示例
在開發(fā)者工具中打開
在開發(fā)者工具中打開
在 WEB IDE 中打開
- SWAN
hello world hello world
一個(gè)文件夾可以有兩個(gè) swan 文件。
代碼示例
在開發(fā)者工具中打開
在開發(fā)者工具中打開
在 WEB IDE 中打開
基礎(chǔ)數(shù)據(jù)綁定
代碼示例
- SWAN
- JS
Hello My {{ name }}
// xxx.jsPage({data: {name: 'SWAN'}});
循環(huán)
開發(fā)者可以通過在元素上添加s-for指令，來渲染一個(gè)列表。
代碼示例
- SWAN
- JS
{{p.name}}
Page({data: {persons: [{name: 'superman'},{name: 'spiderman'}]}});
條件
開發(fā)者可以通過在元素上添加s-if指令，來在視圖層進(jìn)行邏輯判斷：
代碼示例
- SWAN
- JS
4G Wifi Other
Page({data: {is4G: true,isWifi: false}});
事件
詳情請(qǐng)參考事件處理。
事件處理
開發(fā)者可以使用bind: + 事件名來進(jìn)行事件綁定
代碼示例
- SWAN
- JS
點(diǎn)擊加載更多
Page({loadMore: function () {console.log('加載更多被點(diǎn)擊');}});
目前支持的事件類型有：
| 類型 | 觸發(fā)條件 |
|---|---|
| touchstart | 手指觸摸開始 |
| touchmove | 手指觸摸后進(jìn)行移動(dòng) |
| touchend | 手指觸摸結(jié)束 |
| touchcancel | 手指觸摸動(dòng)作被打斷，如來電提醒等 |
| tap | 手指觸摸后馬上離開動(dòng)作 |
事件對(duì)象
當(dāng)開發(fā)者綁定方法到事件，事件觸發(fā)時(shí)，SWAN 會(huì)給觸發(fā)的方法傳遞事件對(duì)象，事件對(duì)象因事件不同而不同，目前基礎(chǔ)的事件對(duì)象結(jié)構(gòu)為：
- JSON
{"changedTouches": [{"clientX": 194,"clientY": 401,"force": 0,"identifier": 0,"pageX": 194,"pageY": 401,"x": null,"y": null}],// 事件觸發(fā)的屬性集合"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
開發(fā)者可以在組件中自定義數(shù)據(jù)，并在事件發(fā)生時(shí)，由 SWAN 所在事件對(duì)象中，傳遞給綁定函數(shù)。
代碼示例
- SWAN
- JS
dataset-test
Page({viewtap: function (event) {// 輸出1console.log('value is:', event.currentTarget.dataset.swan);}});
屬性值也可以動(dòng)態(tài)的去改變，有所不同的是，屬性值必須被包裹在雙引號(hào)中, 且引號(hào)可加可不加
代碼示例
- SWAN
- JS
dataset-test // 同dataset-test
Page({data: {test: 1},viewtap: function (event) {// 輸出1console.log('value is:', event.currentTarget.dataset.swan);}});
需要注意的是變量名是大小寫敏感的，也就是說 test 和 Test 是兩個(gè)不同的變量。
代碼示例
- SWAN
- JS
dataset-test
Page({data: {test: 1,Test: 2},viewtap: function (event) {// 輸出1console.log('value is:', event.currentTarget.dataset.swan);}});
touches
開發(fā)者在接收到觸摸類事件后，在事件對(duì)象上，可以接收到當(dāng)前停留在屏幕上的觸摸點(diǎn)。
Touch 對(duì)象
| 屬性 | 類型 | 描述 |
|---|---|---|
| pageX , pageY | Number | 距離文檔左上角的距離，橫向?yàn)?X，縱向?yàn)?Y |
| clientX , clientY | Number | 距離屏幕視口左上角距離，橫向?yàn)?X，縱向?yàn)?Y |
代碼示例
- SWAN
- JS
viewtouchstart
Page({viewtouchstart: function (event) {console.log('value is:', event.touches);// 輸出 clientX: 44，clientX: 47，pageX: 44, pageY: 47}});
網(wǎng)頁標(biāo)題：創(chuàng)新互聯(lián)百度小程序教程：開發(fā).swan文件
標(biāo)題鏈接：http://m.fisionsoft.com.cn/article/dhsccjp.html
