# components

**Repository Path**: binlcc/components

## Basic Information

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

## Statistics

- **Stars**: 0
- **Forks**: 31
- **Created**: 2022-07-19
- **Last Updated**: 2022-07-19

## 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)

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

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

#### 页面说明

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


#### 联系我
##### 公众号：苏苏的bug