Question

HTML

 <ul>
    <li>Blueberry</li>
    <li>Raspberry</li>
    <li>Pear</li>
    <li>Apple</li>
    <li>Banana</li>
    <li>Cherry</li>
    <li>Mango</li>
    <li>Soursop</li>
    </ul>

在ractivejs中思考这种方式是否可行

像这样：

<ul>
  {{#each fruit:i}}
   {{#if count > 4}}
    <a href="#" class="less">Show less</a>
   {{else}}
   <li>{{fruit.name}}</li>
   <a href="#" class="more">Show more</a>
   {{/if}}
  {{/each}}
</ul>

如果获得更多物品，它将仅限制4个物品并显示“显示更多”。然后在显示所有项目后点击显示更少，它将崩溃。

不知道有可能吗？ css动画也适用于课程：越来越少而不是点击处理程序来扩展和折叠？（类似于向上和向下滑动）。

Answer 1

是的，这是可能的。

折叠和展开仅仅是跟踪活跃的人，并为那些人添加正确的display风格。这可以通过简单的模板来完成（参见代码的上半部分）。

＆＃34;显示更多＆＃34;可以通过两种方式完成：

如果您每次加载动态（通过ajax）加载数据，那么您只需concat到现有的fruits数组并将其用于迭代。
如果您的数据已经存在（您加载了所有水果，但只想一次显示几个），您可以使用属性来跟踪当前显示的数量，并使用计算属性来切片使用该数字的水果阵列。单击加载更多将增加该数字（例如4到8），这次使用8来重新计算计算的道具。

以下是一个例子：

<ul>
  {{#each slicedFruits:index}}
    <li>
      <!-- Here, clicking the header sets the current fruit to display -->
      <h4 on-click="set('currentFruitIndex', index)">{{name}}</h4>
      <!-- Here, we conditionally apply block or none depending on who's showing -->
      <div style="display:{{if currentFruitIndex === index}}block{{else}}none{{/if}};">{{details}}
    </li>
  {{/each}}
  <!-- using the built-in `add`, we add 4 to `displayedFruits` -->
  <a href="#" on-click="add('displayedFruits', 4)>Load More</a>
</ul>

<script>
component.exports = {
  data : {
    fruits: [],            // load up your fruits here
    currentFruitIndex: -1, // change this to any default, -1 for nothing
    displayedFruits: 4,    // change to how many you liked displayed first
  },
  computed: {
    // We slice the main array `fruits` by `displayedFruits`.
    // Changing `displayedFruits` will recalculate this and update the template
    slicedFruits: function(){
      return this.get('fruits').slice(0, this.get('displayedFruits'));
    }
  }
};
</script>

对于动画，您可以查看Transistions。 There's a good example of accordion here

可能在ractivejs中崩溃和扩展？

1 个答案: