Question

我正在讨论一些模拟“价格合适”类型轮子或样式UIPicker功能的方法。这就是说我不需要UIPicker插件的整个对话框和配色方案。我只需要能够通过几个图像动画来复制轮子的旋转。

举一个例子，我们可以说这是我的清单：
1984年
1985
1987年
1990年
1994年

并且让我们说这些数字在屏幕上：

1985
1987年
1990年

当用户点击1990时，列表会在1994年屏幕上显示1985年关闭屏幕。离开我们：

1987
1990年
1994年

然后，当用户点击1994时，列表再次滑动，1987离开屏幕，1984进入屏幕。或者，列表也可以向下滑动......那么实现这一目标的首选方法是什么？我已经讨论了一个infinite scroller和一组超大图像（这将在一个较小的div中，以限制它在屏幕上的部分），每个组合可以向上/向下滑动然后换出新的组合并且是准备下一次选择。

Answer 1

我想有很多方法可以成功地做到这一点。就个人而言，我只会对jQuery动画进行回调，它使用insertAfter获取第一个项目并将其追加到最后，同时还修改列表的相对位置。这是有效的，只有几行代码，但这取决于你想要它的平滑程度。

类似的东西：

var $length = $('.list li').length--;
$('#foo').click(function(){
    $('.list').animate({
        top:'-30px'     
    },function(){
        $('.list li').eq(0).insertAfter($('.list li').eq($length));
        $('.list').css('top','0px');
    });
});

有效，但它不是我的头脑，可能有更顺畅的方式。

JavaScript - 模拟轮子/ UIPicker

1 个答案: