react-Q-element

React 私有组件库的搭建 推荐使用 nwb

nwb git地址

npm 地址

使用方法

npm i react-q-element    ||  yarn add react-q-element

// 本地安装依赖包后,就可直接在项目中引入
// ex: 
import { NavBar, TabContainer, TabContainerItem, LazyLoad, ScrollView} from 'react-q-element'

npm start 运行 demo,同时可在 demo 里面查看示例代码

注意点:

1. 在打包过程中 css 样式文件没有打包的情况下, 请添加 npm run build -- --copy-files

2. 同时,如果你是编写一个组件库而不是单个组件的话, 在 index.js 文件中 export xxx from ‘xxx’ , 可能在某些编辑器里面会有语法报错,直接忽略,打包即可,不要纠结

目录结构

├── CONTRIBUTING.md
├── README.md              // readme
├── demo                   // demo 存放地址
│   └── src
├── nwb.config.js          // nwb 基础配置
├── package.json          
├── src                   
│   ├── LazyLoad           // 懒加载
│   ├── NavBar             // 导航条
│   ├── ScrollView         // 上拉加载,下拉属性, scrollview
│   ├── TabContainer       // 左右拖拽,父级
│   ├── TabContainerItem   // 左右拖拽,子级
│   ├── index.js           // 插件 export 设置
│   └── utils             
├── tests
    └── index-test.js

DEMO gif 图展示

API 详解

-- AutoScrollTab

点击后自动左 || 居中对齐

点选元素后会给标签添加一个 'active' 类名, 方便样式更改, 也可以写在 onClick 事件中你来定义一些处理事件

-- LazyLoad

懒加载

效果: 会在 img onload 成功之后 进行一个特效展示, opacity 0 ==>1 的过程

 <LazyLoad src={图片地址} />

-- NavBar

导航条

如果需要修改底部 bar 的样式 , 请通过类名进行样式覆盖, 不过我不推荐, 因为我这个蛮好看的

| 属性 | 类型 | 介绍 | | --------- | -------- | ------------------------------------------------------------ | | data | Array | 数组, bar 内容(当传递 children 的时候就无需传 data),固定格式为 [{ name: '标题1', type: 1 }, { name: '标题2', type: 2 }, { name: '标题3', type: 3 }] | | Index | Number | 选择第 ind 个 bar, 默认第一个 bar(0) | | translate | Object | 当与 TabContainer 组件联动的时候需要接受的 bar 移动距离值, 属性固定{ distance: , transition} | | onSel | Function | 回调函数,用户点击第几个 bar, 返回 item,index ; 基本写法: onSel={(item, index) => { console.log(item. Index)}} | | isAnimate | Boolean | 是否开启点击移动动画, 默认 false |

// navData
const data = [{name: '标题1', type: 1}, {name:'标题2', type: 2}, {name:'标题3', type: 3}]
<NavBar
   translate={NavBarTranslate}
   onSel={(item, index) => {
     console.log('navitem',item, index)
   }}
   data={data}
   index={TabContainerIndex}
 />

// children
 <NavBar
    translate={NavBarTranslate}
    onSel={(item, index) => {
      console.log('navitem', index)
    }}
    index={TabContainerIndex}
      >
        <span>首页</span>
        <span>购物车</span>
        <span>我的</span>
 </NavBar>

-- ScrollView

上拉加载,下拉刷新,scrollview

| 属性 | 类型 | 介绍 | | :------------- | :--------------- | ------------------------------------------------------------ | | isFetch | Boolean | 当页面没有数据的时候,开启 loading 效果,直接触发 topMethod 函数, 默认为 false | | isLoadOver | Boolean | 请求是否完成,可传字符串 || Boolean, Boolean 为 true 时默认展示字段'全部加载完毕', 传字符串就展示字符串 | | requestState | Boolean | 请求是否完成,默认 false | | isPullDown | Boolean | 是否开启下拉刷新, 默认为 false | | isPullUp | Boolean | 是否开启上拉加载, 默认为 false | | topDistance | Number | 下拉刷新 触发 阀值, 默认为 50px | | bottomDistance | Number | 上拉加载 触发 阀值, 默认为 50px | | topMethod | Function | 下拉刷新执行函数 | | bottomMethod | Function | 上拉加载执行函数 | | wrapHeight | Number | (必传)用户自定义高度, 如果没有则自动获取 scorllview 父级的高度 | | pullThreshold | Number | 上拉和下拉 最高可拉的阀值, 默认200 | | scrollX | Boolean | (必传) 横向滚动布局, 默认 false | | scrollY | Boolean | (必传)纵向滚动布局, 默认 false | | upperThreshold | Number | 距离顶部/左边多远时, 触发 onUpper 事件, 默认为 50px | | lowerThreshold | Number | 距离底部/右边多远时, 触发 onLower 事件, 默认为 50px | | onUpper | Function | 滚动到顶部/左边, 会触发 onUpper 事件 | | onLower | Function | 滚动到底部/右边, 会触发 onLower 事件 | | onScroll | Function | 滚动实时触发,传递实时scroll 的值 | | itemIndex | Number | 展示第几个内容, 默认第一个,传下标,从0开始 | | itemKey | String||Number | 展示第几个内容,与 itemIndex 只能存在一个, 需要使用时必须在传递过去的子元素中加入 key 值 | | animateTime | Number | 设置上拉下拉缓动动画完成时间 | | limit | Number | 下拉上拉移动速率调整, 公式: 拖动距离 / limit , 提升体验. 基础值为4 |

// itemKey 和 itemIndex  使用
    <ScrollView
        scrollX={true}
        itemKey={'test2'}
      >
        <div style={{width: '375px', height: '100px', backgroundColor:'skyblue'}} key={'test1'}>
          测试1
        </div>
        <div style={{width: '375px', height: '100px', backgroundColor:'green'}} key={'test2'}>
          测试2
        </div>
        <div style={{width: '375px', height: '100px', backgroundColor:'yellow'}}>
          测试3
        </div>
      </ScrollView>

// 上拉加载  下拉刷新使用
<ScrollView
            isFetch={true}
            scrollY={true}
            isPullDown={true}
            isPullUp={true}
            topMethod={() => {
              return new Promise((resolve, reject) => {
                setTimeout(() => {
                  this.setState({ 
                      list: list.reverse(), 
                      requestState: true }, 
                    () => {
                    resolve()
                  })
                }, 2000);
              })
            }}
            requestState={requestState}
            bottomMethod={() => {
              return new Promise((resolve, reject) => {
                setTimeout(() => {
                  this.setState({
                    list: [...list, '我是节点1', '我是节点2', ...list, '节点3', '节点4'],
                    requestState: true,
                    isLoadOver: '全部加载完毕'
                  }, () => {
                    resolve()
                  })
                }, 1000);
              })
            }}
            onUpper={() => {
              console.warn('到顶了')
            }}
            onLower={() => {
              console.warn('到底了')
            }}
            onScroll={obj => {
              console.warn('无时无刻不在触发', obj)
            }}
            isLoadOver={isLoadOver}
          >
            {list.map((item, index) => {
              return <div style={{ height: '50px', lineHeight: '50px', backgroundColor: 'red', textAlign: 'center' }} key={'item' + index}>
                {item}
              </div>
            })}
          </ScrollView>

-- TabContainer

左右拖拽(必须与 TabContainerItem 搭配使用)

| 属性 | 类型 | 介绍 | | :---------- | -------- | ------------------------------------------------------------ | | interval | Number | 触发自动滚动下一页阀值, 默认为屏幕的1/5 | | index | Number | 展示第 index 页, 默认第一页,从0开始 | | onSel | Function | 回调函数,返回当前页数 | | onTranslate | Function | 回调函数 配合 Navbar 做 bar 联动, 返回一个对象 {distance:Number,//移动距离transition:Boolean// 是否开启动画效果} |

<TabContainer>
            <TabContainerItem style={{ fontSize: '20px', backgroundColor: 'red' ,height: '500px'}}>
            {arr.map(i => {
                return <div key={i}>{i}</div>
            })}
            </TabContainerItem>
            <TabContainerItem style={{ backgroundColor: 'yellow' }}>
            {arr.map(i => {
                return <div key={i}>{i}</div>
            })}
            </TabContainerItem>
            <TabContainerItem style={{ backgroundColor: 'skyblue' }}>
            {arr.map(i => {
                return <div key={i}>{i}</div>
            })}
            </TabContainerItem>
          </TabContainer>

-- TabContainerItem

在 style 属性中传下 height 属性, 不传默认全屏高度

高度必传,但是,当与 ScrollView 连用时,ScrollVIew 高度可不传. 因为 ScrollView 在没有传递 wrapHeight 的时候,自动获取父级的高度