Question

创建移动Dojo应用程序并遇到以下问题。我在这里和其他地方搜索过，并没有看到其他人有这个问题。我是Dojo的新手，所以可能只是因为我做错了。

以下是程序化行为：在第一个面板（div“one”）中，单击“+”按钮;跳过Div“2”并将div“3”转换为视图;单击“取消”，再次跳过div“two”，div“one”转换回视图。这应该是应有的。

以下是问题：当div“one”转换回视图时，会出现浏览器滚动条，当您滚动到底部时仍然可以看到div“three”。这只发生过一次。再次单击“+”，然后再次单击“取消”，div“3”将隐藏，因为它应该是没有滚动条出现。在HTML中，如果切换div“two”和“three”，则不会发生不正确的行为。不幸的是，这不是我的解决方案，因为应用程序需要按任何给定的顺序进行转换。

在Chrome的开发工具中，如果您观看HTML元素，您会注意到div“three”的“visibility”属性在第二次单击“Cancel”之前不会返回“hidden”。 / p>

我的猜测是它与我以编程方式创建视图的方式有关。任何有关这方面的帮助将不胜感激。

HTML（test.html）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <script src="//ajax.googleapis.com/ajax/libs/dojo/1.8.1/dojo/dojo.js" data-dojo-config="async: true"></script>
    <script type="text/javascript" src="script/test.js"></script>
</head>
<body>
    <div id="one"></div>
    <div id="two"></div>
    <div id="three"></div>
</body>
</html>

JavaScript（test.js）

require([
'dojo/ready',                       'dijit/registry',               'dojox/mobile/parser',
'dojox/mobile/deviceTheme',         'dojox/mobile/compat',          'dojox/mobile/Icon',
'dojox/mobile/ScrollableView',      'dojox/mobile/Heading',         'dojox/mobile/ListItem',
'dojox/mobile/EdgeToEdgeList',      'dojox/mobile/ToolBarButton',   'dojox/mobile'
],
function(ready, registry, parser, deviceTheme, compat, Icon, ScrollableView, Heading, ListItem, EdgeToEdgeList, ToolBarButton, mobile){
ready(function(){
    var view_activity_edit = new ScrollableView(null, 'three');
    var view_activity_view = new ScrollableView(null, 'two');

    var view_activities = new ScrollableView(null, 'one');
        view_activities.selected = true;

        var heading = new Heading({
            label: 'Activities'
        });
        view_activities.addChild(heading);

            var button = new ToolBarButton({
                icon: 'mblDomButtonWhitePlus',
                style: 'float:right;',
                moveTo: 'three',
                onClick: function(e){
                    click_activity_edit(e,0);
                }
            });
            heading.addChild(button);


        var list_activity = new EdgeToEdgeList({
            id: 'activity-list'
        });
        view_activities.addChild(list_activity);

        view_activities.startup();
});

this.click_activity_edit = function(e, activityid) {
    var view_activity_edit = registry.byId('three');
        view_activity_edit.destroyDescendants(false);

        var heading = new Heading({
            label: 'Activity'
        });
        view_activity_edit.addChild(heading);

            var button = new ToolBarButton({
                label: 'Cancel',
                moveTo: 'one',
                transitionDir: -1,
                arrow: 'left'
            });
            heading.addChild(button);

    view_activity_edit.startup();
};

parser.parse();
});

Answer 1

这与渲染视图的方式有关。如果在将额外的工具栏按钮添加到第3视图后，在第2视图上调用 startup（）。

添加：

registry.byId('two').startup();

到 click_activity_edit（）函数的末尾，它会起作用。请参阅我为您的代码创建的the jsFiddle。

我想解释为什么会这样，但我不是百分百肯定。一旦我有时间思考，我可以补充说明;或者也许对滚动视图内部工作有更透彻理解的人会给出详细的答案。

在Dojo.mobile中跳过ScrollableView时，视图不会隐藏

1 个答案: