With weeX in the business step by step, in this revision, we have implemented the pager component. The pager component, which is a common tab-like interface:

1, the bottom of the navigation bar, using native components to achieve, convenient through online configuration change.


2. The TAB in the home page is realized by pager.


3. The Pager component does not include the header at the top, but only the content, which is essentially the Android ViewPager.

Pager component definition

sample:

<pager

      @scroll="scroll"

      @currentChange="currentChange"

      :src="src"

      :current="current"

      :style="{

        height: pagerHeight + 'px',

      }"

      class="pager-wrap"

      ref="pager"

    >

</pager>
Copy the code

The event list

• Scroll: used to monitor the sliding distance of content to facilitate the change of the outer layer according to the sliding distance. The interface above, for example, hides the header when it detects that the interface is sliding down.
  
  Data contains position and 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; }}},Copy the code

• CurrentChange: Position is passed when TAB changes
  
  Data contains position

currentChange(data) {

     const self = this;

     self.current = data.position;

}
Copy the code

Property list

• SRC: page list, Sample as follows:
• Current: the current TAB index is selected

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,

      };

    },
Copy the code

instructions

• 1. After the Native end gets SRC, it will convert the URL of H5 into the corresponding WEEx JS, and then render.
  • Native terminal has an H5-WEEx JS mapping table, which can be dynamically delivered.
  • Android integrates weex rendering into fragments, which can be used in a single activity or multiple fragments.
  • IOS is the integration of weex rendering into the viewController, just take the view.
• 2. Access SRC directly on the Web.

Pager component implementation

1, the Android

Following the component definition above, implement it based on ViewPager. To get the scrolling distance of the page, there is no readily available API. The implementation is as follows:

Listen for the scroll in the child fragment's onResume and send the event WXScrollEvent. The premise is that parentInstanceId is not empty. ParentInstanceId is the unique WEEx instanceId that is passed from the ViewPager.

You can then receive the event WXScrollEvent where the Pager component is implemented.

@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; }Copy the code

2, the iOS

There is no existing viewPager available on iOS, so you have to define your own. Two points to note here:

• 1. ViewController destruction and creation. Mimicking the Android viewPager implementation, you can set several ViewControllers to remain. Otherwise it could be a viewController at the same time.
• 2. Scroll monitoring also calls the interface provided by WEEx _instance.onScroll, but pay attention to the instanceId identification, to avoid multiple pages using pager components at the same time receive scroll events from a single page.

3, Web

Through iframe:

<template>

  <iframe

    :src="src[current] ? src[current].h5 : ''"

    ref="iframe"

    @load="loadIframe"

  ></iframe>

</template>
Copy the code