list绑定数据动态滑动

jiye

现有一list控件绑定了data数据，data中的数据用ajax从后台数据库动态获取，list中的span控件绑定其中一列数据，只显示前10条数据，现在我想实现数据动态向上滑动的效果，循环显示这10条数据，和动态新闻差不多，要怎么实现呢

cgrddv

可以使用JS动画，来实现这个效果。改变top值，不停做循环

jiye

cgrddv 发表于 2016-9-26 18:52
可以使用JS动画，来实现这个效果。改变top值，不停做循环

能说说具体怎么实现嘛

cgrddv

jiye 发表于 2016-9-27 11:27
能说说具体怎么实现嘛

自己随便写了个

1.         var n = 1;
   
2.                 var me = this;
   
3.                 window.setInterval(function(){
   
4.                         me.comp("list2").$domNode.css("top",n++ + "px");
   
5.                         debugger
   
6.                 }, 1)
   
7.                

复制代码

其中list需要有position:relative;top:0;
新手建议去w3c看一下html和css

jiye

cgrddv 发表于 2016-9-27 15:57
自己随便写了个
其中list需要有position:relative;top:0;
新手建议去w3c看一下html和css ...

谢谢啦 试过了很管用 我用了两个list 绑定数据一样，实现数据循环滚动，写的有点粗糙，但能实现效果

function move() {
                                                var top = parseInt(me.comp("list2").$domNode.css("top"));//获取list2组件的top值  -->相对定位的高度
                                                var top1 = parseInt(me.comp("list1").$domNode.css("top"));
                                                if (top > -41*length) {                        //当top>整个list的数据高度时  注意是负值
                                                        me.comp("list2").$domNode.css("top", n-- + "px");   //循环改变top值，每次移动n--个px
                                                } else {
                                                        me.comp("list2").$domNode.css("top", 41*length+"px");
                                                        n = 41*length;
                                                }
                                                if (top1 > -41*2*length) {
                                                        me.comp("list1").$domNode.css("top", m-- + "px");   //list1  在 list2 后面，绑定的数据是一样的  跟在list2 后面 一起移动
                                                } else {
                                                        me.comp("list1").$domNode.css("top", "0px");
                                                        m = -1;
                                                }
                                        }
                                        setInterval(move, 30);//30指移动的频率  值越大  频率越慢