因為元件和模組一篇講不完，接著上一篇，繼續講元件和模組
list和scoller元件 實現上拉重新整理和懶載入
- list元件就像是ul標籤，官方給出的demo是上拉載入的一個滾動效果(網頁顯示不了，要在手機上跑)
- list元件可以繫結一個事件loadmore：就是下拉到最底部的時候就會出發的事件（很好用）
在html裡面有ul和li是吧，在weex 裡面，就是list 和cell，他們都是好基友
但是:list是沒有高度的，並且不能設定高度，可以設定寬度<list class="list" @loadmore="fetch" loadmoreoffset="10"> <cell class="cell" v-for="num in lists"> <div class="panel"> <text class="text">{{num}}</text> </div> </cell> </list>複製程式碼
scoller和list的區別
scoller用法跟list很像，我說說區別就好
- list下面是cell，scoller下面是div
- scoller可以橫向滾動，list不可以
scoller可以控制是否顯示滾動條，沒有滾動條的可以不設定高，有滾動條的一定要設定高
建議這五個元件一起學(list=>cell=>refresh=>scoller=>loading)
refresh元件
<scroller class="scroller">
<refresh class="refresh" @refresh="onrefresh" @pullingdown="onpullingdown" :display="refreshing ? 'show' : 'hide'">
<text class="indicator">Refreshing ...</text>
</refresh>
<div class="cell" v-for="num in lists">
<div class="panel">
<text class="text">{{num}}</text>
</div>
</div>
</scroller>複製程式碼在官方demo裡面，refresh是有兩個事件.
- refresh： 下拉載入開始觸發
- pullingdown:下拉載入完成觸發
- display是一個屬性(在安卓端測試才能成功)在weex裡面，隱藏顯示全靠這個屬性 ，寫在css樣式內無效，
<refresh class="refresh" @refresh="onrefresh" @pullingdown="onpullingdown" :display="refreshing ? 'show' : 'hide'">複製程式碼
個人建議，如果只要下拉重新整理直接用list元件，如果想下拉之後發生一些事情，可以加一個refresh元件，只是功能強大一丟丟。
loading元件
loading元件和refresh是相反的，一個是下拉重新整理，一個是下拉重新整理
switch元件
switch只有ios系統下才可以vue資料驅動試圖。只有ios系統下才能很好的使用switch，其他系統還是不要使用switch，其他系統想用，解決辦法就是自定義一個元件吧。
textarea元件
就說一點，文字域元件只有在app才能輸入。
slider和indicator元件
也是三端不同一。
網頁不會自動輪播，auto-play為true也沒用
<slider class="slider" interval="3000" auto-play="true">
<div class="frame" v-for="img in imageList">
<image class="image" resize="cover" :src="img.src"></image>
</div>
</slider>複製程式碼indicator元件
indicator 元件用於顯示輪播圖指示器效果，必須充當 slider 元件的子元件使用，就是輪播圖的中的快速移動的點，但是點的顏色和大小在網頁端和移動端顯示效果不同
要注意的一點是，在indicator元件的css樣式表多了三個屬性
通用事件
在weex中，幾乎所有的元件幾乎都支援通用事件，所以，最好記住所有的通用事件，特殊事件你可以再查api
click事件
<input> 和 <switch> 元件目前不支援 click 事件，請使用 change 或 input 事件來代替。複製程式碼weex 的事件跟網頁中的事件是不一樣的，完全屬於原生的事件
longpress事件：長按，例如長按彈出複製貼上
Appear事件 ：使用場景一般是開啟顯示的時候會觸發一些功能，例如當我們進入到一些頁面，部分頁面元素就會移動，漂浮的狀態去吸引你，甚至是廣告。
如果一個位於某個可滾動區域內的元件被繫結了 appear 事件，那麼當這個元件的狀態變為在螢幕上可見時，該事件將被觸發。複製程式碼Disappear 事件：使用場景一般是隱藏的時候，禁止一些功能，比如說地理位置啊，訊息推送，等等
如果一個位於某個可滾動區域內的元件被繫結了 disappear 事件，那麼當這個元件被滑出螢幕變為不可見狀態時，該事件將被觸發。複製程式碼Page 事件
viewappear 事件會在頁面就要顯示或配置的任何頁面動畫被執行前觸發，例如，當呼叫 navigator 模組的 push 方法時，該事件將會在開啟新頁面時被觸發。viewdisappear 事件會在頁面就要關閉時被觸發。
animation模組
動畫模組，類似我們前端的transition屬性，但是他的動畫效果很弱，比前端的弱多了，可以看看官網的demo，這裡沒有坑，放心使用
picker模組
picker模組用於資料選擇，日期選擇，時間選擇。（目前 H5 暫不支援該模組)
要注意的是，picker模組有兩種模式
- pickTime(options, callback[options]) //時間
clipboard模組
我們可以通過 clipboard 模組的 getString()、setString() 介面從系統的貼上板獲取內容或者設定內容。複製程式碼setString(text):複製 //ctrl+c
getString:貼上 //ctrl+v
dom模組
因為app沒有dom節點的概念，就有了dom模組，我們可以簡單操作一些dom,比如滾動到某個節點上,擷取官網demo
css
<text class="text" :ref="'text'+index">{{name}}</text>
js
goto20 (count) {
const el = this.$refs.item20[0]
dom.scrollToElement(el, { offset: 0 })
}複製程式碼getComponentRect(ref, callback) :獲取容器的 style
addRule
addRule是可以為dom 新增一條規則，目前支援自定義字型fontFace規則，構建自定義的font-family，可以在text使用複製程式碼var domModule = weex.requireModule('dom');
domModule.addRule('fontFace', {
'fontFamily': "iconfont2",
'src': "url('http://at.alicdn.com/t/font_1469606063_76593.ttf')"
});複製程式碼tips： 其實按照vue資料驅動的思想，我們是不推薦操作dom的，而且原聲app也沒有dom的概念，不到萬不得已，還是少操作dom
navigator模組
還記得我們前面用過的 a元件嗎，假如我點選a標籤跳轉到了一個新的頁面，我們怎麼回退到原來的頁面呢?就可以用navigator模組的功能，這個模組的功能有點像html5裡面的 history API
push對應瀏覽器的前進， pop對應瀏覽器的後退。
pop還有一個用途：當我們在第一頁，pop還有關掉app的作用。
storage模組
storage 是一個在前端比較常用的模組，可以對本地資料進行儲存、修改、刪除，並且該資料是永久儲存的
等於前端的cookie，理論上它是無限制大小的，
storage 常用在一些被使用者經常查詢，但是又不頻繁更新的資料，比如搜尋歷史、使用者的訂單列表等。搜尋歷史一般情況都是作為本地資料儲存的，因此使用 storage 比較合適。而使用者訂單列表是需要本地儲存和服務端器檢索配合的場景。當一個使用者下單後，會經常查閱個人的訂單列表。但是，訂單的列表資料不是頻繁更新的，往往只有在收到貨品時，才更新“已簽收”，其餘平時的狀態是“已發貨”。因此，可以使用 storage 儲存訂單列表，可以減少伺服器的壓力，例如減少 SQL 查詢或者快取的壓力。當使用者檢視訂單詳情的時候，再更新資料狀態。
const storage = weex.requireModule('storage')
const modal = weex.requireModule('modal')
setItem () {
storage.setItem('name', 'Hanks', event => {
this.state = 'set success'
console.log('set success')
})
},
getItem () {
storage.getItem('name', event => {
console.log('get value:', event.data)
this.state = 'value: ' + event.data
})
},
removeItem () {
storage.removeItem('name', event => {
console.log('delete value:', event.data)
this.state = 'deleted'
})
},
getAll () {
storage.getAllKeys(event => {
// modal.toast({ message: event.result })
if (event.result === 'success') {
modal.toast({
message: 'props: ' + event.data.join(', ')
})
}
})
}複製程式碼
webview
是對前面web元件的一個應用，
一系列的
做出來以下效果，例如，模仿一個瀏覽器的功能，有輸入地址，重新整理，前進的功能。挺好用的
globalEvent:
這個要有安卓的基礎，我真的hold不住，有興趣的同學可以去看看官網，因為這是監聽陀螺儀，定位資訊之類的事件。
webscoket
之前是.we檔案才支援webscoket,現在貌似支援.vue檔案了，但是我測試了一下，好像還是不行，
總結
到這裡，所有元件和模組都已經說完了，我把很多內建元件和模組，都對應著html來講，雖然講的不太好，但還是把官網生澀難懂的名詞，淺析了一下，個人覺得對前端工程師還是很友好的 ，從環境搭建到api的踩坑（真的挺多坑），過程真的比較辛苦，不過，學了weex才有一種掌握vue全家桶的感覺啊，還是那句話，如果你會vue.js，都是so easy.
附上本系列以往連結：