ons-scroller标签在Onsen UI中不起作用

Question

我正在使用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一起使用时才会出现此问题。所以发布我自己的答案，原因和解决问题。

Answer 1

这可以从我自己的经验中得到回答。如果我错了，请纠正我。

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

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

<强>解决方案： 添加以下样式

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

<强>说明： 此样式将tab-bar-content div发送到内容区域后面，使其处于打开状态以接受对该区域所做的任何点击。

Answer 2

ons-scroller指令占据整个屏幕，你的span标记被推开了。所以你需要将你的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 Team说＆＃34; ons-scroller指令不会占用Onsen UI 1.1＆＃34;。

的全屏