脚本宝典收集整理的这篇文章主要介绍了De-ui 自己整理的一套微信小程序组件库,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
背景:今年开发或经手的小程序也有三个了,每个小程序之间都有一些相同的组件要写,虽然市面上有很多优秀的小程序组件库可以使用,但我更倾向于自己动手去开发这些组件。每次开发新的小程序总要翻出旧项目,将里面的组件拿出来,修修改改放在新项目里面继续使用。
目的:将自己写过的一些小程序组件集中起来,并新写一些常用组件,统一整理成这个小程序UI库,方便以后再开发小程序时使用。目前还比较简陋,日后会慢慢补充。
De-ui
一个微信小程序UI库
预览:
项目地址:https://github.com/hbxywdk/De-ui 欢迎Star
使用:
1、拉取代码
gIT clone git@github.com:hbxywdk/De-ui.git
2、复制文件
复制assets、components、de-page文件夹以及app.wxss到项目根目录中
3、使用组件
// json文件中引入对应组件
{
"usingComponents": {
"de-button": "/components/de-button/de-button"
}
}
// wxML文件中使用
<de-button type='success' bind_click="click">成功</de-button>
4、使用操作结果页
app.json中引入de-page
{
"pages": [
"de-page/de-msg-page/de-msg-page"
]
}
js跳转
wx.navigateTo({
url: '/de-page/de-msg-page/de-msg-page?type=1&title=操作结果&FirstTit=操作成功&secondTit=您的操作成功了&BTnText=返回',
})
组件列表
-
基础
- [x] Button 按钮
- [x] Icon 图标
- [x] Flex 对齐方式
-
布局
- [x] Layout 栅格布局]
- [x] Title 标题
- [x] Label 标签
- [x] List 列表
- [x] FooterTabs 底部标签
- [x] Line 分割线
-
表单
- [x] Input 输入框
- [x] Switch 开关
- [x] Radio 单选
- [x] Checkbox 多选
-
功能
-
提示
- [x] TopNotice 顶部公告栏
- [x] Alert 弹窗
-
其他
- [x] Loading 加载
- [x] MsgPage 页面提示
- [x] Image 图片
未来要实现的组件
-
布局
- 宫格布局 Grid
- SwiperBoxs 滑动盒
-
功能
- 步骤条 Steps
- 吸顶容器 Sticky
- 顶部弹出提示 TopTips
- 环形进度条 Circle
- 倒计时 CountDown
- 滚动公告 RollingBulletin
- 轮播图的封装 Swiper
- 迭代Filter 筛选器
-
提示
- 弹出式 Loading
- 弹出式密码输入框 Password
- 提示 Toast
以上是脚本宝典为你收集整理的De-ui 自己整理的一套微信小程序组件库全部内容,希望文章能够帮你解决De-ui 自己整理的一套微信小程序组件库所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。