因为组件和模块一篇讲不完,接着上一篇,继续讲组件和模块
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样式内无效,
不过list自带加载功能@loadmore属性,所refresh下拉刷新组件会用的比较少。<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组件的一个应用,
一系列的 组件操作接口。 比如 goBack、goForward、和 reload。webview module 与 组件共用。
做出来以下效果,例如,模仿一个浏览器的功能,有输入地址,刷新,前进的功能。挺好用的
globalEvent:
这个要有安卓的基础,我真的hold不住,有兴趣的同学可以去看看官网,因为这是监听陀螺仪,定位信息之类的事件。
webscoket
之前是.we文件才支持webscoket,现在貌似支持.vue文件了,但是我测试了一下,好像还是不行,
总结
到这里,所有组件和模块都已经说完了,我把很多内建组件和模块,都对应着html来讲,虽然讲的不太好,但还是把官网生涩难懂的名词,浅析了一下,个人觉得对前端工程师还是很友好的 ,从环境搭建到api的踩坑(真的挺多坑),过程真的比较辛苦,不过,学了weex才有一种掌握vue全家桶的感觉啊,还是那句话,如果你会vue.js,都是so easy.
附上本系列以往链接: