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

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

Android小彩虹2021-08-26 9:10:30250A+A-

随着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>

点击这里复制本文地址 以上内容由权冠洲的博客整理呈现,请务必在转载分享时注明本文地址!如对内容有疑问,请联系我们,谢谢!

支持Ctrl+Enter提交

联系我们| 本站介绍| 留言建议 | 交换友链 | 域名展示
本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除

权冠洲的博客 © All Rights Reserved.  Copyright quanguanzhou.top All Rights Reserved
苏公网安备 32030302000848号   苏ICP备20033101号-1
本网站由 提供CDN/云存储服务

联系我们