最近公眾號開發(fā)使用了WeiUI勒奇，發(fā)現(xiàn)WeiUI的文檔真的是！一言難盡巧骚。這里我看WeiUI的組件源碼赊颠，對幾個我常用組件的文檔進行一些補充。
- 1.<page>
WeiUI的page組件劈彪！對于手機頁面需要上拉加載下拉刷新來說竣蹦，page是很有用處的！這里說上拉加載沧奴，用到onLoadMore痘括，infiniteLoader，當(dāng)infiniteLoader為true時上拉才會出發(fā)onLoadMore滔吠。
onLoadMore會返回兩個函數(shù)纲菌，第二個函數(shù)是我們需要用到的，結(jié)束loading動畫的函數(shù)屠凶。
例子：
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) {
//獲取數(shù)據(jù)
this.props.actions.getUserAccountLogs({
params: this.params,
success: () => {
finish && finish()
}
})
}
handlerMore(resolve, finish) {
//上拉加載驰后，當(dāng)還有下一頁的時候才會執(zhí)行，否則infiniteLoader為false不出現(xiàn)loading動畫
if(this.has_next) {
this.params = {
page_no: this.params.page_no + 1,
page_size: this.params.page_size,
}
//請求第下一頁的數(shù)據(jù)
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的默認(rèn)頭部的按鈕是英文的，按ok的時候會出發(fā)onChange時間夜涕，可以通過actions來改變頭部的按鈕名稱以及作用犯犁。但是點擊右邊按鈕的時候就不會再觸發(fā)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會傳出當(dāng)前選中的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
});
}
既然這里阻止不了丧诺，我們又不想讓背景隨著你滾動選擇而滾動入桂。這樣可以做到：
當(dāng)picker展示出來的時候給以外層一個style={{overflow: “hidden”}}，隱藏的時候再允許外層滾動驳阎。
例子：
<Picker
show={this.state.show}
lang={{leftBtn:'關(guān)閉',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}}>
內(nèi)容
</div>
補充一下抗愁，如果picker的defaultSelect不設(shè)置，在手機端會報錯呵晚！
