Question

我有一个问题，就是在collection-repeat内部水平滚动表格而我找不到解决方案。滚动在Web浏览器上工作正常，但它不适用于实际的Android设备。代码如下：

<ion-content>
 <ion-refresher  on-refresh="doRefresh()"></ion-refresher>
  <div class="list">
    <div class="item" collection-repeat="lists in list" 
           item-height="getItemHeight(lists, $index)"
           ng-style="{height:getItemHeight(lists, $index)}">

         <h2 style="text-align: center;" class="padding">{{lists.name}}</h2>

          <p class="text-center padding">

            <img ng-src="{{lists.link}}" width="200px" height"250px">

          </p>

<div class="padding">
   <ion-scroll direction="x" class="wide-as-needed">

    <table class="table1">
    <tr>
      <th>size
      </th>
      <th>unit
      </th>
      <th>box packing
      </th>
      <th>type
      </th>
      <th>price
      </th>
    </tr>
    <tr ng-repeat="company in lists.array">
      <td>{{company.size}}
      </td>
       <td>{{company.unit}}
      </td>
       <td>{{company.packing}}
      </td>
      <td>{{company.type}}
      </td>
      <td>{{company.price}}
     </td>
    </tr>
  </table>
  </ion-scroll> 

   </div>              

   </div>
   </div>
   </ion-content>

Answer 1

<ion-content>
<ion-refresher  on-refresh="doRefresh()"></ion-refresher>
<div class="list">
<div class="item" collection-repeat="lists in list" 
item-height="getItemHeight(lists, $index)"
ng-style="{height:getItemHeight(lists, $index)}">
<h2 style="text-align: center;" class="padding">{{lists.name}}</h2>
<p class="text-center padding">

        <img ng-src="{{lists.link}}" width="200px" height"250px">

      </p>

<div class="card">


<ion-item>

<ion-scroll direction="x" class="wide-as-needed" zooming="false" 
overflow-scroll="false" style="width: 100%; height:100%">

<table class="table1">
<tr>
  <th>size
  </th>
  <th>unit
  </th>
  <th>box packing
  </th>
  <th>type
  </th>
  <th>price
  </th>
</tr>
<tr ng-repeat="company in lists.array">
  <td>{{company.size}}
  </td>
   <td>{{company.unit}}
  </td>
   <td>{{company.packing}}
  </td>
  <td>{{company.type}}
  </td>
  <td>{{company.price}}
 </td>
</tr>
</table>
</ion-scroll> 
</ion-item>
</div>              

</div>
</div>
</ion-content>

表不是在Android设备上的集合内重复滚动

1 个答案: