taro_widgets v1.0.4

taro_widgets

介绍

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

组件清单

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

安装教程

1. npm i taro_widgets

OR

2. yarn add taro_widgets

使用说明

1. 自定义顶部导航栏

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

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

（2）引入

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

效果图

2. 网络状态组件

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

<NetStatus></NetStatus>

效果图

信号弱

网络断开

3. 空结果组件

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

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

效果图

4. 数字软键盘

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>

效果图

5. tip提示组件(仿头条)

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>

效果图

6. 搜索栏位

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

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

效果图

7. 我是有底线的

<Divider></Divider>

效果图

参与贡献

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