LitElement — Fast, lightweight Web Components — H5 Components pull down to refresh and pull up to load more

LitElement profile

Easily create fast, lightweight Web components

LitElement makes it easy to define Web components — perfect for sharing elements across an organization or building UI design systems. Use your component anywhere you use HTML: It can be used in frameworks like Document, CMS, Markdown, or React or Vue. The following is an example:

import { LitElement, html, property, customElement } from 'lit-element';

@customElement('simple-greeting')
export class SimpleGreeting extends LitElement {
  @property() name = 'World';

  render() {
    return html`<p>Hello, ${this.name}!</p>`;
  }
}Copy the code

<simple-greeting name="Everyone"></simple-greeting>Copy the code

Why LitElement

• Delightfully lit-Element simple, familiar development model makes building Web components easier than ever. Express the UI declaratively as a function of state. You can use the full functionality of javascript in templates without learning the Web-Components language. Element updates automatically when the element changes
• Fast and Light Anyone who works anywhere will appreciate lit-Element’s speed. It uses lit-HTML to define and render HTML only to refresh parts of the component styles dynamically
• Seamlessly interoperable Lit-Element follows the Web Component standard. Components will therefore apply to any framework. Lit-element uses custom elements for easy inclusion in web pages. Use shadow DOM for encapsulation.

LitElement browser compatibility

It works with all major browsers (Chrome, Firefox, IE, Edge, Safari and Opera)

Similarities and differences between LitElement and polymer

The same

Customizable elements, component syntax is basically biased toward native javascript which makes it easy to manipulate dom and BOM differences

• LitElements are lighter, you don’t need to install anything, polymer is a bit heavier, but the new polymer3 is a bit better
• Polymer supports bidirectional data binding and is a typical MVVM framework, while LitElement is not an MVVM framework, it can only be considered an MVC framework

LitElement use

• The introduction of
  
  

  npm install lit-elementCopy the code

• Defining custom components (elements)

Lit-element import {LitElement, HTML} from'lit-element'; Class MyElement extends LitElement {render() {
      returnhtml`<p>your template here</p>`; }} // Register MyElement customElements. Define ('my-element', MyElement);Copy the code

• Custom use of component elements

import { MyElement } from 'my-element.js';Copy the code

You can then use the MyElement tag in the HTML section just as you would with div, SPAN, etc

The article is written here for the time being. The above is my personal opinion and summary of using lit-Element. The original link is lit-element.polymer-project.org. This address is the address of the official document. You need to climb the wall to view the specific content. In the next article, I will write about my experience developing H5 pages with lit-Element, using Web-view to make them run perfectly with small programs, and writing my own wheels (custom component elements).

H5 pull-down refresh and pull-up load more component packages

Below is a drop-down refresh and a drop-down load of more components CSS and HTML

< span style> // page size #page-content {height: 100%; position: relative; Padding: 0.2 rem; box-sizing: border-box; } #page-scroll {overflow-x: hidden; overflow-y: auto; height: 100%; -webkit-overflow-scrolling: touch; } #page-scroll::-webkit-scrollbar {width: 0! #pullDown, #pullUp {position: absolute; left: 0; text-align: center; width: 100%; background-color: var(--color-second); display: none; height: 5vh; line-height: 5vh; z-index: 2; } #pullDown {top: 0.05rem; } #pullUp {bottom: 0.1rem; } .hidden { display: none! important; } #pagePool {transition: all 0.2s ease-in-out; } < / style > < div id = "page - the content" > / / set the drop-down box and element < div id = "pullDown" class = "${enclosing type = = = 'pullDown' | | enclosing type = = = 'pull' ? "' : 'hidden'}"> <img SRC =" SRC /images/ load.svg "Alt =""/> </div> // Scroll box and reserved slot <div id=" page-Scroll "> <div ID ="pagePool"> < slot > < / slot > < / div > < / div > / / loaded more box and element < div id = "pullUp" class = "${enclosing type = = = 'pullUp' | | enclosing type = = = 'pull'? '': 'hidden'}"> <img src="src/images/loading.svg" alt=""/> </div> </div>Copy the code

• Drop down refresh implementation and logic

// Get the dom of the scrollable box
this.pageScroll = this.shadowRoot.getElementById('page-scroll'); // The H5 event is triggered when a finger touches the screen and gets the current Y coordinate
 this.pageScroll.addEventListener('touchstart', e => {  
    startY = e.touches[0].pageY;
 }, false);

// H5 event, triggered when the finger touches the screen and slides, and then gets the difference between the current Y coordinate and the start touch coordinate
// If the difference is greater than 30, loading will be displayed, and touchAction will pullDown.
this.pageScroll.addEventListener('touchmove', e => {
  let differY:number = e.touches[0].pageY - startY;
  if (this.touchAction === 'pullDown' || !this.type) return;
  if (this.pageScroll.scrollTop <= 0 && differY >= 0) this.pagePool.style['margin-top'] = differY + 'px';
  if (this.pageScroll.scrollTop === 0 && differY >= 0 && this.type ! = ='pullUp') {    
      if (differY > 30) {      
        this.pullDown.style['display'] = 'block';
        this.touchAction = 'pullDown'; }}else {  
      this.touchAction = 'scroll'}},false);
 // Slide to end the trigger event and throw a refresh event for use by the parent component
 this.pageScroll.addEventListener('touchend', e => { 
  if (this.touchAction === 'pullDown') { 
    this.pagePool.style['margin-top'] = '5vh';
    if (this.isRequest === true) return; 
    this.isRequest = true;
    this.dispatchEvent(new CustomEvent('refresh', {detail: {action: 'refresh'}}));  
  } else if (this.touchAction === 'scroll') { 
    this.pagePool.style['margin-top'] = 0; }},false);


 // The parent component invokes the restore drop-down refresh style after successfully refreshing data
private pullDownHidden() { 
 setTimeout(_= > { 
    this.isRequest = false;
    this.touchAction = 'scroll';
    this.pagePool.style['margin-top'] = 0;
    this.pageScroll.scrollTop = 0;
    this.pullDown.style['display'] = 'none';
  }, 500)};Copy the code

• Pull-up loads more implementation and logic

// When the rolling component is rolling, determine the rolling distance and content value, and when it is 5px away from the bottom, display the loading style, etc., and throw an event to the parent component
this.pageScroll.addEventListener('scroll', e => {
  if (this.pullUp.style['display'= = ='block' || this.type === 'pullDown' || !this.type || this.touchAction === 'pullUp') return;
  if (this.pagePool.offsetHeight - 5< =this.pageScroll.scrollTop + this.pageScroll.offsetHeight) {    
    if (this.isRequest === true) return;
    this.pullUp.style['display'] = 'block';
    this.pagePool.style['margin-bottom'] = '5vh';
    this.touchAction = 'pullUp';
    this.isRequest = true;
    this.dispatchEvent(new CustomEvent('refresh', {detail: {action: 'upload'}}));
  } else {    this.touchAction = 'scroll'}});// After the parent component finishes loading, call this method to restore the loading style
private pullUpHidden() {  
    setTimeout(_= > {
        this.isRequest = false;
        this.touchAction = 'scroll';
        this.pagePool.style['margin-bottom'] = '0'; 
        this.pullUp.style['display'] = 'none';
  }, 500)}Copy the code

The above is personal H5 component packaging logic. It will be sorted out on Github. Updates will continue.