无法使用离子滚动水平滚动

Question

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

$ 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 中的文本字符垂直显示。

Answer 1

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

第一个黄铜钉 HTML/CSS

这里是一个很基础的水平滚动的代码笔，只是使用plan 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;
}

基本思路是这样的： - 创建一个具有某些维度的元素。宽度必须小于放置在其中的元素。这个 overflowing 的内部元素允许滚动区域以及 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 的宽度属性，它为我们计算总宽度。还有其他方法可以做到这一点。
• div上的内容中的重复项，所以不需要分配display:block，因为divs默认是这个。因此，只需申请 float:left 即可并排获取项目。
• <ion-content> 确实起作用，因为您的初始宽度将是给定屏幕的大小。 <ion-scroll> 继承了该宽度。