Skip to content

Commit 890c0ce

Browse files
author
yuji
committed
ensure onMomentumScrollEnd synchronous update this.index
Note: `this.setState` is async, so I call the `onMomentumScrollEnd` in setTimeout to ensure synchronous update `this.index`.
1 parent fb60a22 commit 890c0ce

File tree

4 files changed

+43
-23
lines changed

4 files changed

+43
-23
lines changed

‎dist/index.js‎

Lines changed: 16 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -219,20 +219,24 @@ exports['default'] = _React$StyleSheet$Text$View$ScrollView$TouchableOpacity2['d
219219
* @param {object} e native event
220220
*/
221221
onScrollBegin: function onScrollBegin(e) {
222+
var _this2 = this;
223+
222224
// update scroll state
223225
this.setState({
224226
isScrolling: true
225227
});
226228

227-
this.props.onScrollBeginDrag && this.props.onScrollBeginDrag.call(this, e);
229+
this.setTimeout(function () {
230+
_this2.props.onScrollBeginDrag && _this2.props.onScrollBeginDrag.call(_this2, e);
231+
});
228232
},
229233

230234
/**
231235
* Scroll end handle
232236
* @param {object} e native event
233237
*/
234238
onScrollEnd: function onScrollEnd(e) {
235-
var _this2 = this;
239+
var _this3 = this;
236240

237241
// update scroll state
238242
this.setState({
@@ -241,12 +245,14 @@ exports['default'] = _React$StyleSheet$Text$View$ScrollView$TouchableOpacity2['d
241245

242246
this.updateIndex(e.nativeEvent.contentOffset, this.state.dir);
243247

248+
// Note: `this.setState` is async, so I call the `onMomentumScrollEnd`
249+
// in setTimeout to ensure synchronous update `index`
244250
this.setTimeout(function () {
245-
_this2.autoplay();
246-
});
251+
_this3.autoplay();
247252

248-
// if `onMomentumScrollEnd` registered will be called here
249-
this.props.onMomentumScrollEnd && this.props.onMomentumScrollEnd.call(this, e);
253+
// if `onMomentumScrollEnd` registered will be called here
254+
_this3.props.onMomentumScrollEnd && _this3.props.onMomentumScrollEnd.call(_this3, e);
255+
});
250256
},
251257

252258
/**
@@ -267,6 +273,7 @@ exports['default'] = _React$StyleSheet$Text$View$ScrollView$TouchableOpacity2['d
267273
} // Note: if touch very very quickly and continuous,
268274
// the variation of `index` more than 1.
269275
index = index + diff / step;
276+
270277
if (this.props.loop) {
271278
if (index <= -1) {
272279
index = state.total - 1;
@@ -351,7 +358,7 @@ exports['default'] = _React$StyleSheet$Text$View$ScrollView$TouchableOpacity2['d
351358
},
352359

353360
renderButtons: function renderButtons() {
354-
var _this3 = this;
361+
var _this4 = this;
355362

356363
var nextButton = this.props.nextButton || _React$StyleSheet$Text$View$ScrollView$TouchableOpacity2['default'].createElement(
357364
_React$StyleSheet$Text$View$ScrollView$TouchableOpacity.Text,
@@ -371,7 +378,7 @@ exports['default'] = _React$StyleSheet$Text$View$ScrollView$TouchableOpacity2['d
371378
_React$StyleSheet$Text$View$ScrollView$TouchableOpacity2['default'].createElement(
372379
_React$StyleSheet$Text$View$ScrollView$TouchableOpacity.TouchableOpacity,
373380
{ onPress: function () {
374-
return !(!_this3.props.loop && _this3.state.index == 0) && _this3.scrollTo.call(_this3, -1);
381+
return !(!_this4.props.loop && _this4.state.index == 0) && _this4.scrollTo.call(_this4, -1);
375382
} },
376383
_React$StyleSheet$Text$View$ScrollView$TouchableOpacity2['default'].createElement(
377384
_React$StyleSheet$Text$View$ScrollView$TouchableOpacity.View,
@@ -382,7 +389,7 @@ exports['default'] = _React$StyleSheet$Text$View$ScrollView$TouchableOpacity2['d
382389
_React$StyleSheet$Text$View$ScrollView$TouchableOpacity2['default'].createElement(
383390
_React$StyleSheet$Text$View$ScrollView$TouchableOpacity.TouchableOpacity,
384391
{ onPress: function () {
385-
return !(!_this3.props.loop && _this3.state.index == _this3.state.total - 1) && _this3.scrollTo.call(_this3, 1);
392+
return !(!_this4.props.loop && _this4.state.index == _this4.state.total - 1) && _this4.scrollTo.call(_this4, 1);
386393
} },
387394
_React$StyleSheet$Text$View$ScrollView$TouchableOpacity2['default'].createElement(
388395
_React$StyleSheet$Text$View$ScrollView$TouchableOpacity.View,

‎examples/examples/index.js‎

Lines changed: 16 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -219,20 +219,24 @@ exports['default'] = _React$StyleSheet$Text$View$ScrollView$TouchableOpacity2['d
219219
* @param {object} e native event
220220
*/
221221
onScrollBegin: function onScrollBegin(e) {
222+
var _this2 = this;
223+
222224
// update scroll state
223225
this.setState({
224226
isScrolling: true
225227
});
226228

227-
this.props.onScrollBeginDrag && this.props.onScrollBeginDrag.call(this, e);
229+
this.setTimeout(function () {
230+
_this2.props.onScrollBeginDrag && _this2.props.onScrollBeginDrag.call(_this2, e);
231+
});
228232
},
229233

230234
/**
231235
* Scroll end handle
232236
* @param {object} e native event
233237
*/
234238
onScrollEnd: function onScrollEnd(e) {
235-
var _this2 = this;
239+
var _this3 = this;
236240

237241
// update scroll state
238242
this.setState({
@@ -241,12 +245,14 @@ exports['default'] = _React$StyleSheet$Text$View$ScrollView$TouchableOpacity2['d
241245

242246
this.updateIndex(e.nativeEvent.contentOffset, this.state.dir);
243247

248+
// Note: `this.setState` is async, so I call the `onMomentumScrollEnd`
249+
// in setTimeout to ensure synchronous update `index`
244250
this.setTimeout(function () {
245-
_this2.autoplay();
246-
});
251+
_this3.autoplay();
247252

248-
// if `onMomentumScrollEnd` registered will be called here
249-
this.props.onMomentumScrollEnd && this.props.onMomentumScrollEnd.call(this, e);
253+
// if `onMomentumScrollEnd` registered will be called here
254+
_this3.props.onMomentumScrollEnd && _this3.props.onMomentumScrollEnd.call(_this3, e);
255+
});
250256
},
251257

252258
/**
@@ -267,6 +273,7 @@ exports['default'] = _React$StyleSheet$Text$View$ScrollView$TouchableOpacity2['d
267273
} // Note: if touch very very quickly and continuous,
268274
// the variation of `index` more than 1.
269275
index = index + diff / step;
276+
270277
if (this.props.loop) {
271278
if (index <= -1) {
272279
index = state.total - 1;
@@ -351,7 +358,7 @@ exports['default'] = _React$StyleSheet$Text$View$ScrollView$TouchableOpacity2['d
351358
},
352359

353360
renderButtons: function renderButtons() {
354-
var _this3 = this;
361+
var _this4 = this;
355362

356363
var nextButton = this.props.nextButton || _React$StyleSheet$Text$View$ScrollView$TouchableOpacity2['default'].createElement(
357364
_React$StyleSheet$Text$View$ScrollView$TouchableOpacity.Text,
@@ -371,7 +378,7 @@ exports['default'] = _React$StyleSheet$Text$View$ScrollView$TouchableOpacity2['d
371378
_React$StyleSheet$Text$View$ScrollView$TouchableOpacity2['default'].createElement(
372379
_React$StyleSheet$Text$View$ScrollView$TouchableOpacity.TouchableOpacity,
373380
{ onPress: function () {
374-
return !(!_this3.props.loop && _this3.state.index == 0) && _this3.scrollTo.call(_this3, -1);
381+
return !(!_this4.props.loop && _this4.state.index == 0) && _this4.scrollTo.call(_this4, -1);
375382
} },
376383
_React$StyleSheet$Text$View$ScrollView$TouchableOpacity2['default'].createElement(
377384
_React$StyleSheet$Text$View$ScrollView$TouchableOpacity.View,
@@ -382,7 +389,7 @@ exports['default'] = _React$StyleSheet$Text$View$ScrollView$TouchableOpacity2['d
382389
_React$StyleSheet$Text$View$ScrollView$TouchableOpacity2['default'].createElement(
383390
_React$StyleSheet$Text$View$ScrollView$TouchableOpacity.TouchableOpacity,
384391
{ onPress: function () {
385-
return !(!_this3.props.loop && _this3.state.index == _this3.state.total - 1) && _this3.scrollTo.call(_this3, 1);
392+
return !(!_this4.props.loop && _this4.state.index == _this4.state.total - 1) && _this4.scrollTo.call(_this4, 1);
386393
} },
387394
_React$StyleSheet$Text$View$ScrollView$TouchableOpacity2['default'].createElement(
388395
_React$StyleSheet$Text$View$ScrollView$TouchableOpacity.View,

‎examples/examples/swiper.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -60,11 +60,12 @@ var swiper = React.createClass({
6060
</Swiper>
6161

6262
<Swiper style={styles.wrapper} height={240}
63+
onMomentumScrollEnd={function(){console.log('this.state.index:', this.state.index)}}
6364
dot={<View style={{backgroundColor:'rgba(0,0,0,.2)', width: 5, height: 5,borderRadius: 4, marginLeft: 3, marginRight: 3, marginTop: 3, marginBottom: 3,}} />}
6465
activeDot={<View style={{backgroundColor: '#000', width: 8, height: 8, borderRadius: 4, marginLeft: 3, marginRight: 3, marginTop: 3, marginBottom: 3,}} />}
6566
paginationStyle={{
6667
bottom: -23, left: null, right: 10,
67-
}} loop={false}>
68+
}} loop={true}>
6869
<View style={styles.slide} title={<Text numberOfLines={1}>Aussie tourist dies at Bali hotel</Text>}>
6970
<Image style={styles.image} source={{uri: 'http://c.hiphotos.baidu.com/image/w%3D310/sign=0dff10a81c30e924cfa49a307c096e66/7acb0a46f21fbe096194ceb468600c338644ad43.jpg'}} />
7071
</View>

‎src/index.js‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -226,7 +226,9 @@ export default React.createClass({
226226
isScrolling: true
227227
})
228228

229-
this.props.onScrollBeginDrag && this.props.onScrollBeginDrag.call(this, e)
229+
this.setTimeout(() => {
230+
this.props.onScrollBeginDrag && this.props.onScrollBeginDrag.call(this, e)
231+
})
230232
},
231233

232234
/**
@@ -242,12 +244,14 @@ export default React.createClass({
242244

243245
this.updateIndex(e.nativeEvent.contentOffset, this.state.dir)
244246

247+
// Note: `this.setState` is async, so I call the `onMomentumScrollEnd`
248+
// in setTimeout to ensure synchronous update `index`
245249
this.setTimeout(() => {
246250
this.autoplay()
247-
})
248251

249-
// if `onMomentumScrollEnd` registered will be called here
250-
this.props.onMomentumScrollEnd && this.props.onMomentumScrollEnd.call(this, e)
252+
// if `onMomentumScrollEnd` registered will be called here
253+
this.props.onMomentumScrollEnd && this.props.onMomentumScrollEnd.call(this, e)
254+
})
251255
},
252256

253257
/**
@@ -268,6 +272,7 @@ export default React.createClass({
268272
// Note: if touch very very quickly and continuous,
269273
// the variation of `index` more than 1.
270274
index = index + diff / step
275+
271276
if(this.props.loop) {
272277
if(index <= -1) {
273278
index = state.total - 1

0 commit comments

Comments
 (0)