- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在使用 ListView
显示 comments
的列表可能还有 subcomments
如果它们存在于评论中。我正在尝试滚动到特定的 subcomment
通过其 ref
,但我无法让它工作。我使用了 3 个组件(归结如下)来完成此操作:
1.评论
import React, { Component } from 'react'
import { TouchableOpacity, ListView, View, Text } from 'react-native'
import CommentRow from './commentRow'
const ds = new ListView.DataSource({ rowHasChanged: ( r1, r2 ) => r1.id !== r2.id });
const commentsDataSource = [
{id: '1', body: 'comment 1'},{id: '2', body: 'comment 2'},{id: '3', body: 'comment 3'},{id: '4', body: 'comment 4'},{id: '5', body: 'comment 5'},{id: '6', body: 'comment 6'},{id: '7', body: 'comment 7'},{id: '8', body: 'comment 8'},{id: '9', body: 'comment 9'},{id: '10', body: 'comment 10'},
{id: '11', body: 'comment 11'},{id: '12', body: 'comment 12', hasSubComments: true},{id: '13', body: 'comment 13'},{id: '14', body: 'comment 14'},{id: '15', body: 'comment 15'},{id: '16', body: 'comment 16'},{id: '17', body: 'comment 17'},{id: '18', body: 'comment 18'},{id: '19', body: 'comment 19'},{id: '20', body: 'comment 20'}
];
export default class Comments extends Component {
constructor(props) {
super(props);
this.state = {
dataSource: ds.cloneWithRows(commentsDataSource)
};
}
scrollToSubCommentRef(ref) {
this.rowz[ref].measure((ox, oy, width, height, px, py) => {
const offsetY = oy;
this.refs.mainListView.scrollTo({ y: offsetY })
});
}
render() {
return (
<View>
<TouchableOpacity style={{backgroundColor: 'red', padding: 50}}
onPress={() => this.scrollToSubCommentRef('subComment_10')}>
<Text>Scroll to subComment_10!</Text>
</TouchableOpacity>
<ListView ref="mainListView"
renderRow={comment => <CommentRow comment={comment} />}
dataSource={this.state.dataSource}
enableEmptySections={true} />
</View>
)
}
}
import React, { Component } from 'react';
import { View } from 'react-native'
import CommentListItem from './commentListItem'
export default class CommentRow extends Component {
render() {
const comment = this.props.comment;
return (
<View key={`comment_${comment.id}`} style={{overflow: 'hidden'}}>
<CommentListItem comment={comment} />
</View>
)
}
}
import React, { Component } from 'react'
import { View, Text } from 'react-native'
const subComments = [
{id: '1', body: 'subcomment 1'},{id: '2', body: 'subcomment 2'},{id: '3', body: 'subcomment 3'},{id: '4', body: 'subcomment 4'},{id: '5', body: 'subcomment 5'},{id: '6', body: 'subcomment 6'},{id: '7', body: 'subcomment 7'},{id: '8', body: 'subcomment 8'},{id: '9', body: 'subcomment 9'},{id: '10', body: 'subcomment 10'},
{id: '11', body: 'subcomment 11'},{id: '12', body: 'subcomment 12'},{id: '13', body: 'subcomment 13'},{id: '14', body: 'subcomment 14'},{id: '15', body: 'subcomment 15'},{id: '16', body: 'subcomment 16'},{id: '17', body: 'subcomment 17'},{id: '18', body: 'subcomment 18'},{id: '19', body: 'subcomment 19'},{id: '20', body: 'subcomment 20'},
{id: '21', body: 'subcomment 21'},{id: '22', body: 'subcomment 22'},{id: '23', body: 'subcomment 23'},{id: '24', body: 'subcomment 24'},{id: '25', body: 'subcomment 25'},{id: '26', body: 'subcomment 26'},{id: '27', body: 'subcomment 27'},{id: '28', body: 'subcomment 28'},{id: '29', body: 'subcomment 29'},{id: '30', body: 'subcomment 30'},
{id: '31', body: 'subcomment 31'},{id: '32', body: 'subcomment 32'},{id: '33', body: 'subcomment 33'},{id: '34', body: 'subcomment 34'},{id: '35', body: 'subcomment 35'},{id: '36', body: 'subcomment 36'},{id: '37', body: 'subcomment 37'},{id: '38', body: 'subcomment 38'},{id: '39', body: 'subcomment 39'},{id: '40', body: 'subcomment 40'},
{id: '41', body: 'subcomment 41'},{id: '42', body: 'subcomment 42'},{id: '43', body: 'subcomment 43'},{id: '44', body: 'subcomment 44'},{id: '45', body: 'subcomment 45'},{id: '46', body: 'subcomment 46'},{id: '47', body: 'subcomment 47'},{id: '48', body: 'subcomment 48'},{id: '49', body: 'subcomment 49'},{id: '50', body: 'subcomment 50'},
{id: '51', body: 'subcomment 51'},{id: '52', body: 'subcomment 52'},{id: '53', body: 'subcomment 53'},{id: '54', body: 'subcomment 54'},{id: '55', body: 'subcomment 55'},{id: '56', body: 'subcomment 56'},{id: '57', body: 'subcomment 57'},{id: '58', body: 'subcomment 58'},{id: '59', body: 'subcomment 59'},{id: '60', body: 'subcomment 60'},
{id: '61', body: 'subcomment 61'},{id: '62', body: 'subcomment 62'},{id: '63', body: 'subcomment 63'},{id: '64', body: 'subcomment 64'},{id: '65', body: 'subcomment 65'},{id: '66', body: 'subcomment 66'},{id: '67', body: 'subcomment 67'},{id: '68', body: 'subcomment 68'},{id: '69', body: 'subcomment 69'},{id: '70', body: 'subcomment 70'}
];
export default class CommentListItem extends Component {
rowz = []; // to hold subComment refs for scroll access
subCommentsList = () => {
return subComments.map((subComment, i) => {
return (
<View ref={i => this.rowz["subComment_"+subComment.id] = i} key={"subComment_"+subComment.id}>
<Text>{subComment.body}</Text>
</View>
);
});
}
render() {
const comment = this.props.comment;
return (
<View>
<Text>{comment.body}</Text>
{comment.hasSubComments && this.subCommentsList()}
</View>
)
}
}
subComment
通过其
ref
的
subComment_10
,但测量给出了未定义的错误。我明白
this.rowz
不存在于
#1
就在
#3
哪里
subComments
map 遍历每个
subComment
并将其分配给
rowz
数组(我刚刚意识到由于某种原因它没有将
subComment_idhere
分配给
rowz
数组)。
ref
#3
中的分配问题 map 所以
rowz
array 获取所有子注释的列表
refs
所以我们可以滚动到它们?我们怎样才能得到
TouchableOpacity
与
this.scrollToSubCommentRef('subComment_10')
在
#1 滚动
mainListView
至
subComment_10
?
ref
传递给
rowz
数组成功,但您会注意到,它不会滚动到
subComment_10
,而是滚动到
comment 10
的底部.它应该滚动到
subComment_10
的顶部使其成为最显眼的顶部
subComment
点击
TouchableHighlight
:
最佳答案
好的,我运行了您编辑过的代码并找出了您缺少的内容。 refz 数组是在 CommentListItem 类中本地创建的,因此您无法从父类访问它。但是,由于您将从父类进行所有导航,将 prop 数组传递到最底层并填充它,这将是一个更好的方法。这样你就不会得到 this.rowz is undefined 错误并按预期运行你的代码。
export default class Comments extends Component {
constructor(props) {
super(props);
this.rowz = []
this.state = {
dataSource: ds.cloneWithRows(commentsDataSource)
};
}
scrollToSubCommentRef(ref) {
this.rowz[ref].measure((ox, oy, width, height, px, py) => {
const offsetY = oy;
this.refs.mainListView.scrollTo({ y: offsetY })
});
}
render() {
return (
<View>
<TouchableOpacity style={{backgroundColor: 'red', padding: 50}}
onPress={() => this.scrollToSubCommentRef('subComment_10')}>
<Text>Scroll to subComment_10!</Text>
</TouchableOpacity>
<ListView ref="mainListView"
renderRow={comment => <CommentRow refArr={this.rowz} comment={comment} />}
dataSource={this.state.dataSource}
enableEmptySections={true} />
</View>
)
}
}
<CommentRow refArr={this.rowz} comment={comment} />
export default class CommentRow extends Component {
render() {
const comment = this.props.comment;
return (
<View key={`comment_${comment.id}`} style={{overflow: 'hidden'}}>
<CommentListItem refArr={this.props.refArr} comment={comment} />
</View>
)
}
}
<CommentListItem refArr={this.props.refArr} comment={comment} />
export default class CommentListItem extends Component {
rowz = []; // to hold subComment refs for scroll access
subCommentsList = () => {
return subComments.map((subComment, i) => {
return (
<View ref={i => this.props.refArr["subComment_"+subComment.id] = i} key={"subComment_"+subComment.id}>
<Text>{subComment.body}</Text>
</View>
);
});
}
render() {
const comment = this.props.comment;
return (
<View>
<Text>{comment.body}</Text>
{comment.hasSubComments && this.subCommentsList()}
</View>
)
}
}
<View ref={i => this.props.refArr["subComment_"+subComment.id] = i} key={"subComment_"+subComment.id}>
关于react-native - React Native - ListView 滚动到嵌套的子引用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42016509/
如果附加了 'not-scroll' 类,我希望我的 body 不滚动,否则它应该正常工作。 我已经搜索这个问题两天了,但找不到任何适合我的解决方案。 我想要的是向 body 添加一个 class,并
我发现似乎是 iOS Safari 中的错误(我正在 iOS 8 上进行测试)。当绝对定位的 iFrame 漂浮在一段可滚动内容上方时,滚动 iFrame 也会滚动下面的内容。以下 HTML (ava
我有以下代码来显示一系列投资组合图片,这些图片以 SVG 格式存储在滚动 div 中: 在 Safari 中滚动使用两根手指或鼠标滚轮当光标位于 SVG 之一上时不起作用。 该页
我想用 javascript 做的是: 一旦你向下滚动页面,将#sidebar-box-fixed 的位置从 position: relative; 更改为定位:固定;。改回position:rela
我对 Elasticsearch 的滚动功能有点困惑。在 elasticsearch 中,每当用户在结果集上滚动时,是否可以每次调用搜索 API?来自文档 "search_type" => "scan
我试图做到这一点,以便当我向上或向下滚动页面时,它会运行不同的相应功能。我发现了一个类似的问题here但我已经尝试了他们的答案并且没有运气。 注意:此页面没有正常显示的滚动条。没有地方可以滚动。 bo
(C语言,GTK库) 在我的表单上,我有一个 GtkDrawingArea 小部件,我在上面使用 Cairo 绘制 GdkPixbufs(从文件加载)。我想要完成的是能够在窗口大小保持固定的情况下使用
最近我一直在尝试创建一个拉到(刷新,加载更多)swiftUI ScrollView !!,灵感来自 https://cocoapods.org/pods/SwiftPullToRefresh 我正在努
我正在开发一个应用程序,其中有两个带有可放置区域的列表和一个带有可拖动项目的侧面菜单。 当我滚动屏幕时,项目的位置困惑。 我试图在谷歌上寻找一些东西,最后得到了这个问题:jQuery draggabl
我在 UIWebView 中加载了一个 HTML 表单,而我的 UIWebView 恰好从 View 的中间开始并扩展。我必须锁定此 webView 不滚动并将其放在 ScrollView 之上以允许
如何在每个元素而不是整个元素上应用淡入淡出(与其高度相比)? HTML: CSS: * { padding: 0; margin: 0; box-sizing: border
我想使用带有垂直轴的 PageView 并使用鼠标滚动在页面之间移动,但是当我使用鼠标滚动时页面不滚动...仅页面单击并向上/向下滑动时滚动。 有什么办法吗? 我想保留属性 pageSnapping:
我制作这个程序是为了好玩,但我被卡住了,因为程序在屏幕外运行。如何在不完全更改代码的情况下实现滚动条。 public static void main(String args[]) throws IO
我想使用带有垂直轴的 PageView 并使用鼠标滚动在页面之间移动,但是当我使用鼠标滚动时页面不滚动...仅页面单击并向上/向下滑动时滚动。 有什么办法吗? 我想保留属性 pageSnapping:
很难说出这里问的是什么。这个问题是含糊的、模糊的、不完整的、过于宽泛的或修辞性的,无法以目前的形式得到合理的回答。如需帮助澄清此问题以便重新打开它,visit the help center 。 已关
使用 jquery 技术从 css-tricks.com 获得滚动/跟随侧边栏,如果您不知道我在说什么,这里是代码: $(function() { var $sidebar = $
我是 jQuery Mobile 新手。我需要向我的应用程序添加 Facebook 滑动面板功能。 我经历了 sliding menu panel ,它工作正常,但我在菜单面板中的内容超出了窗口大小,
有没有办法在 js 或 jQuery 或任何其他工具中检测 ctrl + 滚动。我正在尝试执行一些动态布局代码,我需要检测不同分辨率下的屏幕宽度,我通过使用 setTimeout() 的计时器实现了这
我有一部分html代码:
我想控制 RichTextBox 滚动,但在控件中找不到任何方法来执行此操作。 这样做的原因是我希望当鼠标光标位于 RichTextBox 控件上时鼠标滚轮滚动有效(它没有事件焦点:鼠标滚轮事件由表单
我是一名优秀的程序员,十分优秀!