I cannot make IScroll to work with React.js.
var SubHeaderMenu = React.createClass({
getDefaultProps: function () {
return {items: []};
},
componentDidMount: function () {
if (this.props.items.length && this.isMounted()) {
this.scroll = new IScroll(this.getDOMNode(), {
scrollX: true,
scrollY: false,
mouseWheel: true,
});
}
},
render: function () {
var itemNodes = this.props.items.map(function (item) {
return <div key={item.name} className="subheader-item">{item.name}</div>;
}.bind(this));
return (
<div className="bar bar-standard bar-header-secondary subheader">
<div className="scroller" ref="scroller">
<div className="scroller-inner" ref="scrollerInner">{itemNodes}</div>
</div>
</div>
);
}
});
SubHeaderMenu component receive list of items as props. This works fine if I set up width for .scroller
in CSS:
.scroller { width: 600px; ... }
But without width in CSS it doesn't scroll..
How to handle dynamic width of every list item?
There is a npm-package for react and IScroll:
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.