PhoneGap中文网

标题: 关于ion-content 上下滚动的问题 [打印本页]

作者: sprcen 时间: 2016-3-9 22:53
标题: 关于ion-content 上下滚动的问题
IONIC 新手，在一个页面实现一部分内容固定，一部分可以上下滚动（为刷新列表）的布局
使用了 ion-content 和ion-scroll ,在浏览器上没有问题，但是在手机和模拟器上本应该可以上下拉动的部分不可以滚动了
不知道是不是代码写的有问题，或者是这种写法不合理，请大神给看看，推荐一种合理的实现方法。
我要实现的如图：

绿框部分页面代码如下：SCORLL=FALSE 为了不让第一个DIV滚动，ION-SCROLL为上下拉动数据刷新而写的指令
<ion-view view-title="经验偏方" style="background: #f0f0f0;">
  <ion-content class="padding" scroll="false">
   <div style="width:100%;border-radius: 10px;background: #fff;margin-bottom: 6px;" class="padding">
          <a>经验偏方属于网友的使用经历，未经科学论证，不一定适用于每一个宝宝，请谨慎使用。</a>
   </div>
   <div style="width:100%;border-radius: 10px;background: #fff;margin-bottom: 6px;" class="padding" align="right">
      <input placeholder="input the keyword" style="width: 90%;"><button class="icon-right"><i class="ion-search"></i></button>
   </div>
   <ion-scroll style="height: 100%;overflow: hidden;">
      <ion-list>
            <ion-item class="item-remove-animate  item-icon-right" >
               <h3>烫伤偏方</h3>
               <div>
                  <p>将大白菜。。。。。。。。。。。。。纟纟纟纟xxxxxxxxxxxxxxxxxxxxxxxx</p>
               </div>
               <i class="icon ion-chevron-right icon-accessory"></i>
            </ion-item>
            <ion-item class="item-remove-animate  item-icon-right" >
               <h3>XXCCCCxxxxxx</h3>
               <i class="icon ion-chevron-right icon-accessory"></i>
            </ion-item>
      </ion-list>
   </ion-scroll>

  </ion-content>
</ion-view>

作者: admin 时间: 2016-3-10 09:36
头上面的固定区域用sub header实现，然后改改sub header 的css样式

<div class="bar bar-subheader">

这里是你的头部固定区域的内容
</div>

作者: sprcen 时间: 2016-3-10 09:39

admin 发表于 2016-3-10 09:36
头上面的固定区域用sub header实现，然后改改sub header 的css样式

谢谢大神，我试试

作者: sprcen 时间: 2016-3-10 22:12

admin 发表于 2016-3-10 09:36
头上面的固定区域用sub header实现，然后改改sub header 的css样式

我发现不管怎么改sub header的样式 ion-content 始终顶在最上头，所以里面的内容被 subheader盖往了一部分，要怎么办呢？

代码：
<ion-view view-title="经验偏方" style="background: #f0f0f0;">
<div class="bar bar-subheader padding" >
      dd
</div>
  <ion-content class="padding" start-y="80">
   <ion-list>
      <ion-item class="item-remove-animate  item-icon-right" >
            <h3>烫伤偏方</h3>
            <div>
               <p>将大白菜。。。。。。。。。。。。。纟纟纟纟xxxxxxxxxxxxxxxxxxxxxxxx</p>
            </div>
            <i class="icon ion-chevron-right icon-accessory"></i>
      </ion-item>
      <ion-item class="item-remove-animate  item-icon-right" >
            <h3>XXCCCCxxxxxx</h3>
            <i class="icon ion-chevron-right icon-accessory"></i>
      </ion-item>
   </ion-list>
  </ion-content>
</ion-view>

作者: sprcen 时间: 2016-3-10 23:41

admin 发表于 2016-3-10 09:36
头上面的固定区域用sub header实现，然后改改sub header 的css样式

content 加上 has-subheader ，然后再把TOP值改大，这样可以，但是不同手机的TOP值就不好确实了，愁，不知道这么改是不是正确的做法

作者: 白小白 时间: 2016-10-25 10:23

sprcen 发表于 2016-3-10 23:41
content 加上 has-subheader ，然后再把TOP值改大，这样可以，但是不同手机的TOP值就不好确实了，愁，不 ...

你最后怎么解决的呢，我现在也遇见这个问题了

欢迎光临 PhoneGap中文网 (http://bbs.phonegap100.com/)