# mini-components

**Repository Path**: lmh106/components

## Basic Information

- **Project Name**: mini-components
- **Description**: 一些封装的好用且不坑的小程序组件；包括日历组件、弹框组件、actionSheet面板、loading加载动画、星星评分、canvas-2d圆环、swiper组件等等，后续会不断的完善~
- **Primary Language**: JavaScript
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 31
- **Created**: 2024-05-30
- **Last Updated**: 2024-05-30

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 一些封装的好用且不坑的小程序组件
![输入图片说明](https://img.shields.io/badge/%E8%87%AA%E5%AE%9A%E4%B9%89tabbar----yellowgreen)
![输入图片说明](https://img.shields.io/badge/UI%E7%BB%84%E4%BB%B6----yellowgreen)
![输入图片说明](https://img.shields.io/badge/%20%20%E5%8E%9F%E7%94%9F----blue)
![输入图片说明](https://img.shields.io/badge/vant----green)
![输入图片说明](https://img.shields.io/badge/%E7%BB%84%E4%BB%B6%E5%8C%96----red)
![输入图片说明](https://img.shields.io/badge/%E6%8A%BD%E5%A5%96%E7%BB%84%E4%BB%B6----orange)
![输入图片说明](https://img.shields.io/badge/%E6%97%A5%E5%8E%86%E7%BB%84%E4%BB%B6----orange)

#### 联系我
##### 公众号：苏苏的bug
![](https://camo.githubusercontent.com/927762d2b67f6d53db4b1146ca78273ccbb380f731ec285470d3b35acba76a53/68747470733a2f2f63646e2e6a7364656c6976722e6e65742f67682f737573752d68752f737573752d68752f696d672fe88b8fe88b8fe79a846275672e6a7067)
![](https://s3.bmp.ovh/imgs/2022/07/27/60d3ff9dc964b141.png)

#### 介绍
一些封装的好用且不坑的小程序组件；包括日历组件、弹框组件、actionSheet面板、loading加载动画、星星评分、canvas-2d圆环、swiper组件等等，后续会不断的完善~期待您的关注加star！！！！
#### 安装教程
1.克隆或下载压缩包

```
git clone https://gitee.com/susuhhhhhh/components.git
```

2.  克隆后微信开发者打开 ，选择自己的appid或者是测试号，（不要使用本人的appid,否则无法预览)

#### 页面说明

- [x] 1.  index:首页，有明确的页面导航，每个组件的位置，以及相关参数，皆在页面中表明（效果页面+组件详情介绍页面)
- [x] 2.  组件一：canvas2d-ring(canvas2d--圆环进度条）Canvas2D接口（type="2d"）,支持同层渲染的一个圆环进度条。（wx.createCanvasContext已废弃）
- [x] 3.  组件二：toastModal 根据wx.showModal封装的弹框组件
- [x] 3.  组件三：actiionSheet 根据wx.showActionSheet，可带图标，可添加open-type属性等
- [x] 4.  组件四：rating 星星评分（暂时只支持5星，后续会继续完善）
- [x] 5.  组件五：swiperBox 自定义swiper组件
- [x] 6.  组件六：customNav 自定义头部导航栏
- [x] 7.  组件7： loading自定义loading加载动画（根据wx.showLoading封装的弹框）
- [x] 8.  组件8：自定义日历组件，可设置主题色
- [x] 9.  组件9：自定义日期区间选择组件。可设置主题色

#### 页面截图
##### 页面导航
![输入图片说明](https://images.gitee.com/uploads/images/2021/0818/142518_50f3af98_8576727.png "屏幕截图.png")
##### canvas2d--圆环进度条
![输入图片说明](https://images.gitee.com/uploads/images/2021/0818/142602_d2417873_8576727.png "屏幕截图.png")
##### 据wx.showModal封装的弹框组件
![输入图片说明](https://images.gitee.com/uploads/images/2021/0821/000421_b5321f2e_8576727.png "屏幕截图.png")
![输入图片说明](https://images.gitee.com/uploads/images/2021/0821/000721_3cc974e8_8576727.png "屏幕截图.png")
##### 据wx.showActionSheet封装的组件
![输入图片说明](https://images.gitee.com/uploads/images/2021/0822/032114_e0e9f78c_8576727.png "屏幕截图.png")
![输入图片说明](https://images.gitee.com/uploads/images/2021/0822/032158_a137dde7_8576727.png "屏幕截图.png")
##### 星星评分
![输入图片说明](https://images.gitee.com/uploads/images/2021/0824/005849_e8665e6d_8576727.png "屏幕截图.png")
##### swiper组件
![输入图片说明](https://images.gitee.com/uploads/images/2021/0825/002257_f792ac4b_8576727.png "屏幕截图.png")
##### loading加载动画
![输入图片说明](https://images.gitee.com/uploads/images/2021/0831/101946_1e14190f_8576727.png "屏幕截图.png")
##### 日历组件1（可设置主题色）
![输入图片说明](https://images.gitee.com/uploads/images/2021/1117/002712_49884331_8576727.png "屏幕截图.png")
##### 日历组件2（可设置主题色）
![输入图片说明](https://images.gitee.com/uploads/images/2021/1122/135159_365cf763_8576727.png "屏幕截图.png")
#### 参与贡献

1.  Fork 本仓库
2.  新建 Feat_xxx 分支
3.  提交代码
4.  新建 Pull Request