因为组件和模块一篇讲不完，接着上一篇，继续讲组件和模块

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自带加载功能@loadmore属性，所refresh下拉刷新组件会用的比较少。
个人建议，如果只要下拉刷新直接用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]) //时间

* pickDate(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组件的一个应用，
一系列的组件操作接口。比如 goBack、goForward、和 reload。webview module 与组件共用。
做出来以下效果，例如，模仿一个浏览器的功能，有输入地址，刷新，前进的功能。挺好用的

globalEvent:

这个要有安卓的基础，我真的hold不住，有兴趣的同学可以去看看官网，因为这是监听陀螺仪，定位信息之类的事件。

webscoket

之前是.we文件才支持webscoket,现在貌似支持.vue文件了，但是我测试了一下，好像还是不行，

总结

到这里，所有组件和模块都已经说完了，我把很多内建组件和模块，都对应着html来讲，虽然讲的不太好，但还是把官网生涩难懂的名词，浅析了一下，个人觉得对前端工程师还是很友好的，从环境搭建到api的踩坑（真的挺多坑），过程真的比较辛苦，不过，学了weex才有一种掌握vue全家桶的感觉啊，还是那句话，如果你会vue.js，都是so easy.
附上本系列以往链接：