1 Star 2 Fork 0

黄开汉 / taro_widgets

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
README.md 5.17 KB
一键复制 编辑 原始数据 按行查看 历史
黄开汉 提交于 2020-06-15 14:20 . update README.md.

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>
效果图

输入图片说明

JavaScript
1
https://gitee.com/huang_kaihan/taro_widgets.git
git@gitee.com:huang_kaihan/taro_widgets.git
huang_kaihan
taro_widgets
taro_widgets
master

搜索帮助