離子卡向x軸方向滾動

我正在使用Ionic Framework構建Android應用程序。我需要顯示水平可滾動的卡片。每張卡片將顯示產品圖片，產品標題，產品價格和按鈕。我嘗試在x方向上使用ion scroll，但是卡片似乎沒有在x方向上滾動。離子卡向x軸方向滾動

我試過使用這個plugin，但它似乎只能用於離子窗格，我正在使用離子內容。

在此期間，我發現了另一個解決方案 -

<div class="cardHolder"> 
       <ul> 
        <div> 
         <img ng-repeat="feature in featured track by $index" ng-src="{{feature.featured_image.source}}" class="examplePic" > 
</div> 
      </div>

CSS

.cardHolder { 
    height: 200px; 
    width:100%; 
    padding: 8px; 
    margin: 6px; 
} 

ul { 
    overflow-x: auto; 
    overflow-y: hidden; 
    white-space: nowrap; 
} 


.examplePic { 
    height: 150px; 
    width: auto; 
    border:1px solid black; 
    margin: 2px; 
}

這種解決方案的問題是，我只能夠檢索圖像，而不是其他細節。

來源

2015-11-03 vkm

你應該看看離子的內置ion-scroll。你的代碼看起來像這樣。也結帳這個例子

<ion-scroll direction="x">` 
....your scrollable content here... 
</ion-scroll>

也結帳此example

來源

2016-01-24 19:15:39 garrettmac

離子卡向x軸方向滾動

回答

相關問題