npm 包 wxos-ui 使用教程-JavaScript中文网-JavaScript教程资源分享门户

简介

wxos-ui 是一个基于微信小程序的UI框架，可以快速搭建小程序界面。它包含了一系列的基础组件，包括 button、icon、tabbar 等等。此外，它还提供了丰富的主题定制功能，让你可以定制出符合自己品牌形象的样式。

安装

可以通过 npm 安装 wxos-ui：

npm install wxos-ui --save

安装完成后，在小程序的 app.js 文件中引入该框架：

const wxos = require('wxos-ui')
App({
  onLaunch: function () {
    wxos.initUI()
  }
})

使用

以下是一个简单的使用示例：

<ui-button type="primary" size="default">Button</ui-button>

以上代码生成了一个蓝色、默认大小的按钮。

在 wxos-ui 中，每个组件都是以 ui- 开头，可以通过修改组件的属性来实现不同的样式、功能。下面我们介绍一些常用组件及其属性。

button

button 组件用于生成一个点击按钮。

<ui-button>Button</ui-button>

button 组件支持的属性：

属性	类型	默认值	描述
type	String	default	按钮类型，可选值：default、primary、warning、danger、disabled
size	String	default	按钮尺寸，可选值：default、mini
plain	Boolean	false	是否镂空
round	Boolean	false	是否圆角
circle	Boolean	false	是否圆形
inline	Boolean	false	是否内联按钮

icon

icon 组件用于生成一个图标，可以使用内置图标或者自定义图标。

<ui-icon type="check-circle-o"></ui-icon>

icon 组件支持的属性：

属性	类型	默认值	描述
type	String	-	图标类型，参考頞微信小程序图标库
size	Number/String	23	图标大小（单位 px）

tabbar

tabbar 组件用于生成一个选项卡栏，可以切换不同的页面。

<ui-tabbar active="{{activeIndex}}" bindchange="tabbarChange">
  <ui-tabbar-item icon="home">首页</ui-tabbar-item>
  <ui-tabbar-item icon="discover">发现</ui-tabbar-item>
  <ui-tabbar-item icon="user-o">我的</ui-tabbar-item>
</ui-tabbar>

tabbar 组件支持的属性：

属性	类型	默认值	描述
active	Number	-	当前选中的选项卡索引
background	String	#fff	背景颜色
color	String	#888	未选中选项卡的颜色
activeColor	String	#09bb07	选中选项卡的颜色

tabbar-item 组件支持的属性：

属性	类型	默认值	描述
icon	String	-	小程序图标库 icon-type 或自定义图标的路径
selectedIcon	String	-	选中状态下的图标
title	String	-	选项卡标题

scroll-view

scroll-view 组件用于生成可滑动的视图容器，支持横向和纵向滚动。

<ui-scroll-view scroll-y scroll-with-animation>
  <ui-view class="content" wx:for="{{list}}" wx:key="{{item}}">
    {{item.text}}
  </ui-view>
</ui-scroll-view>

scroll-view 组件支持的属性：

属性	类型	默认值	描述
scroll-x	Boolean	false	允许横向滚动
scroll-y	Boolean	false	允许纵向滚动
scroll-with-animation	Boolean	false	滚动时是否使用动画
scroll-left	Number	0	初始滚动左边距（单位 px）
scroll-top	Number	0	初始滚动上边距（单位 px）

ui-view 组件支持的属性：

属性	类型	默认值	描述
hover-class	string	none	指定按下去的样式类
hover-stop-propagation	Boolean	false	指定是否阻止本身节点的祖先节点出现点击态
hover-start-time	Number	50	指定按下后多久出现点击态（单位 ms）
hover-stay-time	Number	400	按住后多久出现点击态保留时间（单位 ms）

注意事项

使用 wxos-ui 需要注意以下几点：

请勿随意升级 wxos-ui 版本，建议与小程序官方版本一起升级。
如果遇到样式不生效的问题，可以检查下是否引用了 wxos-ui 的样式文件：/miniprogram_npm/wxos-ui/wxos-ui.wxss。
注意引用位置。需要在 app.js 中引用 wxos.initUI() 才能在所有页面中使用，如果只在单独的页面中使用，可以在对应页面的 js 文件中引用 wxos。

结语

wxos-ui 是一个快速开发小程序的好帮手，它提供了大量的基础组件和主题定制功能，方便你快速搭建出漂亮的小程序界面。希望这篇文章可以帮助大家更好地了解和使用它。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/600671188dd3466f61ffe71f