因为组件和模块一篇讲不完，接着上一篇，继续讲组件和模块
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.
附上本系列以往链接：
