随着weex在业务的一步步深入,在这次改版中,我们三端了实现pager组件。pager组件,就是常见的tab形式的界面:

Alt text

1、底部的导航栏,采用原生的组件实现,方便通过在线配置变更。
2、其中首页里的tab是通过pager来实现。
3、pager组件不包括顶部的header,只包括内容,其实就是Android的viewpager.

pager组件定义

sample:

<pager
@scroll="scroll"
@currentChange="currentChange"
:src="src"
:current="current"
:style="{
height: pagerHeight + 'px',
}"
class="pager-wrap"
ref="pager"
>
</pager>

事件列表

  • scroll:用于监听内容滑动距离,方便外层根据滑动距离做需要的变化。比如上面的界面,当检测到界面向下滑动时,会隐藏header.
    data里含有position、positionOffset
scroll(data) {
const self = this;
if (+data.position === 0) {
if (data.positionOffset > 0) {
self.showTabTitle = false;
self.hotpageScroll = true;
} else {
self.showTabTitle = true;
self.hotpageScroll = false;
}
}
},
  • currentChange:tab变化时,会把position传过来
    data里含有position
currentChange(data) {
const self= this;
self.current= data.position;
}

属性列表

  • src: 页面列表,Sample如下:
  • current:当前选择tab index
data() {
return {
src: [
{
h5: 'http://shop.m.showjoy.net/shop/activityExposure/hotHomeWeex.html'
},
{
h5: 'http://shop.m.showjoy.net/chooseAddress.html'
},
{
h5: 'http://shop.m.showjoy.net/u/mycards.html'
},
{
h5: 'http://shop.m.showjoy.net/shop/activityExposure/hotHomeWeex.html'
},
],
current: 0,
};
},

说明

  • 1、native端拿到src后,会将h5的url 转成对应的weex js,然后渲染。
    • native端会有一份h5 - weex js的映射表,可动态下发;
    • Android把weex的渲染集成到fragment里,不管是单独activity还是多个fragment的情况,都可以统一使用;
    • iOS就是把weex的渲染集成到viewController, 拿到view就好了。
  • 2、web端拿到src后,直接访问即可。

pager组件实现

1、Android

按照以上组件定义,基于ViewPager实现即可。 其中获取页面滚动的距离,没有现成的API可以获取。这里的实现方式如下:

在子fragment的onresume里监听滚动,发送事件WXScrollEvent。前提是parentInstanceId不为空,parentInstanceId是通过ViewPager传过来的weex instanceId,唯一的。
然后在pager组件实现的地方接收事件WXScrollEvent即可。

@Override
public void onResume(){
super.onResume();
……
if (!resumed && !TextUtils.isEmpty(parentInstanceId)) {
weexRender.getWxInstance().registerOnWXScrollListener(new OnWXScrollListener() {
@Override
public void onScrolled(View view, int x, int y){
scrollY += y;
scrollX += x;
RxBus.getDefault().post(new WXScrollEvent(scrollX, scrollY, parentInstanceId));
}
@Override
public void onScrollStateChanged(View view, int x, int y, int newState){
}
});
}
resumed = true;
}

2、iOS

iOS 没有现成的viewPager 可以使用,只能自己定义。这里需要注意两点:

  • 1、viewController的销毁和创建。 模仿Android viewPager的实现,可以设置保留几个viewcontroller。 否则有可能同时存在即是个viewController。
  • 2、滚动的监听,同样也是调用weex提供的接口_instance.onScroll,不过要注意传递instanceId识别,避免有多个使用pager组件的页面同时接受单个页面传递的滚动事件。

3、Web

通过iframe实现:

<template>
<iframe
:src="src[current] ? src[current].h5 : ''"
ref="iframe"
@load="loadIframe"
></iframe>
</template>

标签: none

评论已关闭