h5数据滚动-上滚

原创已于 2022-06-24 11:07:10 修改 · 569 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#大数据

于 2022-06-24 10:24:45 首次发布

该博客提供了一个使用JavaScript实现H5页面数据向上滚动的示例。通过创建div元素、遍历数据并生成HTML结构，结合CSS样式，实现了数据列表的滚动效果。示例中数据包括不同类型的报警信息，根据类型分配不同的图片和颜色。代码还包含了一个简单的CSS样式表用于布局和样式设置。

示例演示：

1.创建div

<div class="main_itemR2">
                <div class="itemR2 hflex" id="alarmSort">
                    <div class="announce-list scroll-list"></div>
                </div>
            </div>

2.遍历生成数据

var flag = 1;
$(function () {
    getAlarmSort()
})
function getAlarmSort() {
    var list=[
        {
            alarmClass:'A',
            time:'2022/03/31 13:52',
            place:'xxxxx',
            type:'xxxxx'
        },{
            alarmClass:'B',
            time:'2022/03/31 13:52',
            place:'xxxxx',
            type:'xxxxx'
        },{
            alarmClass:'C',
            time:'2022/03/31 13:52',
            place:'xxxxx室',
            type:'xxxxx'
        },{
            alarmClass:'D',
            time:'2022/03/31 13:52',
            place:'xxxxx',
            type:'xxxxx'
        },{
            alarmClass:'D',
            time:'2022/03/31 13:52',
            place:'xxxxx',
            type:'xxxxx'
        },{
            alarmClass:'A',
            time:'2022/03/31 13:52',
            place:'xxxxx',
            type:'xxxxx'
        },{
            alarmClass:'A',
            time:'2022/03/31 13:52',
            place:'xxxxx',
            type:'xxxxx'
        },{
            alarmClass:'D',
            time:'2022/03/31 13:52',
            place:'xxxxx',
            type:'xxxxx'
        }
    ]
    var imgSrc,color
    let _str = '';
    for (var k in list) {
        if(list[k].alarmClass == 'A'){
            imgSrc="image/sides/security/sortA.png"
            color='#ff2929'
        }else if(list[k].alarmClass == 'B'){
            imgSrc="image/sides/security/sortB.png"
            color='#ff4c29'
        }else if(list[k].alarmClass == 'C'){
            imgSrc="image/sides/security/sortC.png"
            color='#ff8929'
        }else if(list[k].alarmClass == 'D'){
            imgSrc="image/sides/security/sortD.png"
            color='#ffe329'
        }
        _str += '<div class="announce-item scroll-item hflex acenter jbetween">' +
            ' <div class="item-center hflex acenter"> ' +
            '<div class="time">'+ list[k].time+'</div> ' +
            '<div class="rmark hflex"> <div class="place">'+list[k].place+'</div> <div class="type">'+list[k].type+'</div> </div> </div> ' +
            '<div class="item-right rflex">' +
            ' <div class="item-right_img"><img src="'+imgSrc+'" alt=""></div> ' +
            '</div>' +
            '</div>'
    }
    $("#alarmSort>.announce-list").html(_str);
    if(flag === 1){
        flag = 0
        $('#alarmSort').myScroll({
            speed: 60 //数值越大，速度越慢
        });
    }
}

3.css

 .main_itemR2{
    width: 24vw;
    height: 10vh;
    margin-top: 7vh;
    margin-left: 14vw;
    overflow: hidden;
    box-sizing: border-box;
}
.main_itemR2 .itemR2{
    width: 100%;
    height: 100%;
}
.itemR2 .announce-list {
    width: 100%;
    height: 12vh;
    margin-top: 1vh;
}

.announce-list .announce-item {
    width: 100%;
    height: 4vh;
    color: #fff;
    font-size: 1.3vh;
}
.announce-item .item-center{
    width:20vw;
    height: 4vh;
}
.announce-item .item-center .time{
    width: 8vw;
    height: 4vh;
    font-size: 13px;
}
.announce-item .item-center .rmark{
    width: 12vw;
    height: 4vh;
    font-size: 13px;
}
.announce-item .item-center .rmark .type{
    margin-left: 2vw;
    color: #55e1ec;
}
.announce-item .item-right{
    width: 4vw;
    height: 4vh;
}
.announce-item .item-right .item-right_img{
    margin-top: 0;
    height: 2vh;
}
.announce-item .item-right img{
    height: 100%;
}

详细资源如下

h5数据滚动-向上滚动-Javascript文档类资源-优快云下载h5数据滚动-向上滚动更多下载资源、学习资料请访问优快云下载频道.https://download.youkuaiyun.com/download/henghahouhei/85759958