0

我正在使用 Onsen UI v1.0.4

这是代码

<ons-page class="center">
<ons-navigator-toolbar left-button-icon="fa fa-lg fa-bars" on-left-button-click="ons.splitView.toggle();">
    </ons-navigator-toolbar>

<span style="font-size:20px; line-height:30px">
Some Content
    </span>

<ons-scroller>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
</ons-scroller>     
</ons-page>

输出：

在此处输入图像描述

问题：

中的文本<span>丢失，内容不可滚动。对这个问题有什么想法或建议吗？谢谢你。

更新：

我注意到的一件事是，仅当 ons-tabber标签与ons-scroller. 因此，发布我自己的答案以及问题的原因和解决方案。

4

2 回答 2

2

这是我亲身经历的答案。所以如果我错了，请纠正我。

事实： 必须单击或触摸内容区域才能开始滚动它。

问题： 当ons-tabber被添加到页面时，ons-page新div的类tab-bar-content被插入到页面中。这个 div 是透明的，位于内容区域的正上方，窃取内容应该接收的任何点击或触摸。

解决方法： 添加如下样式

.tab-bar-content{
z-index = -1;
}

说明： 此样式将tab-bar-contentdiv 发送到内容区域后面，使其保持打开状态以接受对该区域进行的任何点击。

于 2014-07-10T05:49:12.763 回答
1

ons-scroller 指令占据全屏，并且您的 span 标签被推开。因此，您需要将跨度定位到 ons-scroller 指令中，如下所示。

<ons-scroller>
    <span style="font-size:20px; line-height:30px">
        Some Content
    </span>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>        
    1<br>
</ons-scroller>

Onsen UI 团队说“ons-scroller 指令不会在 Onsen UI 1.1 上占据全屏”。

于 2014-07-09T08:34:13.417 回答