我正在尝试让数据 View 滚动到特定位置。我正在 Chrome 中对此进行测试。我有一个 scrollToSelected()
我的数据 View 中的方法计算滚动到的位置,然后调用:
var scroller = this.getScrollable().getScroller();
scroller.scrollTo(0, y, true);
这在我选择触发我的
scrollToSelected()
的列表项时有效。方法。但是在第一次显示数据 View 时,我 select(id)
,这也会触发 scrollToSelected()
.变量 y
计算正确,但滚动不会发生。所以我加了一个 scroller.refresh()
到 scrollTo()
之前的代码,现在它可以工作了。但仅当 Chrome 的开发工具栏打开时。如果我在开发人员工具栏不存在时打开页面,则滚动永远不会发生。有任何想法吗?编辑:
如果有帮助,请提供更多代码。请原谅任何明显的架构错误——Sencha 对我来说是一个完全不同的编码范例。也就是说,欢迎提出建议。
Ext.define('NC.controller.Cook', {
extend: 'Ext.app.Controller',
config: {
control: {
stepsPanel: {
swipe: 'stepSwipe', // this will eventually call goToStep
selectStep: 'goToStep' // if the user directly selects a step (by tap), this will be fired
},
cookPage: {
show: 'setup'
}
},
refs: {
cookPage: 'cookpage',
stepsPanel: 'stepspanel',
}
},
launch: function() {
this.current = 0;
this.last = 0;
},
setup: function() {
var sp = this.getStepsPanel();
sp.select(this.current);
},
stepSwipe: function(dataview, event, node, options, eOpts) {
this.last = this.current;
if (event.direction == 'up') {
if (this.current < dataview.getStore().data.length-1) {
this.current += 1;
}
} else if (event.direction == 'down') {
if (this.current > 0) { this.current -= 1; }
}
// Select the current step. It will trigger the dataView's select
// event which will end up calling goToStep.
dataview.select(this.current);
},
goToStep: function(dataview, record) {
dataview.scrollToSelected();
}
});
Ext.define('NC.view.cook.Steps', {
extend: 'Ext.DataView',
id: 'steps',
xtype: 'stepspanel',
config: {
flex: 1,
activeItem: 1,
itemTpl: '{text}',
selectedCls: 'current',
itemCls: 'step',
scrollable: true,
zIndex: 10,
listeners: {
// this is if the user doesn't swipe but directly selects one of the steps
select: function(dataview, record, eOpts) { dataview.fireEvent('selectStep', dataview, record); }
}
},
initialize: function() {
// set scrolling behaviours off without turning scrollable off
this.getScrollable().getScroller().onDragStart = null;
this.callParent();
var that = this;
this.element.on('swipe', function(event, node, options, eOpts) {
that.fireEvent('swipe', that, event, node, options, eOpts);
});
},
scrollToSelected: function() {
//var toTop = Ext.get(this.element).down(".current").getY();
var thisEl = Ext.get(this.element);
var current = thisEl.down(".current");
var prev = current;
var y = 0;
do {
prev = prev.prev('.step');
if (prev) { y += prev.getHeight(); }
}
while(prev);
y = y - ((thisEl.getHeight()-current.getHeight())/3) + 5000;
var scroller = this.getScrollable().getScroller();
scroller.refresh();
scroller.scrollTo(0, y, false);
}
})
编辑 2:
鉴于“时间问题”的建议,我包装了
select()
在 setup
带有计时器的功能,如下所示:setTimeout(function() { sp.select(0); }, 10);
似乎现在正在工作!
最佳答案
我为此使用了“maxpositionchanged”事件,每当列表的滚动条的高度发生变化时都会触发(因此在加载列表时)
me.getList().getScrollable().getScroller().on('maxpositionchange', function(s, max) {
if (!initialScrollDone && max.y >= me.ROW_HEIGHT*9) {
s.scrollTo(0, 120);
initialScrollDone = true;
}
});
ROW_HEIGHT 是我自己指定的。
关于sencha-touch - Sencha DataView scrollTo() 最初不工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10226808/