H5 Pages

• H5 pages based on swiper5+. (Demo)

Language: En | 中文

Install

# via npm
$ npm install @cycjimmy/h5-pages --save

# or via yarn
$ yarn add @cycjimmy/h5-pages

Usage

h5-pages based on Swiper5+. Add script of swiper in your project first.

Methods

init(): Initialization function

import Swiper from 'swiper';
import {init} from '@cycjimmy/h5-pages';

init({
  Swiper,                                                       // constructor of Swiper
  pages: [page1, page2],                                        // An array of Page instances
  containerExtraHtml: `<div class="swiper-pagination"></div>`,  // Extra Html under swiper-container, such as navigator, etc.
  swiperOptions: {                                              // swiper configuration(loop is not supported)
    direction: 'vertical',
    pagination: {
      el: '.swiper-pagination',
    },
  },
  compatibleWithSafeArea: true,                                 // Whether it is compatible with the safe area of screen. The default is true.
})

getPageByName(name): Get a single page by name

changePageTo(name, speed): Jump to the page with the specified name

• name: Page name.
• speed: Transition duration (in ms).

Use h5Pages to Get the Core Properties

• h5Pages.root: H5 root element. Don't put pages like popups directly in body, it is recommended to use root as parent.
• h5Pages.swiper: Main swiper instance for H5.

import {h5pages} from '@cycjimmy/h5-pages';

console.log(h5Pages.root);    // H5 root element
console.log(h5Pages.swiper);  // swiper instance

Single Page

Build Single Page

Build directly with the default Page

import {Page} from '@cycjimmy/h5-pages';

const page = new Page({
  name: 'pageName',                                     // name for page. Default is "page" with index, such as "page0". 
  renderHtml: `<div class="page-wrapper">page</div>`,   // Html structure under swiper-slide
  pageEnter: () => console.log('enter page'),           // Hook function for enter the page
  pageLeave: () => console.log('leave page'),           // Hook function for leave the page
});

Use Page extends (recommended)

import {Page} from '@cycjimmy/h5-pages';

const page = new class extends Page {
  constructor() {
    super({
     name: 'page',
     renderHtml: `<div class="page-wrapper">page</div>`,
     pageEnter: () => console.log('enter page'),
     pageLeave: () => console.log('leave page'),
    });
  }
  
  // paramInit(): [Option] Add your custom parameters.
  paramInit() {
    // In this function super.paramInit() must be called first.
    super.paramInit();  

    // It is recommended to place your custom parameters here.
    this.oneCustomElement = this.page.querySelector(`.${_style.oneCustomElement}`);
  }

  // eventBind(): [Option] Add your custom event bindings.
  eventBind() {
    // In this function super.eventBind() must be called first.
    super.eventBind();

    // It is recommended to place custom event bindings here.
    this.oneCustomElement.addEventListener('click', () => {
      console.log('oneCustomElement clicked');
    });
  }

  // extraRender(): [Option] Add your custom action When the page loaded.
  extraRender() {
    console.log('pageLoaded');
  }

  // Other custom extensions
  // ... 
};

Page instance Properties

• name: The name of the Page instance.
• root: H5 root element. Same as h5Pages.root.
• swiper: Main swiper instance for H5. Same as h5Pages.swiper.
• page: The root element of the page instance, which is the swiper-slide element.
• pageIndex: The index of the page instance, the same as realIndex for swiper.

Popup

Use Popup extends to Build a Popup

import {Popup} from '@cycjimmy/h5-pages';

const Popup = new class extends Popup {
  constructor() {
    super();
  }

  load() {
    // You must Overwrite this function with your own function
  }

  // Other custom extensions
  // ... 
};

Popup Instance Methods

• load(): Load(Show off) the popup. You must Overwrite this function with your own function.
• render(htmlText): Render custom html texts and add the popup to the root element of h5 page.
• remove(): Remove the popup from the root element of h5 page.

Popup instance Properties

• root: H5 root element. Same as h5Pages.root.
• popup: The root element of the popup instance.

CDN

To use via a CDN include this in your HTML:

<script src="https://cdn.jsdelivr.net/npm/@cycjimmy/h5-pages@4/dist/h5-pages.umd.min.js"></script>