微信小程序封装组件,覆盖常用需求:包括轮播组件(堆叠式轮播等)、canvas(圆环、生海报、裁图片等)、map、echarts、css3动画,scroll-view、步骤条、日历组件、自定义tabbar+导航栏、loading加载动画、css渐变、雪碧图、瀑布流、关键词高亮、搜索历史、图片懒加载、节流防抖、索引选择(如城市)、微信拆红包、红包雨、菜单弹出动画、3d云、按钮拖拽、营销组件(九宫格等)等!( 无其他ui组件库----vant引入只为做测试 )
2022!新年快乐🎉 艾瑞巴蒂!
- 首页为所有页面导航(2021.8.15 新增页面导航)
- cal:为日历页面
- demo/index:物流页面,页面完全渲染前,展示骨架屏(需要手工维护),待数据加载完成后,替换为真实的内容、demo/index2:新增伪元素写法。
- dots:为自定义轮播图指示点页面
- touchRemove: 购物车页面+左滑删除
- touchMove2: 滑动删除2 movable-area组件
- cardCircle: 卡券实现半圆状态
- pop: 自定义弹框 禁止底层滑动(catchtouchmove+scroll-view)
- pie: echarts的饼图和折线图(wxcharts.js)
- charts/index: echarts官方推荐小程序使用的ec-canvas组件和echarts.js
- index: 自定义tabbar组件,cover-view进行覆盖
- getStar:星星评分 1-5颗星 分别对应'极好','较好','一般','较差','很差',点星星字段产生变化 点字段星星变化
- sendCode/index: 自定义input输入框的样式 (粘贴的时候无法实现长按粘贴 待完善的bug)
- sendCode/index2:自定义弹框验证码组件(v-code)+新增背景图虚化(filter: blur(10rpx);)+新增三角形 箭头 矩形 梯形 圆弧等样式
- addImg: 上传多张图片 wx.chooseImage()+预览图片wx.previewImage()+上传文件到服务器 wx.uploadFile()
- choseList: 筛选页(1.小程序自带日期选择2.tab切换 3.右边弹框筛选,超出4条数据默认隐藏,可点击展开)
- charts/index: 自定义导航 "navigationStyle": "custom" 获取胶囊和导航栏等高度,自定义图标等
- scroll: scroll-view填充剩余高度 ,滚动条滑动选中相应分类,点击分类实现锚点定位。
- index2: 自定义导航栏+swiper+ 新增消息滚动弹框+左滑的tablist
- charts/index2: echarts实现饼图,canvas为原生组件,层级很高,用cover-view实现覆盖,可覆盖的原生组件包括 map、video、canvas、camera、live-player、live-pusher。新增修改,头部用cover-view实现fixed的tab栏 。多个cover-view的层级关系,写在页面越后面层级越高!(存在tooltip被底部字体遮挡的bug 待解决)
- another/choseGoods:数值计算,引入math.min.js处理精度问题。
- choseAddress:地址选择,wx.chooseLocation(需要用户授权)+wx.chooseAddress(无须用户授权,直接调用该接口)
- scroll/index3:商品详情页,头部导航栏为自定义的tab(fixed)+双向锚点(scroll-view实现点击tab选中对应的区域,页面滚动头部tab被选中),新增富文本样式修改,正则表达式进行匹配。(情况一:富文本不带style,此时可以正则添加style,class。或者在rich-text或父元素标签来定义样式!情况二:富文本带style,正则添加class才行)
- another/mrovevideos:视频页面,自定义播放与暂停的按钮与事件
- another/swiper-threeD新增swiper+transform: scale(1)实现3D轮播效果,animation实现动画效果,360度翻转,来回滚动等效果
- subPack/animationBox 新增wx.createAnimation+css3:transform的rotate+translate形成一个五福合成的效果。
- another/circleRing/index 新增canvas(接口wx.createCanvasContext)绘制圆环的组件,层级很高,cover-view能力有限,采用wx.canvasToTempFilePath转换成图片,展示图片,避免穿透的发生,(该接口已被废弃,canvas2d支持同层渲染)
- subPack/canvas2d/index 新增canvas2d 绘制圆环进度条组件,同层渲染,canvas层级不会发生穿透现象(原接口wx.createCanvasContext已被废弃)
- another/scroll-x 新增scroll-view+swiper实现左右滚动导航条。
- subpack/loading/index 新增17个loading动画,可以根据这些样式进行其他的变化,animation实现。
- subpack/loading/indedx2 新增15个炫酷的loading动画。
- 分包csscase/conic-gradient/index 新增css的圆锥渐变,实现圆弧进度条,颜色盘,饼图等样式。
- csscase/colorChange,颜色盘,暂更新2种色盘,后续更新渐变色。
- subpack/loading/indedx3,新增18个炫酷的loading动画。
- 学习案例:炫酷能量球+螺旋线条
- css写警示按钮+蓝云+小花
- 实现搜索历史记录,localStorage存储前15条,选择的最新一条放置数组的第一条。
- 实现navigator及其相关属性,hover-class+页面跳转接口的区别。
- 一个蛋黄派样式的可爱的switch按钮,(input+label+伪元素实现)
- 旋转字符+翻转字符
- 一个正在输入文字的动画
- 一个有趣的404页面
- -webkiit-background-clip:text实现一个渐变色的文字
- scroll-view包裹一个单选弹框和textarea,textarea给定id值,与scroll-into-view绑定,实现页面定位到文本输入框。
- 多选框checkbox实现多选
- 一个带半圆的卡片
- 自定义导航栏(精准定位)
- 商城首页普通版(自定义导航栏)
- vant日历多日期选择(安装vant step1:npm init step2:npm i @vant/weapp -S --production step3:将 app.json 中的 "style": "v2" 去除 step4:使用npm模块 step5:构建npm)
- 背景图片在一屏之内 51.自定义actionSheet+保存图片(开启授权-》引导用户打开设置页),需在调式下运行。
- 一个左右摇摆的灯泡动画
- 文字的展开与收起
- 一定高度的文字展开与收起
- 卡片翻转的效果
- 实现打卡(卡片翻转效果)
- 自定义input输入框
- 自定义日历组件,可设置不同的主题色
- 上下循环滚动的swiper弹幕条
- 文字右下角的展开按钮
- 抽奖活动
- 圆角边框渐变色
- 自定义多日期选择组件,可设置不同主题色
- swiper实现商品轮播
- css实现常见的一些特殊的形状,谷歌导航栏等等
- 0.5rpx的线
- swiper不定长展示数据
- text标签空格,换行,转换等等
- input密码的显示与隐藏
- 背景图片
- 多选框按钮的显示与隐藏
- 手动添加列表
- 折叠文字动画
- scroll-view铺满剩余高度,左右两列
- 数组中某项数量的增加与减少,金额的计算
- 设置上一个data值并返回上一页
- 纯css实现六角灯笼
- css实现卡券背景透明,随着内容自动撑开元素大小
- 多列选择器实现时间和日期的选择
- css实现圆角灯笼
- 新增n个loading动画
- 弹框高度不定长,一屏长度的80%
- 实现圆弧的两种方式
- 步骤条不定长高度+气泡框
- css实现流星雨效果
- flex布局实现位于页面底部的提示文字
- 跳动的方块
- 数组每一项展示随机颜色
- 按钮点击水波纹效果+录音圆环扩散效果
- css实现落日效果
- 小程序的animation实现雪花飘落的效果
- 固定tab切换栏
- 多图片下载
- 弹出的菜单
- css实现一个弹出的菜单
- vant上传图片
- swiper展示数量的不同,swiper高度随之变化
- 横向消息滚动条
- css实现一个笑脸
- border-radius实现一个图片带弧度
- 折线图,柱形图等echarts图表
- 引入外部icon,阿里巴巴矢量图标
- 一个可以拖拽的按钮
- 一键返回顶部
- canvas实现图片文字验证码
- 一个福字
- 一个弹出框动画
- 一个等级进度条
- 百分比进度条
- 文件的上传下载与预览
- 头部固定筛选不定高度
- 纯css实现一个冰墩墩
- css实现一个雪容融
- 实现关键词高亮
- 背景高斯模糊
- 卡片切换效果
- 小程序中的媒体查询 @media screen
- 实现堆叠式轮播图
- 加载进度条
- 抽奖4.0走马灯效果
- 小程序实现grid布局
- 渐变色实现条纹进度条
- swiper+scroll-view实现不同内容的滑动切换
- 自定义tabbar样式
- 瀑布流写法1
- scroll-view实现滚动卡片
- scroll-into-view实现页面联动
- canvas图片裁剪
- 首页loading加载页
- loading加载动画(更新ing)
- 节流+防抖
- rotateZ实现卡片翻转
- css渐变实现条纹背景
- 单选跳跃选择动画
- 页面监听watch
- wx.createAnimation实现一个带有transition效果的弹框动画
- tab切换添加过渡效果
- 雪碧图+帧动画
- mask自定义tabbar样式
- 微信拆红包动画
- map+腾讯地图sdk,地图拖拽,经纬度到地址转换
- scroll-view+swiper,切换状态下scroll-left的使用
- canvas生成海报图片
- 关闭小房子+按钮退出小程序
- canvas手写签名
- 颜色选择器
- 列表显示动画
- 城市索引选择
- 滚动吸顶
- 数字滚动
- 一些tab选中样式
- 上下左右滑动切换(transform)
- Fork 本仓库
- 新建 Feat_xxx 分支
- 提交代码
- 新建 Pull Request