2

我使用以下命令创建了一个项目：

$ ionic start myApp sidemenu

我已经实现了离子列表上方的水平滚动。

以下是我的标记

<ion-scroll direction="x" class="full-width"> 
  <div class="row" >
    <div class="col horizontal-item-margin horizontal-item-padding" ng-repeat="scheduleShowObj in scheduleObjectsList"> 
     <a href="#/app/playlists/{{scheduleShowObj.nid}}">
      <div class="full-width">{{scheduleShowObj.PgmItemDateTime * 1000 | date:'HH:mm a'}}</div>
      <img src={{scheduleShowObj.Thumburl}} class="imgresize"/>
      <div class="full-width">{{scheduleShowObj.PgmTitle}}</div> 
     </a>    
    </div>
  </div> 
</ion-scroll>

以下是我的 CSS：

.horizontal-item-margin {
margin-left: 3%;
margin-right: 3%;
}

.horizontal-item-padding {
padding-left: 3%;
padding-right: 3%;
}

.imgresize{
width: 150px; 
height: auto;
}

.full-width{
width: 100%;
padding: 0px;
}

我面临的问题是：

1.) 我无法水平滚动。

2.) 由于填充和边距，img 标签上方和下方的 div 中的文本字符垂直显示。

4

1 回答 1

8

这是两个示例，显示直接的 html/css，然后将其应用于 ionic。

第一个黄铜钉 HTML/CSS

这是一个非常基本的水平滚动的代码笔，只需使用计划 html/css http://codepen.io/jfspencer/pen/ogZeGM

HTML

<div id="container">
   <div id="content">
      <div id="1" class="box">stuff</div>
      <div id="2" class="box">more</div>
      <div id="3" class="box">to</div>
      <div id="4" class="box">Find</div>
      <div id="5" class="box">Here</div>
   </div>
</div>

CSS

#container{
  overflow-x:scroll;
  height: 80px; 
  width:400px;
}
#content{
   overflow-x:scroll; /* when content is wider than container scrolling will occur on the x axis */
   width:1200px; /* this creates the overflow area in the container */
}
.item{
   /*option a: create block elements and float them left*/
   display:block;  float:left;

   /*option b: use inline elements (or force inline elements)*/
   display: inline;
}

基本思想是这样的： - 创建一个具有某些维度的元素。宽度必须小于放置在其中的元素。这个溢出的内部元素允许一个可滚动区域以及 css overflow:scroll 及其变体。

  • 在第一个元素中创建另一个元素，并使其宽度大于其父元素。

  • 应用溢出：滚动到外部元素。外部元素是它可以容纳的内容更大的元素。所以处理溢出的一种方法是在需要的方向上创建一个滚动，在这种情况下是水平的。

第二将此应用于<ion-scroll>

一切都是一样的，期待一些东西是预先打包的：见这个代码笔 http://codepen.io/jfspencer/pen/JoWqmQ

HTML

<ion-content id="container">
   <ion-scroll id="ionScrollRegion" direction="x">
      <div id="overflowingContent">
         <div class="item" ng-repeat="item in items">{{item.data}}</div>
      </div>
   </ion-scroll>
</ion-content>

CSS

#overflowingContent{
  width: -webkit-max-content;
  width: max-content;
}

.item{
  display:block;
  float:left;
}
  • <ion-scroll>与简单示例中的容器相关联。唯一的区别是方向属性。因为我们知道我们想要滚动，overflow:scroll所以我们需要指定的只是方向。x、y 或 xy。有关所有其他选项，请参阅文档。
  • 内容与以前相同，再次进行了一次优化。由于内容中的东西div很可能是可变的，我们可以应用max-content到内容 div 的 width 属性上，它会为我们计算总宽度。还有其他方法可以做到这一点。
  • 内容中的重复项，div因此无需分配display:block，因为 div 默认为此。因此，所需要做的就是申请float:left并排获取这些物品。
  • <ion-content>确实起作用，因为您的初始宽度将是给定屏幕的大小。<ion-scroll>继承该宽度。
于 2015-01-16T22:59:31.213 回答