Para los carruseles de mensajes ordinarios, simplemente elimine el primer div cada vez y agréguelo al final.
Ahora se requieren datos de mensajes para obtener continuamente mensajes nuevos de la base de datos.
La idea inicial es poner dos divs grandes que contengan n registros de mensajes respectivamente, cuando el primero se mueva fuera de la pantalla, se eliminará y luego ajax solicitará que se coloquen n paquetes de mensajes al final del nuevo div.
Probablemente el código sea feo. Después de todo, es fácil cometer errores para obtener la altura del div grande y el div en la parte superior de la pantalla cada vez. Siempre hay problemas al mostrar el primer elemento.
En realidad, no tiene por qué ser tan problemático.
Tomando el problema específico actual como ejemplo, debido a que la pantalla actual puede mostrar hasta 3 piezas de información, cambie la condición de la solicitud ajax a solicitud cuando el conteo sea inferior a 3.
Simplemente use un div grande y elimine el div superior de cada animación.
$(function(){
SPEED = 3000;
setInterval(scrollUp, SPEED);
});
function scrollUp() {
var $this = $('.list-screen');
count = $this.children('.content-item').length;
curH = $('.content-item:first').outerHeight() + parseInt($('.content-item:first').css('margin-top'));
if (count <= 3 ){
var url = $this.data('url');
$.get(url, function(result) {
var html = '';
$.each(result, function(i,k) {
html+= '<div class="content-item"><div class="wxuser-info"><img class="user-avatar" src="'+ k.headimgurl +'"/>'
+ '<div class="user-name">' + k.en_name + '</div></div><div class="content-info-wrap">'
+ k.content + '</div></div>';
});
$this.append(html);
});
}
$this.stop(true, false).animate({ top: '-=' + curH }, 800, function() {
$this.children('div:first').remove();
$this.css('top', 0);
});
}