Question

我试图在离子框架中实现这个例子这是我试图实现的代码 http://plnkr.co/edit/LjAoAPFDx0eVPkx3dKfu?p=preview。在任何情况下，dom中只有六个元素存在。我试图在离子框架中实现相同但是在我的div中没有添加离子滚动为什么？

如何添加离子卷轴？这样就可以顺利滚动。

这是我演示的插件 http://plnkr.co/edit/WJcbpkqJvzmMWXrg8WpH?p=preview

我们可以添加离子滚动吗？

  <ion-scroll>
  <div vs-repeat class="repeater-container">
    <div ng-repeat="item in items" class="item">
      {{item.text}}
    </div>
  </div>
  </ion-scroll>

Answer 1

如果要在列表中一次显示一定数量的项目，可以使用集合重复，然后只需将项目高度设置为容器div的高度，然后除以6。类似的东西。我使用了窗户的高度，但有些想法。 HTML：

pub enum Cell<'a> {
    Str(&'a str),
    Double(&'a f32),
}


struct MyCellRep<'a> {
    value: Cell<'a>, // Ref to enum 
    ptr: *const u8, // Pointer to c struct
}

impl<'a>  MyCellRep<'a> {
    fn from_str(s: &'a str) -> DbaxCell<'a> {
        MyCellRep { value: Cell::Str(&s) , ptr: unsafe { new_sCell(CString::new(s).unwrap()) } }
    }

    fn from_double(d: &'a f32) -> DbaxCell {
        MyCellRep{ value: Cell::Double(&d) , ptr: unsafe { new_dCell(*d) } }
    }
}

JS：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <link href="http://code.ionicframework.com/1.0.0/css/ionic.min.css" rel="stylesheet">
    <script src="http://code.ionicframework.com/1.0.0/js/ionic.bundle.js"></script>
  </head>
  <body ng-app="app">
    <ion-pane ng-controller="main">
      <ion-header-bar class="bar-stable">
        <h1 class="title">Awesome App</h1>
      </ion-header-bar>
      <ion-content class="padding">
       <div class="list">
         <div class="item" collection-repeat="item in thisArray" item-height="height"></div>
       </div>
      </ion-content>
    </ion-pane>
  </body>
</html>

Answer 2

您的代码似乎没有任何问题。什么是你的意思离子滚动没有添加???是在屏幕上呈现的{{item.text}}吗？也许它是空白的？

如果未渲染局部视图，则需要首先将ion-view声明为每个局部视图中的父元素，

<强>的index.html

<html>
  <body ng-app="sampleApp">
    <ion-nav-view></ion-nav-view>
  </body>
</html>

<强> partialview1.html

<ion-view>
  <ion-scroll>
    <div>
      //more content
    </div>
  </ion-scroll>
</ion-view>

如何在div中添加离子滚动指令？

2 个答案: