Android
Android如何给Weex传递事件?
HashMap<String,Object> hashMap = new HashMap();
hashMap.put("seatNum",tableNo);
fireEvent("onSelectedSeat", hashMap);
Weex页面
上拉加载,下拉刷新
<template>
<list class="list"
offset-accuracy="100"
show-scrollbar="false"
loadmoreoffset="10"
@loadmore="loadmore">
<refresh
v-if="pageRefresh"
class="refresh">
<hdl-indicator
ref="hdlIndicator"
@onrefresh="onrefresh"
/>
</refresh>
<cell v-for="(num,index) in lists" :key="index" class="cell">
<div class="panel">
<text class="text">{{ num }}</text>
</div>
</cell>
</list>
</template>
<script>
const modal = weex.requireModule('modal')
export default {
data () {
return {
pageRefresh: true,
lists: ['A', 'B', 'C', 'D', 'E']
}
},
methods: {
loadmore () {
modal.toast({
message: '触发 loadmore 事件'
})
this.lists = this.lists.concat(this.lists)
},
onrefresh (event) {
modal.toast({ message: '下拉刷新' })
setTimeout(e => {
this.pageRefresh = false
}, 2000)
}
}
}
</script>
<style scoped>
.panel {
width: 600px;
height: 300px;
margin-left: 75px;
margin-top: 35px;
margin-bottom: 35px;
flex-direction: column;
justify-content: center;
border-width: 2px;
border-style: solid;
border-color: rgb(162, 217, 192);
background-color: rgba(162, 217, 192, 0.2);
}
.text {
font-size: 88px;
text-align: center;
color: #41B883;
}
</style>
注意:
在公众号页面,下拉刷新有点问题,将下拉刷新去掉就可以了。
weex页面如何向Android发送一个事件
weex端发送事件如下
this.$refs.map.setSelectedAnnotationWithStoreInfo({
latitude: res.hdlStoreLatitude, // 纬度
longitude: res.hdlStoreLongitude, // 经度
address: data.address,
name: data.storeName //店铺名称
})
Android端接收
@JSMethod
public void setSelectedAnnotationWithStoreInfo(JSONObject jsonObject) {
}
官网上的解释
https://weex.apache.org/zh/guide/extend/extend-android.html#component-%E6%89%A9%E5%B1%95
list的上拉加载效果
注意:要想实现上拉加载效果,需要配置2个地方
1、loadmore事件
2、loadmoreoffset:官网上说如果你的loadmore事件没有触发,很有可能loadmoreoffset这个值没有设置,设置为一个>0的值就好。
<template>
<list class="list"
offset-accuracy="100"
show-scrollbar="false"
loadmoreoffset="10"
@loadmore="loadmore">
<cell v-for="num in lists" class="cell">
<div class="panel">
<text class="text">{{ num }}</text>
</div>
</cell>
</list>
</template>
<script>
const modal = weex.requireModule('modal')
export default {
data () {
return {
lists: ['A', 'B', 'C', 'D', 'E']
}
},
methods: {
loadmore () {
modal.toast({
message: '触发 loadmore 事件'
})
this.lists = this.lists.concat(this.lists)
}
}
}
</script>
<style scoped>
.panel {
width: 600px;
height: 300px;
margin-left: 75px;
margin-top: 35px;
margin-bottom: 35px;
flex-direction: column;
justify-content: center;
border-width: 2px;
border-style: solid;
border-color: rgb(162, 217, 192);
background-color: rgba(162, 217, 192, 0.2);
}
.text {
font-size: 88px;
text-align: center;
color: #41B883;
}
</style>
WeexBug:list设置样式之后,在Android和IOS上的表现不同
现象
list的父容器是全屏的,然后list设置了如下的样式,理论上它会为沾满全屏,但是最后一条数据居然没有显示全。
图示
解决办法
1、在list的最后增加一个空cell,空cell的高度设置为100px,这样在Android和IOS上都可以显示完全了。
2、由于list的外层包了一个div,将div去掉,问题解决。
Weex页面中如何获得页面高度的问题
这个方法在我们的项目中有一些问题
IOS通过上面的方法,获得页面的高度是屏幕的高度 - 导航栏的高度 - 标题栏的高度
我们通过给页面上盖一个div,然后设置div的高度,这个高度就是获取IOS的高度,通过下面的实验可以得出:
<div class="test" />
.test {
position: fixed;
left: 0px;
top: 0px;
right:0px;
bottom: 0px;
height: 1202px;
background-color: sandybrown;
}
效果图
然后我们在Andoir手机上获得页面高度,然后设置给test,然后看看页面效果
为什么会出现这样的情况呢?
由于我们项目里面,没有使用系统标题栏,而是自定义的标题栏,所以在使用上面的方法计算的时候,计算页面高度的时候,回将标题栏的高度也加入。
解决办法:
在IOS手机上,使用上面的方法获取页面的高度。
但是在Android手机上,我们使用上面的方法获取到页面的高度,然后在减去标题栏的高度。
Weex中实现生成二维码
要想实现生成二维码,必须要借助原生去实现,Android端必须借助Zxing去实现,必须通过Module去实现。
indicator组件显示与隐藏
需求和现象:
页面上有Silder组件和indicator组件,当想做长截图功能的时候,需要隐藏indicator组件,我们使用的办法是通过v-if和v-show去控制indicator的显示或者隐藏,但是没有生效。
解决办法:
然后我们通过修改样式来控制indicator的显示或者隐藏,通过修改item-size的值为0或或者16px来显示indicator。
扩展想法:
可以通过设置indicator的 width 来设置indicator的显示或者隐藏。(这个方法没有试验)
组件
text
1、text如何进行换行?
给text设置宽度,就可以了。