De-ui

一个小程序的UI库
集中整理一些自己写过的小程序组件，与一些常用的组件，方便以后使用。

预览：

使用：

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、使用de-page

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=返回',
})

组件列表与文档

• 基础

  • Button 按钮
  • Icon 图标
  • Flex 对齐方式

• 布局

  • Layout 栅格布局
  • Title 标题
  • Label 标签
  • List 列表
  • FooterTabs 底部标签
  • Line 分割线

• 表单

  • Input 输入框
  • Switch 开关
  • Radio 单选
  • Checkbox 多选

• 功能

  • Search 搜索
  • Progress 进度条
  • IndexSelector 索引选择器
  • SlideDel 滑动删除
  • Range 滑块
  • Filter 筛选器
  • Scroller 滚动区域

• 提示

  • TopNotice 顶部公告栏
  • Alert 弹窗

• 其他

  • Loading 加载
  • MsgPage 页面提示
  • Image 图片

未来要实现的组件

• 布局
  • 宫格布局 Grid
  • SwiperBoxs 滑动盒
• 功能
  • 步骤条 Steps
  • 吸顶容器 Sticky
  • 顶部弹出提示 TopTips
  • 环形进度条 Circle
  • 倒计时 CountDown
  • 滚动公告 RollingBulletin
  • 轮播图的封装 Swiper
  • 迭代Filter 筛选器
• 提示
  • 弹出式 Loading
  • 弹出式密码输入框 Password
  • 提示 Toast