vue3 触底加载数据(滚动加载分页数据)

vue3 触底加载数据(滚动加载分页数据),第1张

html:

    
                        0">
                            
                                
                                    太阳雨游戏积分
                                    
                                        
                                            +{{item.integral}}
                                        
                                            -{{item.integral}}
                                        
                                            
                                        
                                    
                                
                                 {{item.createDate}}
                            
                            
                                其中游戏福袋积分
                                {{item.luckyBagIntegral}}
                                    
                                    
                                
                            
                        
                        
                            
                        
                    

css:

.integral-record-cont{
    height:8.4rem;
    overflow-y: scroll;
    padding: 0 .32rem;
}
.integral-record-tab-item {
    font-size: .28rem;
    font-family: PingFangSC-Regular;
    font-weight: 400;
    color: #696969;
    line-height: .4rem;
    border-bottom: .03rem solid transparent;
    padding: 0 0 .16rem 0;
}

.tabActive {
    color: rgba(42, 138, 57, 1);
    border-bottom: .03rem solid rgba(42, 138, 57, 1);
}

.integral-record-item {
    padding: .3rem 0 .2rem 0;

}

.integral-record-item:not(:last-child) {
    border-bottom: 1px solid rgba(216, 216, 216, 1);
}

.integral-name {
    font-size: .28rem;
    font-family: PingFangSC-Medium;
    font-weight: 500;
    color: #333333;
    line-height: .4rem;
}

.integral-num {
    font-size: .32rem;
    font-family: DINAlternate-Bold;
    font-weight: bold;
    line-height: .38rem;

}

.integral-num-green {
    color: #2A8A39;
}

.integral-num-orange {
    color: #FF771D;
}

.arrow-down-panel {
    width: .34rem;
    height: .34rem;
}

.arrow-down {
    font-size: .32rem;
    margin-left: .08rem;
}

.integral-date {
    font-size: .28rem;
    font-family: PingFangSC-Regular;
    font-weight: 400;
    color: #7D7D7D;
    line-height: .4rem;
    margin: .16rem 0;
}

.blessing-bag-integral-text {
    font-size: .28rem;
    font-family: PingFangSC-Regular;
    font-weight: 400;
    color: #333333;
    line-height: .4rem;
}

.blessing-bag-integral-num {
    font-size: .28rem;
    font-family: DINAlternate-Bold;
    font-weight: bold;
    color: #333333;
    line-height: .32rem;
}

js:

欢迎分享,转载请注明来源:内存溢出

原文地址:https://54852.com/web/1320231.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2022-06-11
下一篇2022-06-11

发表评论

登录后才能评论

评论列表(0条)

    保存