最近公众号开发使用了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不设置，在手机端会报错！
