# 百度小程序--交互 --- ## 一、交互 ```php 1. 數據交互（初始數據） 2. 字符串運算 3. 算數運算 4. 三元運算 5. 邏輯判斷 6. 循環 7. bindtap 綁定自定義事件 8. 動態設置初始數據 9. block組件 10. 組件屬性：hidden 11. 組件 綁定自定義事件 12. navigator 組件 ``` --- ### 1、數據交互（初始數據） * data 是頁面第一次渲染使用的初始數據。 * 頁面加載時，data 將會以JSON字符串的形式由邏輯層傳至渲染層，因此data中的數據必須是可以轉成JSON的類型：字符串，數字，布爾值，對象，數組。 * 可以在 {{ }} 內進行簡單的運算，數據綁定 > js示例： ```js Page({ data: { title: '射雕', array: [ {'id':1,'name':'歐陽克'}, {'id':2,'name':'黃蓉'}, {'id':3,'name':'郭靖'} ] } }) ``` > swan示例： ```html <view>標題：{{ title }}</view> <view>ID：{{ array[0].id }} --- 姓名：{{ array[0].name }}</view> ``` --- ### 2、字符串運算 ```html <view>{{ '歐陽克'+'黃蓉' }}</view> ``` --- ### 3、算數運算 ```html <view>{{ 1+1 }}</view> ``` --- ### 4、三元運算 > js示例： ```js Page({ data: { title: '射雕' } }) ``` > swan示例： ```html <view>姓名：{{ title ? '歐陽克' : '黃蓉' }}</view> ``` --- ### 5、`s-if` 邏輯判斷 > js示例： ```js Page({ data: { title: '射雕', array: [ {'id':1,'name':'歐陽克'}, {'id':2,'name':'黃蓉'}, {'id':3,'name':'郭靖'} ], number : 10 } }) ``` > swan示例： ```html <view s-if="{{ title }}">標題：{{ title }}</view> <view s-if="{{ number > 10 }}">人數：{{ number }}</view> <view s-if="{{ number > 5 }}">1</view> <view s-elif="{{ number > 2}}">2</view> <view s-else>3</view> ``` --- ### 6、`s-for` 循環 * 使用 s-for-item 可以指定數組當前元素的變量名 * 使用 s-for-index 可以指定數組當前下標的變量名 > js示例： ```js Page({ data: { title: '射雕', array: [ {'id':1,'name':'歐陽克'}, {'id':2,'name':'黃蓉'}, {'id':3,'name':'郭靖'} ] } }) ``` > swan示例： ```html <view s-if="{{ title }}">標題：{{ title }}</view> <view s-for="{{ array }}">ID：{{ item.id }} --- 姓名：{{ item.name }}</view> <view s-for="{{ array }}" s-for-index="idx" s-for-item="itemName">下標：{{idx}} --- ID：{{ itemName.id }} --- 姓名：{{ itemName.name }}</view> ``` --- ### 7、`bindtap` 綁定自定義事件 * 事件是視圖層到邏輯層的通訊方式 * 事件可以將用戶的行為反饋到邏輯層進行處理 * 事件對象可以攜帶額外信息，自定義傳值：data- 進行傳值 > js示例： ```js Page({ zidingyi(){ console.log('我是自定義方法'); }, ouyangke(e){ console.log(e); } }) ``` > swan示例： ```html <view bindtap="zidingyi">自定義方法</view> <view bindtap="ouyangke" data-id="1" data-name="歐陽克">自定義方法帶傳值</view> ``` --- ### 8、動態設置初始數據 * this 代表當前文件 * this.setData 設置data里的數據 > js示例： ```js Page({ data: { title: '射雕' }, zidingyi(){ this.setData({ title : '歐陽克' }) } }) ``` > swan示例： ```html <view bindtap="zidingyi">標題：{{ title }}</view> ``` --- ### 9、`block` 組件 * `block` 并不是一個組件，它僅僅是一個包裝元素，不會在頁面中做任何渲染，只接受控制屬性。 > js示例： ```js Page({ data: { title: '射雕' }, zidingyi(){ this.setData({ title : '歐陽克' }) } }) ``` > swan示例： ```html <block s-if="{{title}}"> <view bindtap="zidingyi">標題：{{ title }}</view> </block> ``` --- ### 10、組件屬性 `hidden` * hidden 組件帶hidden屬性，會被隱藏，但組件存在 * s-if 惰性的，如果在初始渲染條件為 false，框架什么也不做，組件不存在 ```html <view s-if="{{title}}">標題：{{ title }}</view> <view hidden>標題：歐陽克</view> ``` --- ### 11、組件 綁定自定義事件 * 小程序的組件有很多默認動作，可以綁定自定義事件 > input組件： **屬性**|**類型**|**描述** ---|---|--- bindinput|eventhandle|鍵盤輸入時觸發 bindfocus|eventhandle|輸入框聚焦時觸發 bindblur|eventhandle|輸入框失去焦點時觸發 bindconfirm|eventhandle|點擊完成按鈕時觸發 >> js示例： ```js Page({ a(){ console.log('鍵盤輸入時觸發'); }, b(){ console.log('輸入框聚焦時觸發'); }, c(){ console.log('輸入框失去焦點時觸發'); }, d(){ console.log('點擊完成按鈕時觸發'); } }) ``` >> swan示例： ```html <input bindinput="a" bindfocus="b" bindblur="c" bindconfirm="d" /> ``` > picker組件： **屬性**|**類型**|**描述** ---|---|--- bindcancel|eventhandle|取消選擇時觸發 bindchange|eventhandle|value 改變時觸發 change 事件 >> js示例： ```js Page({ a(){ console.log('取消選擇時觸發'); }, b(e){ console.log('value 改變時觸發 change 事件'); console.log(e); } }) ``` >> swan示例： ```html <picker mode="region" bindcancel="a" bindchange="b"> <view>請選擇：</view> </picker> ``` > checkbox-group組件、radio-group組件： **屬性**|**類型**|**描述** ---|---|--- bindchange|eventhandle|value 改變時觸發 change 事件 >> js示例： ```js Page({ a(e){ console.log('value 改變時觸發 change 事件'); console.log(e); } }) ``` >> swan示例： ```html <checkbox-group bindchange="a"> <checkbox value="1" checked />歐陽克 <checkbox value="2" color="red" />黃蓉 <checkbox value="3" disabled />郭靖 </checkbox-group> <radio-group bindchange="a"> <radio value="1" checked="true" />歐陽克 <radio value="2" color="red" />黃蓉 <radio value="3" />郭靖 <radio value="4" />楊康 </radio-group> ```