taro_widgets

介绍

taro 小组件集合 小组件均来源于项目中，目前组件的数量还不多，今后会持续更新

组件清单

1. 自定义顶部导航栏
2. 网络状态组件
3. 空结果组件
4. 数字软键盘
5. tip提示组件(仿头条)
6. 搜索栏位
7. 我是有底线的

安装教程

1. npm i taro_widgets

OR

1. yarn add taro_widgets

使用说明

1. 自定义顶部导航栏

参数	类型	必填	说明	默认值
title	String	√	导航标题	空字符串
onBack	function	x	返回事件	返回上一页
hasBackIcon	bool	x	是否有返回按钮	false

（1）配置页面导航自定义

config = {
    navigationBarTitleText: '',
    navigationBarStyle: 'custom'
  }

（2）引入

<TopBar title='首页' hasBackIcon></TopBar>

效果图

1. 网络状态组件

网络为2g\3g时提示信号弱，无连接时提示网络已断开，wifi\4g\5g时组件隐藏

参数	类型	必填	说明	默认值
无

<NetStatus></NetStatus>

效果图

信号弱

网络断开

1. 空结果组件

结果为空时给出优雅的提示，并引导用户下一步操作

参数	类型	必填	说明	默认值
nothingText	String	x	无结果文本	空空如也
hasGuideBtn	bool	x	是否有引导按钮	false
guideText	String	x	引导按钮文本	立即创建
onGuideHandle	function	x	引导事件	空箭头函数

<Nothing nothingText='空空如也' hasGuideBtn guideText='快去抢购' onGuideHandle={()=>{}}></Nothing>

效果图

1. 数字软键盘

参数	类型	必填	说明	默认值
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>

效果图

1. 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>

效果图

1. 搜索栏位

基础的搜索栏位，通常会跳转到搜索页面

参数	类型	必填	说明	默认值
placeholder	String	x	显示文本	大家都在搜：
onSearchView	function	√	点击搜索事件	空箭头函数

<SearchView placeholder='大家都在搜' onSearchView={()=>{}}></SearchView>

效果图

1. 我是有底线的

参数	类型	必填	说明	默认值
无

<Divider></Divider>

效果图

参与贡献

1. Fork 本仓库
2. 新建 Feat_xxx 分支
3. 提交代码
4. 新建 Pull Request