PhoneGap中文网

 找回密码
 立即注册
查看: 41589|回复: 5
打印 上一主题 下一主题

关于ion-content 上下滚动的问题

[复制链接]

7

主题

20

帖子

93

积分

注册会员

Rank: 2

积分
93
跳转到指定楼层
楼主
发表于 2016-3-9 22:53:27 | 只看该作者 |只看大图 回帖奖励 |倒序浏览 |阅读模式
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-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>

回复

使用道具 举报

493

主题

2035

帖子

6894

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
6894
沙发
发表于 2016-3-10 09:36:57 | 只看该作者
头上面的固定区域用sub header实现,然后改改sub header 的css样式


<div class="bar bar-subheader">

      这里是你的头部固定区域的内容
    </div>
回复 支持 反对

使用道具 举报

7

主题

20

帖子

93

积分

注册会员

Rank: 2

积分
93
板凳
 楼主| 发表于 2016-3-10 09:39:35 | 只看该作者
admin 发表于 2016-3-10 09:36
头上面的固定区域用sub header实现,然后改改sub header 的css样式

谢谢大神,我试试
回复 支持 反对

使用道具 举报

7

主题

20

帖子

93

积分

注册会员

Rank: 2

积分
93
地板
 楼主| 发表于 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-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>


回复 支持 反对

使用道具 举报

7

主题

20

帖子

93

积分

注册会员

Rank: 2

积分
93
5#
 楼主| 发表于 2016-3-10 23:41:45 | 只看该作者
admin 发表于 2016-3-10 09:36
头上面的固定区域用sub header实现,然后改改sub header 的css样式

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

使用道具 举报

1

主题

4

帖子

19

积分

新手上路

Rank: 1

积分
19
6#
发表于 2016-10-25 10:23:59 | 只看该作者
sprcen 发表于 2016-3-10 23:41
content 加上 has-subheader ,然后再把TOP值改大,这样可以,但是不同手机的TOP值就不好确实了,愁,不 ...

你最后怎么解决的呢,我现在也遇见这个问题了
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关闭

站长推荐 上一条 /1 下一条

ionic4视频教程

Archiver|手机版|小黑屋| PhoneGap中文网 ( 京ICP备13027796号-1 )  

GMT+8, 2024-11-15 14:28 , Processed in 0.067651 second(s), 35 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表