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

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，然后将其应用于离子。

First Brass Tacks 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;
}

基本理念是这样的： - 创建具有某些尺寸的元素。宽度必须小于放在其中的元素。 溢出的内部元素允许可滚动区域以及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>与简单示例中的容器相关联。唯一的区别是direction属性。既然我们知道要滚动，overflow:scroll是给定的，我们需要指定的是方向。 x，y或xy。请参阅所有其他选项的文档。
• 内容与之前相同，再次进行一次优化。由于内容div中的内容可能是变量，我们可以将max-content应用于内容div的width属性，该属性会计算我们的总宽度。还有其他方法可以做到这一点。
• div内容中重复的项目，因此无需分配display:block，因为div默认为此。因此，所需要的只是应用float:left来并排获得这些项目。
• <ion-content>确实起作用，因为您的初始宽度将是给定屏幕的大小。 <ion-scroll>继承了这个宽度。