使用过渡将项目附加到列表视图

Posted

技术标签:

【中文标题】使用过渡将项目附加到列表视图【英文标题】:Appending items to listview with transition 【发布时间】:2017-10-14 13:32:54 【问题描述】:

为了尽可能简化我的用例,我从一个硬件接收一个文件名列表,然后循环并附加到一个 jquery 移动列表视图。

对于我使用的每次迭代:

$('ul').append('[markup]')
$('ul').listview('refresh');

我已经尝试在标记字符串和选择器中向列表项和锚点添加数据转换,但无论我做什么,列表都会更新一次,最后使用所有数据,而不是在循环时转换每个项目。我缺少一些关于 .append 如何工作的基本知识?或者关于我可以在哪里应用过渡?

【问题讨论】:

元素的显示将由listview 方法控制。 【参考方案1】:

如果我理解正确,您的目标是使用数据转换在列表中的元素中制作动画。这似乎不是数据转换的工作方式:当您单击链接时,它控制页面之间的转换,而不是元素本身的动画。

要为元素设置动画,我认为您需要制作自己的动画。像这样的:

$(function()  
  $("#start").click(function() 
    $.each(["One", "Two", "Three"], function (i, val) 
      $('ul').append('<li style="display: none" class="closed"><a>' + val + '</a></li>');
      $('ul').listview('refresh');
      $('ul .closed').slideDown(300, function()  $(this).removeClass('closed'); );
    );    
  );
);
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

<a href="#" id="start" class="ui-btn">Start</a>
<ul data-role="listview">
</ul>

【讨论】:

祝福你,先生。 @SteveMcGuigan 如果这个答案有效或让你走上正轨,请务必投票并接受它! (先生或女士,即)

以上是关于使用过渡将项目附加到列表视图的主要内容,如果未能解决你的问题,请参考以下文章

无法将查询另存为视图表

文本文件字符串拆分然后将每个元素输出到视图表中

NavigationView 奇怪的与子视图之间的转换

Flutter:从网格视图横向滚动的列表视图过渡

如何从 postgresql 视图表中获取要显示的对象列表

如何将最新数据附加到android中的自定义基本适配器列表视图?