什么叫响应式网站,集团门户,淘宝商城,wordpress 返回顶部 插件需求背景
使用 ScrollView 组件实现轮播图效果#xff0c;该轮播图可以自动向右滑动。有下面两个需求#xff1a;
#xff08;1#xff09;希望用户左右点击的时候#xff0c;视图可以向左/向右滚动#xff1b;
#xff08;2#xff09;希望用户触摸在屏幕的时候该轮播图可以自动向右滑动。有下面两个需求
1希望用户左右点击的时候视图可以向左/向右滚动
2希望用户触摸在屏幕的时候轮播图不自动滚动放开的时候重新计时5秒后向右滚动
3在轮播视图内有一个按钮希望我们在点击按钮并弹出弹窗的时候轮播图停止计时弹窗关闭后再重新计时。
需求分析
1我们可以使用 TouchableWithoutFeedback 组件分别覆盖左右视图当触发onPress的时候进行翻页。
2可以使用 ScrollView 的 onTouchStart 和 onTouchEnd 事件分别表示触摸开始和触摸结束时候的回调。
3事件的回调顺序是 onTouchStart onPress onTouchEnd 所以下面的这种写法会导致当点击share按钮的时候打印如下
onTouchStart
click button, start to stop timer
onTouchEnd
// 执行完异步操作后会打印
start to start timer但我们希望的是能够打印如下
onTouchStart
click button, start to stop timer
// onTouchEnd 不打印
// 执行完异步操作后会打印
start to start timerstate {scrollViewTouchable: true,
};handleSharePress async() {// 停止定时器console.log(click button, start to stop timer);this.handleStopTimer();// 处理 Share 按钮的逻辑// await ....// 打开定时器console.log(start to start timer);this.handleStartTimer();
};render() {const { scrollViewTouchable } this.state;return (ViewScrollViewonTouchStart{scrollViewTouchable ? (){this.handleStartTimer(); console.log(onTouchStart)} : undefined}onTouchEnd{scrollViewTouchable ? (){this.handleStopTimer(); console.log(onTouchEnd)} : undefined}// 其他属性...{/* ScrollView 内容 */}TouchableOpacityonPress{this.handleSharePress}View style{styles.shareButton}{/* Share 按钮内容 */}/View/TouchableOpacity/ScrollView/View);
}解决方法
通过阻止默认事件的方式好像不能解决上述问题因为 TouchableWithoutFeedback 组件不会阻止事件冒泡到父组件。
所以我们考虑用一个state变量来控制 ScrollView 组件的触摸事件是否可用。在点击 “Share” 按钮时将状态变量设置为 false在 onPress 事件完成后将状态变量设置回 true。
state {scrollViewTouchable: true,
};handleSharePress async() {this.setState({ scrollViewTouchable: false });// 处理 Share 按钮的逻辑// await...this.setState({ scrollViewTouchable: true });
};render() {const { scrollViewTouchable } this.state;return (ViewScrollViewonTouchStart{scrollViewTouchable ? this.handleStartTimer : undefined}onTouchEnd{scrollViewTouchable ? this.handleStopTimer : undefined}// 其他属性...{/* ScrollView 内容 */}TouchableOpacityonPress{this.handleSharePress}View style{styles.shareButton}{/* Share 按钮内容 */}/View/TouchableOpacity/ScrollView/View);
}
