weex 三端实现Pager 组件(ViewPager) - 本仁笔记

站长

2024年04月06日 10:47 · 阅读数 5

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

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>