[英]Hide scrollbar in SAPUI5 page
I have a problem. 我有个问题。
I have a list of tweets to show in a page. 我有要在页面中显示的推文列表。 For mobile devices I don't want to show the right vertical scrollbar. 对于移动设备,我不想显示右侧的垂直滚动条。
I've build the page, with its slider and its tweets list. 我已经建立了带有滑块和推文列表的页面。 Then I put this page in a scroll container. 然后我将此页面放在滚动容器中。
Then I return the scroll container. 然后我返回滚动容器。
The code is this: 代码是这样的:
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;
}
});
The page didn't load. 页面未加载。 I don't know how to do. 我不知道该怎么办。 Why the list is invisible? 为什么列表不可见?
Obviously, if I remove the scroll container and I return the oPage element, the list is visible. 显然,如果删除滚动容器并返回oPage元素,则该列表可见。
Why? 为什么? How I have to write my code to show the list without the scrollbar? 如何编写代码以显示没有滚动条的列表?
If you don't want to show the right vertical scrollbar. 如果您不想显示右侧的垂直滚动条。 There is a property called enableScrolling
.And you really want to use ScrollContainer
, put it as Page
content, not the other way around. 有一个名为enableScrolling
的属性。您确实要使用ScrollContainer
,将其作为Page
内容放置,而不是相反。
enableScrolling default: true
Whether the Page takes special measures to make page content scrollable and keep headers fixed. Page是否采取特殊措施使页面内容可滚动并保持标题固定。 If set to false, there will be no scrolling at all ; 如果设置为false,将完全不滚动 ; for performance reasons this is highly recommended when scrolling is not needed. 出于性能原因,强烈建议在不需要滚动时推荐这样做。 The Page only allows vertical scrolling because horizontal scrolling is discouraged in general for full-page content. 页面仅允许垂直滚动,因为通常不建议对整页内容进行水平滚动。 If it still needs to be achieved, disable the Page scrolling and use a ScrollContainer as full-page content of the Page . 如果仍然需要实现,请禁用Page滚动并使用ScrollContainer作为Page的全页内容 。 This allows you to freely configure scrolling. 这使您可以自由配置滚动。 It can also be used to create horizontally-scrolling sub-areas of (vertically-scrolling) Pages. 它也可以用于创建(垂直滚动)页面的水平滚动子区域。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.