隐藏SAPUI5页面中的滚动条

时间:2014-09-16 11:22:38

标签: javascript scrollbar sapui5

我有一个问题。

我有一个要在页面中显示的推文列表。对于移动设备,我不想显示正确的垂直滚动条。

我用它的滑块和推文列表构建页面。然后我把这个页面放在一个滚动容器中。

然后我返回滚动容器。

代码是这样的:

sap.ui.jsview("ttest.initView", {

/** Specifies the Controller belonging to this View. 
* In the case that it is not implemented, or that "null" is returned, this View does not have a Controller.
* @memberOf ttest.initView
*/ 
getControllerName : function() {
    return "ttest.initView";
},

/** Is initially called once after the Controller has been instantiated. It is the place where the UI is constructed. 
* Since the Controller is given to this method, its event handlers can be attached right away. 
* @memberOf ttest.initView
*/ 
createContent : function(oController) {

    var oTweetList = new sap.m.List("items", {  
          threshold: 2,  
          inset : false,    
          showUnread : true,  
          scrollToLoad : true,   

          columns : [
             new sap.m.Column({  
                styleClass : "data",  
                hAlign : "Left",  
             })
          ]  
    });

    var oSlider = new sap.m.Slider({
        id: "tweetSlider",
        width: '100%',
        min: 0,

        change : function(oEvent){
            //Update tweet list
            var startIndex = 0;
            var endIndex = this.getValue();
            oController.updateTweetList("update", startIndex, endIndex);
        }
    });

    var oPage = new sap.m.Page({
        title: "Tweet list for @matteorenzi",
        enableScrolling : false,
        headerContent: [
            new sap.m.Button({
                icon: "sap-icon://refresh",
                press : function(oEvent){
                    //Update tweet list with all tweets
                    oController.updateTweetList("first", "", "");
                }
            })
        ],
        content: [
            oSlider,
            oTweetList
        ]
    });

    var oScroller = new sap.m.ScrollContainer({
        vertical : true,
        horizontal : false,
        content : [
                    oPage
        ]
    });

    oEventBus.subscribe("it.besolution.PopulateList", "Go", function(chId, evId, data){
        var template = new sap.m.ColumnListItem({  
            type : "Navigation", 
            cells : [  
               new it.besolution.Tweet({
                   user :       "{user/name}",
                   username :   "{user/screen_name}",   
                   tweet :      "{text}",

                   press : function(oEvent){    
                       var path = this.getBindingContext().getPath();
                       sap.ui.getCore().byId("iduserDetails").setModel(oGlobalModel).bindElement(path);
                       app.to("iduserDetails");
                   }
               })
            ]  
        });

        oSlider.setMax(oGlobalModel.getProperty("/size") - 1);

        oTweetList.setModel(oGlobalModel);
        oTweetList.bindAggregation("items", "/tweets/", template);
    });

    return oScroller;
}

});

页面未加载。我不知道该怎么做。列表为何不可见?

显然,如果我删除滚动容器并返回oPage元素,则列表可见。

为什么呢?如何编写代码以显示没有滚动条的列表?

1 个答案:

答案 0 :(得分:0)

如果您不想显示正确的垂直滚动条。有一个名为enableScrolling的属性。您确实想要使用ScrollContainer,将其设为Page内容,而不是相反。

enableScrolling default: true   

Page是否采取特殊措施使页面内容可滚动并保持标题固定。 如果设置为false,则根本不会滚动;出于性能原因,强烈建议在不需要滚动时使用。页面仅允许垂直滚动,因为通常不鼓励对整页内容进行水平滚动。 如果仍需要实现,请禁用页面滚动并使用ScrollContainer作为页面的整页内容。这允许您自由配置滚动。它还可用于创建(垂直滚动)Pages的水平滚动子区域。