WeiUI：Page，Picker的使用

最近公众号开发使用了WeiUI，发现WeiUI的文档真的是！一言难尽。这里我看WeiUI的组件源码，对几个我常用组件的文档进行一些补充。

• 1.<page>
  WeiUI的page组件！对于手机页面需要上拉加载下拉刷新来说，page是很有用处的！这里说上拉加载，用到onLoadMore，infiniteLoader，当infiniteLoader为true时上拉才会出发onLoadMore。
  onLoadMore会返回两个函数，第二个函数是我们需要用到的，结束loading动画的函数。
  例子：

class Detaile extends Component {
    constructor(props) {
      super(props)
      this.state = {
        logs: [],
      }
      this.params = {
        page_no: 1,
        page_size: 10,
      }
      this.has_next = false
    }

    componentDidMount() {
      this.load()
    }

    componentWillReceiveProps(nextProps) {
      if (nextProps !== this.props) {
        if (this.props.userAccountLogs && nextProps.userAccountLogs) {
          this.has_next = nextProps.userAccountLogs.has_next
          this.setState({
            logs: nextProps.userAccountLogs.items,
          })
        }
      }
    }

    load(finish) {
      //获取数据
      this.props.actions.getUserAccountLogs({
        params: this.params,
        success: () => {
          finish && finish()
        }
      })
    }

    handlerMore(resolve, finish) {
      //上拉加载，当还有下一页的时候才会执行，否则infiniteLoader为false不出现loading动画
      if(this.has_next) {
        this.params = {
          page_no: this.params.page_no + 1,
          page_size: this.params.page_size,
        }
        //请求第下一页的数据
        this.load(finish)
      }
    }

    render() {
        return (
          <Page
            infiniteLoader={this.has_next}
            onLoadMore={(resolve, finish) => this.handlerMore(resolve, finish)}
            transition={false}
            ptr={false}
          >
            <div className="walletDetaile">
            {
              this.state.logs && this.state.logs.map(item => (
                <div className="walletMessage" key={item.id}>
                  <div className="left">
                    <span>{item.source}</span>
                    <span className="date">{item.create_time}</span>
                  </div>
                  <span>{item.amount}元</span>
                </div>
              ))
            }
            </div>
          </Page>
        )
    }
}

function mapStateToProps(state) {
  return {
    userAccountLogs: state.userAccountLogs,
  }
}

function mapDispatchToProps(dispatch) {
  return {
    actions: bindActionCreators({
      getUserAccountLogs,
    }, dispatch),
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(Detaile)

• 2.Picker
  选择组件！提供了滚动选择的视图界面，在手机端十分常见好用的界面。Picker的默认头部的按钮是英文的，按ok的时候会出发onChange时间，可以通过actions来改变头部的按钮名称以及作用。但是点击右边按钮的时候就不会再触发onChange事件！
  组件源码：

_this.state = {
            selected: _this.props.defaultSelect ? _this.props.defaultSelect : Array(_this.props.groups.length).fill(-1),
            actions: _this.props.actions.length > 0 ? _this.props.actions : [{
                label: _this.props.lang.leftBtn,
                onClick: function onClick(e) {
                    return _this.handleClose(function () {
                        if (_this.props.onCancel) _this.props.onCancel(e);
                    });
                }
            }, {
                label: _this.props.lang.rightBtn,
                onClick: function onClick(e) {
                    return _this.handleChanges();
                }
            }],
            closing: false
        };

通过这里我们可以看出我们可以不传actions，可以传lang来改变按钮显示的文字，保留点击右边按钮时候的onChange事件。onChange会传出当前选中的label，这样就基本满足了需求。另外这个在滚动的时候会报告一个无法禁止冒泡事件的输出。
源码：

key: 'handleTouchMove',
        value: function handleTouchMove(e) {
            if (!this.state.touching || this.props.items.length <= 1) return;
            if (e.targetTouches[0].identifier !== this.state.touchId) return;

            //prevent move background
            e.preventDefault();

            var pageY = e.targetTouches[0].pageY;
            var diffY = pageY - this.state.ogY;

            this.setState({
                translate: diffY
            });
        }

既然这里阻止不了，我们又不想让背景随着你滚动选择而滚动。这样可以做到：
当picker展示出来的时候给以外层一个style={{overflow: “hidden”}}，隐藏的时候再允许外层滚动。
例子：

<Picker
  show={this.state.show}
  lang={{leftBtn:'关闭',rightBtn:'确定'}}
  groups={[{'items': CAR_LNGTH}]}
  onChange={selected => this.langCheck(selected) 
  onCancel={() => this.setState({show: false})}
/>

const overflow = this.state.show ?  'hidden' : 'scroll'

<div style={{overflow: overflow}}>
  内容
</div>

补充一下，如果picker的defaultSelect不设置，在手机端会报错！