Question

我正在尝试使用带有卡片的水平滚动条制作一个滑块，所以为了达到这个目的，我正在尝试使用ng-repeat内部滚动layout =“row”

https://codepen.io/williamscott701/pen/GmLada

<body ng-app="myApp" ng-cloak ng-controller="ProductController">
  <md-content class=" md-padding " layout="column ">
    <div layout="row">
      <div flex="33" ng-repeat="y in [1,2,3,4,5,6,7,8,9,10,11] ">
        <md-card>[ flex = 33 ]
        <md-card>
      </div>
    </div>    
  </md-content>
</body>

我不知道哪里出错了

由于

Answer 1

要滚动工作，您需要为卡片提供最小宽度。

md-card {
  min-width: 200px;
}

div[layout="row"] {
  overflow: auto;
}

这是更新的codepen的链接

https://codepen.io/vibhanshu/pen/YVMbob?editors=1100

Answer 2

对于水平滚动，您需要元素的内容宽度大于其宽度，为此，您需要确定一个数字作为内容的宽度。（我选择300vw）

例如：

<body ng-app="myApp" ng-cloak ng-controller="ProductController">
  <md-content class=" md-padding " layout="column ">
    <div layout="row" style="width: 300vw;">
      <div flex ng-repeat="y in [1,2,3,4,5,6,7,8,9,10,11] ">
        <md-card>[ flex = 33 ]
          <md-card>
      </div>
    </div>
  </md-content>
</body>

另请注意，flex="33"会尝试将3个元素全部放入父级宽度的33%，但因为它超过3个，所以只会使它们均匀地填充宽度，所以只需flex指令就可以得到相同的结果。

如何在布局中水平滚动=角度材质中的行

2 个答案: