sprcen 发表于 2016-3-9 22:53:27

关于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">
          &nbsp;&nbsp;&nbsp;&nbsp;<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-animateitem-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-animateitem-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:57

头上面的固定区域用sub header实现，然后改改sub header 的css样式


<div class="bar bar-subheader">

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

sprcen 发表于 2016-3-10 09:39:35

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




谢谢大神，我试试

sprcen 发表于 2016-3-10 22:12:58

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-animateitem-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-animateitem-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:45

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




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

白小白 发表于 2016-10-25 10:23:59

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

你最后怎么解决的呢，我现在也遇见这个问题了
页: [1]
查看完整版本: 关于ion-content 上下滚动的问题