阅读 660

LitElement ——快速、轻量级的Web Components——H5组件下拉刷新,上拉加载更多

LitElement简介

轻松创建快速轻量级的web组件

LitElement可以轻松定义Web组件——非常适合在整个组织中共享元素或构建UI设计系统。在使用html的任何地方使用您的组件:在document、CMS、Markdown或react或vue等框架中都可以使用它。以下为示例:

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>`;
  }
}复制代码

<simple-greeting name="Everyone"></simple-greeting>复制代码


为什么使用LitElement

  • 令人愉快的声明
    Lit-element简单,熟悉的开发模型使构建web组件变得前所未有的简单。
    以声明的方式表达UI,作为状态的函数。不用学习web-components语言,可以在模版中使用javascript的全部功能。element元素更改时会自动更新
  • 快而轻
    无论是在哪里工作的人,都会欣赏Lit-element的速度非常快。
    它使用lit-html定义和呈现html只会重新刷新组件样式动态变更部分
  • 无缝互操作
    Lit-element遵循web组件标准。因此组件将适用于任何框架。Lit-element使用自定义元素轻松包含在网页中。使用shadow DOM进行封装。

LitElement浏览器兼容性

它适用于所有主流浏览器(Chrome,Firefox,IE,Edge,Safari和Opera)

LitElement与polymer异同

相同点

可自定义元素,组件语法基本都是偏向原生javascript可以很方便大操作dom及bom不同点

  • LitElements更轻量级,使用它无需安装任何内容,polymer相对而已重一点,但最新polymer3有一定优化
  • polymer支持双向数据绑定,是典型但MVVM框架,而LitElement并不是MVVM框架,它只能算是MVC框架

LitElement使用

  • 引入

    npm install lit-element复制代码
  • 定义自定义组件(元素)
// 引入lit-element
import { LitElement, html } from 'lit-element';

// 定义MyElement元素类
class MyElement extends LitElement {
  render() {
      return html`<p>your template here</p>`;
  }
}

// 注册MyElement元素
customElements.define('my-element', MyElement);复制代码
  • 自定义组件元素的使用

import { MyElement } from 'my-element.js';复制代码

然后就可以在html部分像用div、span等这些标签一样任意使用MyElement标签

文章暂时写到这里,以上为本人使用lit-element一点个人见解及总结。原文链接lit-element.polymer-project.org。该地址为官方文档地址,需翻墙才可查看具体内容。下篇文章为会写到本人用lit-element开发H5页面,利用web-view让其完美运行与小程序但心得体会,以及自己造轮子(自定义组件元素)写项目的体验。


H5下拉刷新及上拉加载更多组件封装

以下为下拉刷新及上拉加载更多组件css及html

<style>
// 页面视窗大小
#page-content {
  height: 100%;
  position: relative;
  padding: 0.2rem;
  box-sizing: border-box;
}
// 滚动视窗大小
#page-scroll {
  overflow-x: hidden;
  overflow-y: auto;
  height: 100%;
  -webkit-overflow-scrolling: touch;
}
// 去掉默认滚动条样式
#page-scroll::-webkit-scrollbar {
   width: 0 !important 
}
// 放置滚动时的loading,默认隐藏
#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-content">
  // 下拉刷新的盒子及元素  
  <div id="pullDown" class="${this.type === 'pullDown' || this.type === 'pull' ? '': 'hidden'}">
    <img src="src/images/loading.svg" alt=""/>
  </div> 
  // 滚动盒子及预留插槽
  <div id="page-scroll">
    <div id="pagePool"> 
      <slot></slot> 
    </div>
  </div>
  // 上拉加载更多的盒子及元素
  <div id="pullUp" class="${this.type === 'pullUp' || this.type === 'pull' ? '': 'hidden'}">
   <img src="src/images/loading.svg" alt=""/>
  </div>
</div>复制代码
  • 下拉刷新实现及逻辑
// 获取可以滚动盒子dom
this.pageScroll = this.shadowRoot.getElementById('page-scroll'); // H5事件,当手指触摸屏幕时触发,触发后拿到当前Y坐标
 this.pageScroll.addEventListener('touchstart', e => {  
    startY = e.touches[0].pageY;
 }, false);

// H5事件,当手指触摸屏幕滑动时触发,触发后拿到当前Y坐标与开始触摸坐标差值differ 
// 若差值大于30则显示loading,touchAction设置为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);
 // 滑动结束触发事件,抛出刷新事件,供于父组件使用
 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);


 // 父组件刷新数据成功后调用还原下拉刷新样式
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)
};
复制代码
  • 上拉加载更多实现及逻辑

// 滚动组件滚动时,判断滚动距离和内容的值,滚动到离底部5px时,显示loading样式等,同时抛出事件给父组件
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'  }
});

// 父组件数据加载完后,调用该方法还原loading样式
private pullUpHidden() {  
    setTimeout(_ => {
        this.isRequest = false;
        this.touchAction = 'scroll';
        this.pagePool.style['margin-bottom'] = '0'; 
        this.pullUp.style['display'] = 'none';
  }, 500)
}
复制代码


以上为个人H5组件封装逻辑。后续会整理到github。后续会持续更新。


关注下面的标签,发现更多相似文章
评论