更新记录

1.0.1(2019-09-09)

  • uni-ui 新增 SearchBar 搜索输入框
  • uni-ui 新增 GoodsNav 商品详情页底部购物车、购买导航条
  • uni-ui 新增 Fav 收藏按钮
  • uni-ui 优化 SwipeAction 滑动操作组件,App平台、H5 平台、微信小程序平台使用 wxs 实现跟手式流畅拖动
  • uni-ui 优化 Collapse 折叠面板在低配设备中动画卡顿的问题
  • uni-ui 优化 LoadMore 加载图标可按平台配置或由用户指定,Android平台默认circle,iOS平台默认雪花
  • uni-ui 优化 SwipeDot 优化指示器样式
  • uni-ui 修复 Icons 组件在 H5 平台不显示的BUG

uni-ui 使用说明

初始化项目

在 HBuilderX 中新建 uni-app 项目,进入项目目录,执行:

npm init -y

安装 uni-ui

npm install @dcloudio/uni-ui

使用 uni-ui

script 中引用组件:

import {uniBadge} from '@dcloudio/uni-ui'
//import uniBadge from '@dcloudio/uni-ui/lib/uni-badge/uni-badge.vue' //也可使用此方式引入组件
export default {
    components: {uniBadge}
}

template 中使用组件:

<uni-badge text="1"></uni-badge>
<uni-badge text="2" type="success" @click="bindClick"></uni-badge>
<uni-badge text="3" type="primary" :inverted="true"></uni-badge>

uni-ui 已支持的组件列表

组件名 引用路径 说明
uniBadge '@dcloudio/uni-ui/lib/uni-badge/uni-badge.vue' 数字角标
uniCard '@dcloudio/uni-ui/lib/uni-card/uni-card.vue' 卡片
uniCollapse '@dcloudio/uni-ui/lib/uni-collapse/uni-collapse.vue' 折叠面板
uniCollapseItem '@dcloudio/uni-ui/lib/uni-collapse-item/uni-collapse-item.vue' 折叠面板子组件
uniCountdown '@dcloudio/uni-ui/lib/uni-countdown/uni-countdown.vue' 倒计时
uniDrawer '@dcloudio/uni-ui/lib/uni-drawer/uni-drawer.vue' 抽屉
uniGrid '@dcloudio/uni-ui/lib/uni-grid/uni-grid.vue' 宫格
uniIcon '@dcloudio/uni-ui/lib/uni-icon/uni-icon.vue' 图标
uniList '@dcloudio/uni-ui/lib/uni-list/uni-list.vue' 列表
uniListItem '@dcloudio/uni-ui/lib/uni-list-item/uni-list-item.vue' 列表子组件
uniLoadMore '@dcloudio/uni-ui/lib/uni-load-more/uni-load-more.vue' 加载更多
uniNoticeBar '@dcloudio/uni-ui/lib/uni-notice-bar/uni-notice-bar.vue' 通告栏
uniNumberBox '@dcloudio/uni-ui/lib/uni-number-box/uni-number-box.vue' 数字输入框
uniPagination '@dcloudio/uni-ui/lib/uni-pagination/uni-pagination.vue' 分页器
uniRate '@dcloudio/uni-ui/lib/uni-rate/uni-rate.vue' 评分
uniSteps '@dcloudio/uni-ui/lib/uni-steps/uni-steps.vue' 步骤条
uniSwipeAction '@dcloudio/uni-ui/lib/uni-swipe-action/uni-swipe-action.vue' 滑动操作
uniTag '@dcloudio/uni-ui/lib/uni-tag/uni-tag.vue' 标签
uniSwiperDot '@dcloudio/uni-ui/lib/uni-swiper-dot/uni-swiper-dot.vue' 轮播图指示点

其他

  • uni-ui 是全端兼容的基于flex布局的ui库
  • 本页面介绍使用 npm 的安装使用方式,也可下载相关组件直接使用,组件下载地址见上表
  • uni-ui 不支持使用 Vue.use() 的方式安装
  • uni-ui 依赖 scss,若是 HBuilderX 中创建的 uni-app 项目,需要在 HBuilderX 中安装 scss 插件;如果是使用 cli 创建的 uni-app 项目,需要在项目下npm安装 node-sass 和 sass-loader
  • 如果在涉及slot的组件中使用v-for等语法,需要使用自定义组件编译模式,详见

隐私、权限及商业化声明

1. 本插件需要申请的手机端权限列表:

2. 本插件采集的手机端数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问