# WebComponent

**Repository Path**: mirrors_zhiqiang21/WebComponent

## Basic Information

- **Project Name**: WebComponent
- **Description**: 前端常用组件
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2022-01-11
- **Last Updated**: 2025-09-28

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# **WebComponents**[![Build Status](https://travis-ci.org/zhiqiang21/WebComponent.svg?branch=master)](https://travis-ci.org/zhiqiang21/WebComponent)

## **欢迎Star 欢迎ISSUE，您的鼓励会是我写作的动力！**
在使用的过程中，如果对插件有新的功能需求，欢迎 fork 发起 pull request 。如果您没有时间更新，请建立 ISSUE 我会考虑后加入该功能！





# **插件列表：**

1. html5-qrcode
2. myslider
3. lazy-load-img
4. dragselect ----_[todo]_
5. light-rotate
6. JavaScript 命名空间管理插件
7. NetOrListShow(仿app store 商品网状列表动态切换插件)

# **插件简介：**

--------------------------------------------------------------------------------

## **1.html5-qrcode**

**功能：**

**1.1** h5页面在微博客户端中呼起摄像头扫描二维码并且解析。

**1.2** h5页面在非微博客户端中（原生浏览器或者微信客户端）呼起系统拍照或者上传图片按钮，拍照二维码或者上传二维码并且解析

具体使用方法，参看**[说明文档](https://github.com/zhiqiang21/WebComponent/tree/master/html5-Qrcode/README.md)**

--------------------------------------------------------------------------------

## **2.myslider**

**特点：**

- 自定义配置（动画切换时间，sweep 时间，自动播放等）
- 一个页面中多个 slider 可以共存
- 自动切换轮播图片
- 支持按钮点按切换图片
- 支持移动端触摸切换
- 支持移动端的 sweep

具体使用方法，参看**[说明文档](https://github.com/zhiqiang21/WebComponent/blob/master/MySlider/README.md)**

**预览：**

**gif 生成问题，按钮和图片的切换不同步**

![预览效果](http://ww1.sinaimg.cn/large/698e22a9jw1f2cdnw4jgyg20pl0es7wh.gif)

--------------------------------------------------------------------------------

## **3.lazy-load-img**

**功能：**

能够实现手机端图片的按需加载，减少图片一次性加载的网络带宽开销。增加页面的加载速度和用户体验。 具体使用方法和参看**[说明文档](https://github.com/zhiqiang21/WebComponent/tree/master/lazy-load-img)**

--------------------------------------------------------------------------------

## **4.dragselect**

_TODO_

--------------------------------------------------------------------------------

## **5.light-rotate**

**预览：**

![插件预览效果](light-rotate/img/2016-02-02 15_18_46.gif)

**功能：**

"跑马灯"的抽奖效果。轮盘旋转完成抽奖效果。可以自定义参数：自动播放跑马灯，跑马灯旋转时间，奖品旋转时间，跑马灯旋转方向 具体使用方法和参看**[说明文档](https://github.com/zhiqiang21/WebComponent/tree/master/light-rotate/README.md)**

--------------------------------------------------------------------------------

## **6.JavaScript 命名空间管理插件**

**[点击查看说明文档](https://github.com/zhiqiang21/WebComponent/tree/master/JsNameSpaceManage/README.md)**

## **7.NetOrListShow(仿app store 商品网状列表动态切换插件)**

**App Store 动画示例**

**Demo 动画示例（Gif 截图导致动画有些丢帧，请下载源码运行查看）**

![](http://ww1.sinaimg.cn/large/698e22a9jw1f4ei3lryb0g20bp0gz4qp.gif)![](http://ww2.sinaimg.cn/large/698e22a9gw1f3zgw584l9g20df0joq4p.gif)