Skip to content

微信小程序封装组件,覆盖常用需求:包括轮播组件(堆叠式轮播等)、canvas(圆环、生海报、裁图片等)、map、echarts、css3动画,scroll-view、步骤条、日历组件、自定义tabbar+导航栏、loading加载动画、css渐变、雪碧图、瀑布流、关键词高亮、搜索历史、图片懒加载、节流防抖、索引选择(如城市)、微信拆红包、红包雨、菜单弹出动画、3d云、按钮拖拽、营销组件(九宫格等)

License

Notifications You must be signed in to change notification settings

KTBOY/wxmini_demo

 
 

Repository files navigation

微信小程序模板页面合集

输入图片说明 输入图片说明 输入图片说明 输入图片说明 输入图片说明 输入图片说明 输入图片说明 输入图片说明 输入图片说明

介绍

微信小程序封装组件,覆盖常用需求:包括轮播组件(堆叠式轮播等)、canvas(圆环、生海报、裁图片等)、map、echarts、css3动画,scroll-view、步骤条、日历组件、自定义tabbar+导航栏、loading加载动画、css渐变、雪碧图、瀑布流、关键词高亮、搜索历史、图片懒加载、节流防抖、索引选择(如城市)、微信拆红包、红包雨、菜单弹出动画、3d云、按钮拖拽、营销组件(九宫格等)等!( 无其他ui组件库----vant引入只为做测试

注意:所使用到的图片素材均为学习交流使用, 请勿将其用于商业用途, 由此产生的任何法律纠纷概不负责。

伙伴们,这是一个小程序组件合集,涵盖了常见的一些需求,该版本是开源版,后续我将重新对此版本改版,并加上一些新的需求,作为一个ui组件库出现,针对微信小程序和uniapp!

开源不易,您如果觉得项目不错的话可以给项目一个 Star 嘛,也是对我一直更新代码的一种鼓励啦,谢谢各位的支持。

2022!新年快乐🎉 艾瑞巴蒂!

功能总结

  1. 首页为所有页面导航(2021.8.15 新增页面导航)
  2. cal:为日历页面
  3. demo/index:物流页面,页面完全渲染前,展示骨架屏(需要手工维护),待数据加载完成后,替换为真实的内容、demo/index2:新增伪元素写法。
  4. dots:为自定义轮播图指示点页面
  5. touchRemove: 购物车页面+左滑删除
  6. touchMove2: 滑动删除2 movable-area组件
  7. cardCircle: 卡券实现半圆状态
  8. pop: 自定义弹框 禁止底层滑动(catchtouchmove+scroll-view)
  9. pie: echarts的饼图和折线图(wxcharts.js)
  10. charts/index: echarts官方推荐小程序使用的ec-canvas组件和echarts.js
  11. index: 自定义tabbar组件,cover-view进行覆盖
  12. getStar:星星评分 1-5颗星 分别对应'极好','较好','一般','较差','很差',点星星字段产生变化 点字段星星变化
  13. sendCode/index: 自定义input输入框的样式 (粘贴的时候无法实现长按粘贴 待完善的bug)
  14. sendCode/index2:自定义弹框验证码组件(v-code)+新增背景图虚化(filter: blur(10rpx);)+新增三角形 箭头 矩形 梯形 圆弧等样式
  15. addImg: 上传多张图片 wx.chooseImage()+预览图片wx.previewImage()+上传文件到服务器 wx.uploadFile()
  16. choseList: 筛选页(1.小程序自带日期选择2.tab切换 3.右边弹框筛选,超出4条数据默认隐藏,可点击展开)
  17. charts/index: 自定义导航 "navigationStyle": "custom" 获取胶囊和导航栏等高度,自定义图标等
  18. scroll: scroll-view填充剩余高度 ,滚动条滑动选中相应分类,点击分类实现锚点定位。
  19. index2: 自定义导航栏+swiper+ 新增消息滚动弹框+左滑的tablist
  20. charts/index2: echarts实现饼图,canvas为原生组件,层级很高,用cover-view实现覆盖,可覆盖的原生组件包括 map、video、canvas、camera、live-player、live-pusher。新增修改,头部用cover-view实现fixed的tab栏 。多个cover-view的层级关系,写在页面越后面层级越高!(存在tooltip被底部字体遮挡的bug 待解决)
  21. another/choseGoods:数值计算,引入math.min.js处理精度问题。
  22. choseAddress:地址选择,wx.chooseLocation(需要用户授权)+wx.chooseAddress(无须用户授权,直接调用该接口)
  23. scroll/index3:商品详情页,头部导航栏为自定义的tab(fixed)+双向锚点(scroll-view实现点击tab选中对应的区域,页面滚动头部tab被选中),新增富文本样式修改,正则表达式进行匹配。(情况一:富文本不带style,此时可以正则添加style,class。或者在rich-text或父元素标签来定义样式!情况二:富文本带style,正则添加class才行)
  24. another/mrovevideos:视频页面,自定义播放与暂停的按钮与事件
  25. another/swiper-threeD新增swiper+transform: scale(1)实现3D轮播效果,animation实现动画效果,360度翻转,来回滚动等效果
  26. subPack/animationBox 新增wx.createAnimation+css3:transform的rotate+translate形成一个五福合成的效果。
  27. another/circleRing/index 新增canvas(接口wx.createCanvasContext)绘制圆环的组件,层级很高,cover-view能力有限,采用wx.canvasToTempFilePath转换成图片,展示图片,避免穿透的发生,(该接口已被废弃,canvas2d支持同层渲染)
  28. subPack/canvas2d/index 新增canvas2d 绘制圆环进度条组件,同层渲染,canvas层级不会发生穿透现象(原接口wx.createCanvasContext已被废弃)
  29. another/scroll-x 新增scroll-view+swiper实现左右滚动导航条。
  30. subpack/loading/index 新增17个loading动画,可以根据这些样式进行其他的变化,animation实现。
  31. subpack/loading/indedx2 新增15个炫酷的loading动画。
  32. 分包csscase/conic-gradient/index 新增css的圆锥渐变,实现圆弧进度条,颜色盘,饼图等样式。
  33. csscase/colorChange,颜色盘,暂更新2种色盘,后续更新渐变色。
  34. subpack/loading/indedx3,新增18个炫酷的loading动画。
  35. 学习案例:炫酷能量球+螺旋线条
  36. css写警示按钮+蓝云+小花
  37. 实现搜索历史记录,localStorage存储前15条,选择的最新一条放置数组的第一条。
  38. 实现navigator及其相关属性,hover-class+页面跳转接口的区别。
  39. 一个蛋黄派样式的可爱的switch按钮,(input+label+伪元素实现)
  40. 旋转字符+翻转字符
  41. 一个正在输入文字的动画
  42. 一个有趣的404页面
  43. -webkiit-background-clip:text实现一个渐变色的文字
  44. scroll-view包裹一个单选弹框和textarea,textarea给定id值,与scroll-into-view绑定,实现页面定位到文本输入框。
  45. 多选框checkbox实现多选
  46. 一个带半圆的卡片
  47. 自定义导航栏(精准定位)
  48. 商城首页普通版(自定义导航栏)
  49. vant日历多日期选择(安装vant step1:npm init step2:npm i @vant/weapp -S --production step3:将 app.json 中的 "style": "v2" 去除 step4:使用npm模块 step5:构建npm)
  50. 背景图片在一屏之内 51.自定义actionSheet+保存图片(开启授权-》引导用户打开设置页),需在调式下运行。
  51. 一个左右摇摆的灯泡动画
  52. 文字的展开与收起
  53. 一定高度的文字展开与收起
  54. 卡片翻转的效果
  55. 实现打卡(卡片翻转效果)
  56. 自定义input输入框
  57. 自定义日历组件,可设置不同的主题色
  58. 上下循环滚动的swiper弹幕条
  59. 文字右下角的展开按钮
  60. 抽奖活动
  61. 圆角边框渐变色
  62. 自定义多日期选择组件,可设置不同主题色
  63. swiper实现商品轮播
  64. css实现常见的一些特殊的形状,谷歌导航栏等等
  65. 0.5rpx的线
  66. swiper不定长展示数据
  67. text标签空格,换行,转换等等
  68. input密码的显示与隐藏
  69. 背景图片
  70. 多选框按钮的显示与隐藏
  71. 手动添加列表
  72. 折叠文字动画
  73. scroll-view铺满剩余高度,左右两列
  74. 数组中某项数量的增加与减少,金额的计算
  75. 设置上一个data值并返回上一页
  76. 纯css实现六角灯笼
  77. css实现卡券背景透明,随着内容自动撑开元素大小
  78. 多列选择器实现时间和日期的选择
  79. css实现圆角灯笼
  80. 新增n个loading动画
  81. 弹框高度不定长,一屏长度的80%
  82. 实现圆弧的两种方式
  83. 步骤条不定长高度+气泡框
  84. css实现流星雨效果
  85. flex布局实现位于页面底部的提示文字
  86. 跳动的方块
  87. 数组每一项展示随机颜色
  88. 按钮点击水波纹效果+录音圆环扩散效果
  89. css实现落日效果
  90. 小程序的animation实现雪花飘落的效果
  91. 固定tab切换栏
  92. 多图片下载
  93. 弹出的菜单
  94. css实现一个弹出的菜单
  95. vant上传图片
  96. swiper展示数量的不同,swiper高度随之变化
  97. 横向消息滚动条
  98. css实现一个笑脸
  99. border-radius实现一个图片带弧度
  100. 折线图,柱形图等echarts图表
  101. 引入外部icon,阿里巴巴矢量图标
  102. 一个可以拖拽的按钮
  103. 一键返回顶部
  104. canvas实现图片文字验证码
  105. 一个福字
  106. 一个弹出框动画
  107. 一个等级进度条
  108. 百分比进度条
  109. 文件的上传下载与预览
  110. 头部固定筛选不定高度
  111. 纯css实现一个冰墩墩
  112. css实现一个雪容融
  113. 实现关键词高亮
  114. 背景高斯模糊
  115. 卡片切换效果
  116. 小程序中的媒体查询 @media screen
  117. 实现堆叠式轮播图
  118. 加载进度条
  119. 抽奖4.0走马灯效果
  120. 小程序实现grid布局
  121. 渐变色实现条纹进度条
  122. swiper+scroll-view实现不同内容的滑动切换
  123. 自定义tabbar样式
  124. 瀑布流写法1
  125. scroll-view实现滚动卡片
  126. scroll-into-view实现页面联动
  127. canvas图片裁剪
  128. 首页loading加载页
  129. loading加载动画(更新ing)
  130. 节流+防抖
  131. rotateZ实现卡片翻转
  132. css渐变实现条纹背景
  133. 单选跳跃选择动画
  134. 页面监听watch
  135. wx.createAnimation实现一个带有transition效果的弹框动画
  136. tab切换添加过渡效果
  137. 雪碧图+帧动画
  138. mask自定义tabbar样式
  139. 微信拆红包动画
  140. map+腾讯地图sdk,地图拖拽,经纬度到地址转换
  141. scroll-view+swiper,切换状态下scroll-left的使用
  142. canvas生成海报图片
  143. 关闭小房子+按钮退出小程序
  144. canvas手写签名
  145. 颜色选择器
  146. 列表显示动画
  147. 城市索引选择
  148. 滚动吸顶
  149. 数字滚动
  150. 一些tab选中样式
  151. 上下左右滑动切换(transform)

页面部分截图

页面导航

输入图片说明

日历组件1

输入图片说明

日历组件2

输入图片说明

骨架屏+物流步骤条

输入图片说明

自定义指示点(新增指示点

输入图片说明

自定义指示点(修改原样式

输入图片说明

购物车页面+左滑删除

输入图片说明

左滑删除(movable-area组件

输入图片说明

卡券半圆

输入图片说明

弹框+禁止底层滑动

输入图片说明

饼图+折线图(wxcharts.js

输入图片说明

官方ec-canvas组件

输入图片说明

自定义tabbar

输入图片说明

星星评分

输入图片说明

自定义input输入框

输入图片说明 输入图片说明 输入图片说明 输入图片说明

多图上传

输入图片说明

侧边弹框筛选,超出4条数据默认隐藏,可点击展开

输入图片说明

自定义导航栏

输入图片说明

锚点定位

输入图片说明

swiper消息滚动

输入图片说明

echarts饼图+tooltip

输入图片说明

数值计算math.min

输入图片说明

地址选择(chooseLocation

输入图片说明

双向锚点+富文本(商品详情页

输入图片说明

气泡框(三角形+矩形+梯形等

输入图片说明

自定义播放与暂停的按钮与事件

输入图片说明

3d轮播(swiper+scale

输入图片说明

css3动画(五福合成效果

输入图片说明

canvas2d圆环

输入图片说明 输入图片说明

scroll-view+swiper双向切换

输入图片说明

不错的loading动画

输入图片说明 输入图片说明

圆锥渐变

输入图片说明

颜色盘

输入图片说明

炫酷的loading动画

输入图片说明

炫酷能量球+螺旋线条(学习案例

输入图片说明

纯css图标(警示按钮+蓝云+小花

输入图片说明

搜索历史(前15条数据

输入图片说明

navigator

输入图片说明

蛋黄派switch(学习案例

输入图片说明

一些css3动画

输入图片说明 输入图片说明

404页面(动画

输入图片说明

文字渐变(background-clip:text

输入图片说明

scroll-into-view输入框定位

输入图片说明

checkbox(自定义样式

输入图片说明 输入图片说明

自定义导航栏(精准定位)

输入图片说明 输入图片说明

vant日历多日期选择

输入图片说明

背景一屏

输入图片说明

图片授权保存

输入图片说明

摇摆的灯泡动画

输入图片说明

文字的展开与收起

输入图片说明 输入图片说明

卡片翻转动画

输入图片说明

打卡(腾讯地图sdk

输入图片说明

input自定义样式2

输入图片说明

日历组件03+主题色选择

输入图片说明

消息飘窗(swiper

输入图片说明

文字省略右下角的展开按钮

输入图片说明

营销组件抽奖

输入图片说明

圆角边框渐变色

输入图片说明

日历组件04+主题色选择

输入图片说明

swiper实现商品轮播

输入图片说明

css高频形状

输入图片说明

0.5rpx的线

输入图片说明

swiper不定长展示数据

输入图片说明

text标签空格,换行,转换

输入图片说明

input密码的显示与隐藏

输入图片说明 输入图片说明

多选框按钮的显示与隐藏

输入图片说明

手动添加列表

输入图片说明

折叠文字动画

输入图片说明

左右两列满屏(滑动选择

输入图片说明

金额的计算(reduce

输入图片说明

页面栈(设置上一页数据并返回

输入图片说明

css实现六角灯笼(学习案例)

输入图片说明

卡券背景透明,随着内容自动撑开元素大小

输入图片说明

多列选择器实现时间和日期的选择

输入图片说明

css实现圆角灯笼

输入图片说明

新增n个loading动画

输入图片说明

一屏长度的80%的弹框

输入图片说明

实现圆弧的两种方式

输入图片说明

气泡框+步骤条不定长高度

输入图片说明

css流星雨

输入图片说明

页面底部的提示文字(flex

输入图片说明

css3跳动的方块

输入图片说明

列表标签随机颜色

输入图片说明

css按钮点击水波纹+录音圆环扩散效果

输入图片说明

css落日

输入图片说明

css3实现雪花飘落

输入图片说明

一次多图片下载

输入图片说明

实现一个弹出的菜单

输入图片说明 输入图片说明

vant文件上传

输入图片说明

swiper高度与数量同步

输入图片说明

消息走马灯效果

输入图片说明

css3笑脸

输入图片说明

border-radius实现一个图片带弧度

输入图片说明

折线图+柱形图

输入图片说明

引入外部icon(阿里巴巴矢量图标

输入图片说明

按钮可拖拽

输入图片说明

一键返回顶部

输入图片说明

canvas实现图片文字验证码

输入图片说明

css-福字

输入图片说明

css3弹出框动画

输入图片说明

等级进度条

输入图片说明

百分比进度条

输入图片说明

文件的上传下载与预览

输入图片说明

头部固定筛选不定高度

输入图片说明

css-冰墩墩

输入图片说明

css-雪容融

输入图片说明

关键词高亮

输入图片说明

css-高斯模糊

输入图片说明

手势滑动切换卡片组件(学习案例

输入图片说明

媒体查询

输入图片说明

堆叠式轮播

输入图片说明

加载进度条

输入图片说明

营销组件(抽奖走马灯

输入图片说明

css-grid布局(display:grid

输入图片说明

css-渐变色实现条纹进度条

输入图片说明

自定义tabbar样式

输入图片说明

瀑布流写法1

输入图片说明

scroll-view实现滚动卡片

输入图片说明

scroll-into-view实现页面联动

输入图片说明

图片裁剪

输入图片说明

首页loading加载页

输入图片说明

loading动画ing(++)

输入图片说明

节流防抖

输入图片说明

rotateZ实现卡片翻转

输入图片说明

css渐变实现条纹背景

输入图片说明

单选跳跃选择动画

输入图片说明

页面监听watch

输入图片说明

带有transition效果的弹框动画

输入图片说明

tab切换过渡效果

输入图片说明

雪碧图+帧动画

输入图片说明

mask自定义tabbar样式

输入图片说明

微信拆红包动画

输入图片说明

地图拖拽定位

输入图片说明

scroll-left切换

输入图片说明

canvas生成海报图片

输入图片说明

关闭小房子+按钮退出小程序

输入图片说明

canvas手写签名

输入图片说明

颜色选择器

输入图片说明

列表显示动画

输入图片说明

城市索引选择

输入图片说明

滚动吸顶

输入图片说明

数字滚动

输入图片说明

一些tab选中样式

输入图片说明

上下左右滑动切换(transform)

输入图片说明

参与贡献

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

联系我

公众号:苏苏的bug

About

微信小程序封装组件,覆盖常用需求:包括轮播组件(堆叠式轮播等)、canvas(圆环、生海报、裁图片等)、map、echarts、css3动画,scroll-view、步骤条、日历组件、自定义tabbar+导航栏、loading加载动画、css渐变、雪碧图、瀑布流、关键词高亮、搜索历史、图片懒加载、节流防抖、索引选择(如城市)、微信拆红包、红包雨、菜单弹出动画、3d云、按钮拖拽、营销组件(九宫格等)

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 100.0%