cmd-uni-app组件库

测试使用蓝叠模拟器演示APP、微信开发者工具演示微信小程序、猎豹浏览器演示H5。
可以下载相关组件直接使用,具体还看真机运行效果。
cmd组件写法基础,易于理解vue组件的创建使用,对于初学vue新手入uni-app友好,代码操作注释明确。
样式修改可以通过H5方式运行后查看浏览器开发者工具,有css基础都很好理解。
推荐新手先看看这篇白话uni-app
默认使用新版编译器环境uni-app 1.9发布,App平台升级为新版编译器(自定义组件模式),支持更多Vue语法

包含组件:

  • 头像组件名:cmd-avatar 代码块: cmdAvatar
  • 微标组件名:cmd-badge 代码块: cmdBadge
  • 列表单元组件名:cmd-cell-item 代码块: cmdCellItem
  • 幕帘组件名:cmd-curtain 代码块: cmdCurtain
  • 分隔线组件名:cmd-divider 代码块: cmdDivider
  • 通知栏组件名:cmd-notice-bar 代码块: cmdNoticeBar
  • icon图标组件名:cmd-icon 代码块: cmdIcon
  • 输入框组件名:cmd-input 代码块: cmdInput
  • 进度条组件名:cmd-progress 代码块: cmdProgress
  • 结果页组件名:cmd-result-page 代码块: cmdResultPage
  • 底部导航栏组件名:cmd-bottom-nav 代码块: cmdBottomNav
  • 顶部导航栏组件名:cmd-nav-bar 代码块: cmdNavBar
  • 顶部工具栏组件名:cmd-tool-bar 代码块: cmdToolBar
  • 导航栏内容页组件名:cmd-page-body 代码块: cmdPageBody
  • 动画组件名:cmd-transition 代码块: cmdTransition
  • HTML 文本解析器 JS库:html-parser 代码块: HtmlParser

示例模板:

以上就是所有cmd组件,有vue语法基础的可以快速理解学会。
极大的提升vue语法进而使用uni-app进行开发七端应用程序。

使用自定义导航栏时

{
  // 全局bar样式中去除,顶部导航条、滚动条、原生回弹阴影
  "globalStyle": {
    // 不显示工具栏toolbar
    "navigationStyle": "custom",
    "app-plus": {
        // 不显示滚动条
        "scrollIndicator": "none",
        // 页面回弹效果
        "bounce": "none"
    }
  }
}

全局样式使用

如果cmd组件在使用中发生大小异常,可以在组件内加上view标签通用样式

/* 全局样式 */
@import url("./common/uni/uni.css");

/* 通用 */
view {
    font-size: 28upx;
    line-height: 1.8;
}

全局组件注册

import cmdNavBar from './components/cmd-nav-bar/cmd-nav-bar.vue'
Vue.component('cmd-nav-bar',cmdNavBar)
// 不支持用Vue.use()

祝愿DCloud越做越好

隐私、权限及商业化声明

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

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

HTML文本解析器请求 Dcloud插件市场 的首页,解析标题

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

无,开源学习。

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