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

list和scoller组件 实现上拉刷新和懒加载

• list组件就像是ul标签，官方给出的demo是上拉加载的一个滚动效果(网页显示不了，要在手机上跑)
• list组件可以绑定一个事件loadmore：就是下拉到最底部的时候就会出发的事件（很好用）
  在html里面有ul和li是吧，在weex 里面，就是list 和cell，他们都是好基友
  但是:list是没有高度的，并且不能设置高度，可以设置宽度

          
             
          
        
           
            {
        {num}}
               
          
    
         
        复制代码

scoller和list的区别

scoller用法跟list很像，我说说区别就好

• list下面是cell，scoller下面是div
• scoller可以横向滚动，list不可以
  scoller可以控制是否显示滚动条，没有滚动条的可以不设置高，有滚动条的一定要设置高
  建议这五个组件一起学(list=>cell=>refresh=>scoller=>loading)

refresh组件

        
           
      
       Refreshing ...
          
         
     
      
      
        
       
        {
   {num}}
             
      
    
     
  
    复制代码

在官方demo里面，refresh是有两个事件.

• refresh： 下拉加载开始触发
• pullingdown:下拉加载完成触发
• display是一个属性(在安卓端测试才能成功)在weex里面，隐藏显示全靠这个属性 ，写在css样式内无效，

        
         复制代码
        

  不过list自带加载功能@loadmore属性，所refresh下拉刷新组件会用的比较少。
  个人建议，如果只要下拉刷新直接用list组件，如果想下拉之后发生一些事情，可以加一个refresh组件，只是功能强大一丢丢。

loading组件

loading组件和refresh是相反的，一个是下拉刷新，一个是下拉刷新

switch组件

switch只有ios系统下才可以vue数据驱动试图。只有ios系统下才能很好的使用switch，其他系统还是不要使用switch，其他系统想用，解决办法就是自定义一个组件吧。

textarea组件

就说一点，文本域组件只有在app才能输入。

slider和indicator组件

也是三端不同一。

网页不会自动轮播，auto-play为true也没用

          
     
        
            
     
    
    复制代码

indicator组件

indicator 组件用于显示轮播图指示器效果，必须充当 slider 组件的子组件使用，就是轮播图的中的快速移动的点，但是点的颜色和大小在网页端和移动端显示效果不同

要注意的一点是，在indicator组件的css样式表多了三个属性

通用事件

在weex中，几乎所有的组件几乎都支持通用事件，所以，最好记住所有的通用事件，特殊事件你可以再查api

click事件

 和 
    
      组件目前不支持 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    
    
     {
   {name}}
    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.

附上本系列以往链接：