taro_widgets
介绍
taro 小组件集合 小组件均来源于项目中,目前组件的数量还不多,今后会持续更新
组件清单
- 自定义顶部导航栏
- 网络状态组件
- 空结果组件
- 数字软键盘
- tip提示组件(仿头条)
- 搜索栏位
- 我是有底线的
安装教程
- npm i taro_widgets
OR
- yarn add taro_widgets
使用说明
- 自定义顶部导航栏
参数 | 类型 | 必填 | 说明 | 默认值 |
---|---|---|---|---|
title | String | √ | 导航标题 | 空字符串 |
onBack | function | x | 返回事件 | 返回上一页 |
hasBackIcon | bool | x | 是否有返回按钮 | false |
(1)配置页面导航自定义
config = {
navigationBarTitleText: '',
navigationBarStyle: 'custom'
}
(2)引入
<TopBar title='首页' hasBackIcon></TopBar>
效果图
- 网络状态组件
网络为2g\3g时提示信号弱,无连接时提示网络已断开,wifi\4g\5g时组件隐藏
参数 | 类型 | 必填 | 说明 | 默认值 |
---|---|---|---|---|
无 |
<NetStatus></NetStatus>
效果图
信号弱
网络断开
- 空结果组件
结果为空时给出优雅的提示,并引导用户下一步操作
参数 | 类型 | 必填 | 说明 | 默认值 |
---|---|---|---|---|
nothingText | String | x | 无结果文本 | 空空如也 |
hasGuideBtn | bool | x | 是否有引导按钮 | false |
guideText | String | x | 引导按钮文本 | 立即创建 |
onGuideHandle | function | x | 引导事件 | 空箭头函数 |
<Nothing nothingText='空空如也' hasGuideBtn guideText='快去抢购' onGuideHandle={()=>{}}></Nothing>
效果图
- 数字软键盘
参数 | 类型 | 必填 | 说明 | 默认值 |
---|---|---|---|---|
onNumKeyClickHandler | function | x | 数字按键事件 | 空箭头函数 |
onDeleteHandler | function | x | 删除按钮事件 | 空箭头函数 |
onClearHandler | function | x | 清空按钮事件 | 空箭头函数 |
constructor(props) {
super(props)
this.clickNumKey = this.clickNumKey.bind(this)
}
clickNumKey(e) {
// 数字按键与id名称关联,通过以下方式取得数字按键的值
let n = e.target.id.replace('num','').replace('txt','')
.....
}
<SkeyBoard
onNumKeyClickHandler={()=>this.clickNumKey}
onClearHandler={()=>{}}
onDeleteHandler={()=>{}}
onShowHandler={()=>{}}
>
</SkeyBoard>
效果图
- tip提示组件(仿头条)
参数 | 类型 | 必填 | 说明 | 默认值 |
---|---|---|---|---|
title | String | √ | 标题 | 标题 |
textArr | array | √ | 文本内容数组,按段落形式展示 | [] |
btnText | String | √ | 关闭按钮文本 | 我知道了 |
btnText | String | √ | 关闭按钮文本 | 我知道了 |
tipShow | bool | √ | 显示/隐藏 | false |
onHideTip | function | √ | 隐藏事件 | 空箭头函数 |
show(){
this.setState({tipShow:true})
}
hide(){
this.setState({tipShow:false})
}
<MyTips
title='码云特技'
textArr={['使用 Readme_XXX.md 来支持不同的语言,例如 Readme_en.md, Readme_zh.md',
'码云官方博客 blog.gitee.com',
'你可以 https://gitee.com/explore 这个地址来了解码云上的优秀开源项目']}
btnText='我知道了'
tipShow={tipShow}
onHideTip={()=>this.hide}
>
</MyTips>
效果图
- 搜索栏位
基础的搜索栏位,通常会跳转到搜索页面
参数 | 类型 | 必填 | 说明 | 默认值 |
---|---|---|---|---|
placeholder | String | x | 显示文本 | 大家都在搜: |
onSearchView | function | √ | 点击搜索事件 | 空箭头函数 |
<SearchView placeholder='大家都在搜' onSearchView={()=>{}}></SearchView>
效果图
- 我是有底线的
参数 | 类型 | 必填 | 说明 | 默认值 |
---|---|---|---|---|
无 |
<Divider></Divider>
效果图
参与贡献
- Fork 本仓库
- 新建 Feat_xxx 分支
- 提交代码
- 新建 Pull Request