基于Swiper的Tab数据刷新和分页加载代码

最新推荐文章于 2024-05-09 10:19:32 发布
最新推荐文章于 2024-05-09 10:19:32 发布
阅读量2k 收藏
点赞数
分类专栏： 网页前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013521220/article/details/79281741
版权

PS：本文是基于Swiper3的（详情请百度Swiper官网，里面的css和js是swiper3版本，相应的包请到官网下载）



<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<@css href="new_mobile/swiper.min.css"/> 
<!-- <link rel="stylesheet" type="text/css" href="css/swiper.min.css"/> -->
<style type="text/css">
html, body{height: 100%;font-family: "微软雅黑";}
*{margin: 0;padding: 0;box-sizing: border-box;}
a {color: #428bca;text-decoration: none;}
a:hover,a:focus {color: #2a6496;text-decoration: underline;}
a:focus {outline: thin dotted;outline: 5px auto -webkit-focus-ring-color;outline-offset: -2px;}

.padd_40{padding-top: 80px;background: #F5F5F5;overflow-x:hidden;}
.a{text-align:center;line-height: 40px;position: fixed;top: 0;left: 0;width: 100%;z-index: 10;border-bottom: 1px #ccc solid; background: #f50;color: #fff;}
.tab{display: flex;line-height: 40px;position: fixed;top: 40px;width: 100%;z-index: 10;border-bottom: 1px #ccc solid;}
.tab a{width: 33.333333%;background: #fff;text-align: center;}
.tab .active{border-bottom: 1px #f50 solid; color: #f50;}
.panel{margin: 0;}

.refreshtip {position: absolute;left: 0;width: 100%;margin: 10px 0;text-align: center;color: #999;}
.swiper-container{overflow: visible;}
.loadtip { display: block;width: 100%;line-height: 40px; height: 40px;text-align: center;color: #999;border-top: 1px solid #ddd;}
.swiper-container, .w{height: calc(100vh - 120px);}
.swiper-slide{height: auto;}

.text-center{text-align: center;}
.list-group{padding-left: 0;margin-bottom: 20px;}
.list-group-item{    position: relative; display: block;padding: 10px 15px;margin-bottom: -1px;background-color: #fff;border: 1px solid #ddd;}
.list-group-item:first-child {border-top-left-radius: 4px;border-top-right-radius: 4px;}
</style>
</head>
<body class="padd_40">
<div class="a">标题</div>
<div class="tab">
<a class="active" href="javascript:;">进行中</a>
<a href="javascript:;">已完成</a>
<a href="javascript:;">待支付</a>
<a href="javascript:;">已失效</a>
</div>
<div class="swiper-container">
<div class="refreshtip">下拉可以刷新</div>
<div class="swiper-wrapper w">
<div class="swiper-slide d">
<div class="init-loading list-group-item text-center" style="display: none;">下拉可以刷新</div>
<div class="swiper-container2">
<div class="swiper-wrapper">
<div class="swiper-slide list-group">
<!-- <div class="list-group-item">列表</div>
<div class="list-group-item">列表</div>
<div class="list-group-item">列表</div>
<div class="list-group-item">列表</div>
<div class="list-group-item">列表</div>
<div class="list-group-item">列表</div> -->
</div>
<div class="swiper-slide list-group">
<!-- <div class="list-group-item">列表</div>
<div class="list-group-item">列表</div>
<div class="list-group-item">列表</div>
<div class="list-group-item">列表</div>
<div class="list-group-item">列表</div>
<div class="list-group-item">列表</div> -->
</div>
<div class="swiper-slide list-group">
<!-- <div class="list-group-item">列表</div>
<div class="list-group-item">列表</div>
<div class="list-group-item">列表</div>
<div class="list-group-item">列表</div>
<div class="list-group-item">列表</div>
<div class="list-group-item">列表</div> -->
</div>
<div class="swiper-slide list-group">
<!-- <div class="list-group-item">列表</div>
<div class="list-group-item">列表</div>
<div class="list-group-item">列表</div>
<div class="list-group-item">列表</div>
<div class="list-group-item">列表</div>
<div class="list-group-item">列表</div> -->
</div>
</div>
</div>
</div>
</div>

<div class="loadtip">上拉加载更多</div>
<div class="swiper-scrollbar"></div>
</div>
<@js src="new_mobile/jquery-1.9.1.min.js" /> 
<@js src="new_mobile/swiper.min.js" />
<!-- <script src="js/jquery-1.10.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/swiper.min.js" type="text/javascript" charset="utf-8"></script> -->

<script type="text/javascript">
var statusArray = ["PROCESSING","FINISH","UN_BID_PAY","CANCEL_BID"];
var prodLine = ["FINA"];
var currentIndex = 0,currentPage = 1;


var loadFlag = true;
var oi = 0;
var mySwiper = new Swiper('.swiper-container',{
direction: 'vertical',
scrollbar: '.swiper-scrollbar',
slidesPerView: 'auto',
mousewheelControl: true,
freeMode: true,
onInit : function(swiper) {
//Swiper初始化5个tab页面


for (var i = 0; i < statusArray.length; i++) {
initTabData(1, i, true);
}


},
onTouchMove: function(swiper){
//手动滑动中触发
var _viewHeight = document.getElementsByClassName('swiper-wrapper')[0].offsetHeight;
            var _contentHeight = document.getElementsByClassName('swiper-slide')[0].offsetHeight;
            
            //滑动距离超过50(上下滑动)
            if(mySwiper.translate < 50 && mySwiper.translate > 0) {
$(".init-loading").html('下拉刷新...').show();
}else if(mySwiper.translate > 50 ){
$(".init-loading").html('释放刷新...').show();
}
},
onTouchEnd: function(swiper) {
var _viewHeight = document.getElementsByClassName('swiper-wrapper')[0].offsetHeight;
            var _contentHeight = document.getElementsByClassName('swiper-slide')[0].offsetHeight;
             // 上拉加载
            if(mySwiper.translate <= _viewHeight - _contentHeight - 50 && mySwiper.translate < 0) {
                // console.log("已经到达底部！");
               
                if(loadFlag){
                $(".loadtip").html('正在加载...');
                }else{
                $(".loadtip").html('没有更多啦！');
                }
                
                setTimeout(function() {
               
                    /* for(var i = 0; i <5; i++) {
                    oi++;
                        $(".list-group").eq(mySwiper2.activeIndex).append('<li class="list-group-item">我是加载出来的'+oi+'...</li>');
                    } */
                    
                    initTabData(++currentPage,mySwiper2.activeIndex,false);
                    $(".loadtip").html('上拉加载更多...');
                    mySwiper.update(); // 重新计算高度;
                    
                }, 800);
            }
            
            // 下拉刷新
            if(mySwiper.translate >= 50) {
                $(".init-loading").html('正在刷新...').show();
                $(".loadtip").html('上拉加载更多');
                loadFlag = true;
                
                setTimeout(function() {
               
                    $(".refreshtip").show(0);
                    $(".init-loading").html('刷新成功！');
                    //刷新加载数据
                    initTabData(1,mySwiper2.activeIndex,true);
                    
                    setTimeout(function(){
                    $(".init-loading").html('').hide();
                   
                    },800);
                    $(".loadtip").show(0);
                    
                    //刷新操作
                    mySwiper.update(); // 重新计算高度;
                    
                }, 1000);
            }else if(mySwiper.translate >= 0 && mySwiper.translate < 50){
            $(".init-loading").html('').hide();
            }
            return false;
}
});
var mySwiper2 = new Swiper('.swiper-container2',{
onTransitionEnd: function(swiper){

$('.w').css('transform', 'translate3d(0px, 0px, 0px)')
$('.swiper-container2 .swiper-slide-active').css('height','auto').siblings('.swiper-slide').css('height','0px');
mySwiper.update();

$('.tab a').eq(mySwiper2.activeIndex).addClass('active').siblings('a').removeClass('active');
}

});
$('.tab a').click(function(){

$(this).addClass('active').siblings('a').removeClass('active');
mySwiper2.slideTo($(this).index(), 500, false)

$('.w').css('transform', 'translate3d(0px, 0px, 0px)')
$('.swiper-container2 .swiper-slide-active').css('height','auto').siblings('.swiper-slide').css('height','0px');
mySwiper.update();
});


/**tab初始化**/
function initTabData(page,index,isFirst){

//滑动触发加载
var data = {
page : page,
rows: 2,
prodLine : prodLine[0],
status :statusArray[index]
};


//alert(index);
/**渲染加载数据**/
$.ajax({
url : "product_invest_order",
async : true,
type : "post",
data : data,
success : function(result) {

var orderList = result.data.orders;

if(orderList == null || orderList.length == 0)
return ;

var tbBody = "";
$.each(orderList, function (i, each) {
 
          /*  tbBody += "<li><div class='account_top account_center'><div class='top_name'><i>"+"网贷"+"</i>"+each.prodName;
          tbBody += "</div><div class='top_num'>"+each.periodAndRateDesc+"</div>";
          tbBody += "<div class='top_type'>"+each.detailStatusDesc;
          tbBody += "</div></div><div class='account_middle account_center'><div class='middle_price'><span>"+ number_format(each.amount, 2, ".", ",");
          tbBody += "</span>"+each.amountDesc+"</div>";
           
          if(each.waitProfit == undefined){
          each.waitProfit ="0.00";
          //each.waitProfitDesc ="待收收益（元）";
          }
          //进行中
          if(each.orderStatus == "PROCESSING") {
          tbBody += "<div class='middle_sy'><span>"+number_format(each.waitProfit, 2, ".", ",");
          tbBody += "</span>"+each.waitProfitDesc+"</div>";
          }else{
          tbBody += "<div class='middle_sy'><span>"+number_format(each.alreadyProfit, 2, ".", ",");
          tbBody += "</span>"+each.alreadyProfitDesc+"</div>";
          }
           
          tbBody += "<div class='middle_day'><span>"+ each.remaining;
          tbBody += "</span>"+each.remainingDesc;
            tbBody += "</div></div><div class='account_bottom account_center'>";
            
            if(each.prodStartTimeDesc != undefined && each.prodEndTimeDesc != undefined){
            tbBody += "<div class='bottom_time'>"+each.prodStartTimeDesc+" 至 "+each.prodEndTimeDesc+"</div>";
            } 
            
            tbBody += "<div class='bottom_zt'>";
            tbBody += "</div></div>";
            if(each.orderStatus == "FINISH"){
            tbBody += "<div class='account_product_type01'></div>";
            }else if(each.orderStatus == "CANCEL_BID"){
            tbBody += "<div class='account_product_type02'></div>";
            }
            tbBody += "</li>";*/

tbBody += "<div class='list-group-item'>"+each.prodName+"</div>";
            
});

//如果是第一次
if(isFirst){
$(".list-group").eq(index).empty().append(tbBody);
}else{
$(".list-group").eq(index).append(tbBody);
}
console.log(index+"----"+$(".list-group").eq(index).children().length);
},
error : function(xhr, text, err) {
console.log(text);
}
});
}



</script>
</body>
</html>

---------------------------------------------------------------------------------------------------------------------

以上是加了适配部分脚本并请求后台返回数据的，静态页面如下（部分css和js包不同，以接下来这段代码为准）



<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" type="text/css" href="css/swiper.min.css"/>
<style type="text/css">
html, body{height: 100%;font-family: "微软雅黑";}
*{margin: 0;padding: 0;box-sizing: border-box;}
a {color: #428bca;text-decoration: none;}
a:hover,a:focus {color: #2a6496;text-decoration: underline;}
a:focus {outline: thin dotted;outline: 5px auto -webkit-focus-ring-color;outline-offset: -2px;}

.padd_40{padding-top: 80px;background: #F5F5F5;overflow-x:hidden;}
.a{text-align:center;line-height: 40px;position: fixed;top: 0;left: 0;width: 100%;z-index: 10;border-bottom: 1px #ccc solid; background: #f50;color: #fff;}
.tab{display: flex;line-height: 40px;position: fixed;top: 40px;width: 100%;z-index: 10;border-bottom: 1px #ccc solid;}
.tab a{width: 33.333333%;background: #fff;text-align: center;}
.tab .active{border-bottom: 1px #f50 solid; color: #f50;}
.panel{margin: 0;}

.refreshtip {position: absolute;left: 0;width: 100%;margin: 10px 0;text-align: center;color: #999;}
.swiper-container{overflow: visible;}
.loadtip { display: block;width: 100%;line-height: 40px; height: 40px;text-align: center;color: #999;border-top: 1px solid #ddd;}
.swiper-container, .w{height: calc(100vh - 120px);}
.swiper-slide{height: auto;}

.text-center{text-align: center;}
.list-group{padding-left: 0;margin-bottom: 20px;}
.list-group-item{    position: relative; display: block;padding: 10px 15px;margin-bottom: -1px;background-color: #fff;border: 1px solid #ddd;}
.list-group-item:first-child {border-top-left-radius: 4px;border-top-right-radius: 4px;}
</style>
</head>
<body class="padd_40">
<div class="a">标题</div>
<div class="tab">
<a class="active" href="javascript:;">tab1</a>
<a href="javascript:;">tab2</a>
<a href="javascript:;">tab3</a>
</div>
<div class="swiper-container">
<div class="refreshtip">下拉可以刷新</div>
<div class="swiper-wrapper w">
<div class="swiper-slide d">
<div class="init-loading list-group-item text-center" style="display: none;">下拉可以刷新</div>
<div class="swiper-container2">
<div class="swiper-wrapper">
<div class="swiper-slide list-group">
<div class="list-group-item">列表</div>
<div class="list-group-item">列表</div>
<div class="list-group-item">列表</div>
<div class="list-group-item">列表</div>
<div class="list-group-item">列表</div>
<div class="list-group-item">列表</div>
</div>
<div class="swiper-slide list-group">
<div class="list-group-item">列表</div>
<div class="list-group-item">列表</div>
<div class="list-group-item">列表</div>
<div class="list-group-item">列表</div>
<div class="list-group-item">列表</div>
<div class="list-group-item">列表</div>
</div>
<div class="swiper-slide list-group">
<div class="list-group-item">列表</div>
<div class="list-group-item">列表</div>
<div class="list-group-item">列表</div>
<div class="list-group-item">列表</div>
<div class="list-group-item">列表</div>
<div class="list-group-item">列表</div>
</div>
</div>
</div>
</div>
</div>

<div class="loadtip">上拉加载更多</div>
<div class="swiper-scrollbar"></div>
</div>


<script src="js/jquery-2.1.4.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/swiper.jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var loadFlag = true;
var oi = 0;
var mySwiper = new Swiper('.swiper-container',{
direction: 'vertical',
scrollbar: '.swiper-scrollbar',
slidesPerView: 'auto',
mousewheelControl: true,
freeMode: true,
onTouchMove: function(swiper){//手动滑动中触发
var _viewHeight = document.getElementsByClassName('swiper-wrapper')[0].offsetHeight;
            var _contentHeight = document.getElementsByClassName('swiper-slide')[0].offsetHeight;
            
            
            if(mySwiper.translate < 50 && mySwiper.translate > 0) {
$(".init-loading").html('下拉刷新...').show();
}else if(mySwiper.translate > 50 ){
$(".init-loading").html('释放刷新...').show();
}
},
onTouchEnd: function(swiper) {
var _viewHeight = document.getElementsByClassName('swiper-wrapper')[0].offsetHeight;
            var _contentHeight = document.getElementsByClassName('swiper-slide')[0].offsetHeight;
             // 上拉加载
            if(mySwiper.translate <= _viewHeight - _contentHeight - 50 && mySwiper.translate < 0) {
                // console.log("已经到达底部！");
               
                if(loadFlag){
                $(".loadtip").html('正在加载...');
                }else{
                $(".loadtip").html('没有更多啦！');
                }
                
                setTimeout(function() {
                    for(var i = 0; i <5; i++) {
                    oi++;
                        $(".list-group").eq(mySwiper2.activeIndex).append('<li class="list-group-item">我是加载出来的'+oi+'...</li>');
                    }
                     $(".loadtip").html('上拉加载更多...');
                    mySwiper.update(); // 重新计算高度;
                }, 800);
            }
            
            // 下拉刷新
            if(mySwiper.translate >= 50) {
                $(".init-loading").html('正在刷新...').show();
                $(".loadtip").html('上拉加载更多');
                loadFlag = true;
                
                setTimeout(function() {
                    $(".refreshtip").show(0);
                    $(".init-loading").html('刷新成功！');
                    setTimeout(function(){
                    $(".init-loading").html('').hide();
                    },800);
                    $(".loadtip").show(0);
                    
                    //刷新操作
                    mySwiper.update(); // 重新计算高度;
                }, 1000);
            }else if(mySwiper.translate >= 0 && mySwiper.translate < 50){
            $(".init-loading").html('').hide();
            }
            return false;
}
});
var mySwiper2 = new Swiper('.swiper-container2',{
onTransitionEnd: function(swiper){

$('.w').css('transform', 'translate3d(0px, 0px, 0px)')
$('.swiper-container2 .swiper-slide-active').css('height','auto').siblings('.swiper-slide').css('height','0px');
mySwiper.update();

$('.tab a').eq(mySwiper2.activeIndex).addClass('active').siblings('a').removeClass('active');
}

});
$('.tab a').click(function(){

$(this).addClass('active').siblings('a').removeClass('active');
mySwiper2.slideTo($(this).index(), 500, false)

$('.w').css('transform', 'translate3d(0px, 0px, 0px)')
$('.swiper-container2 .swiper-slide-active').css('height','auto').siblings('.swiper-slide').css('height','0px');
mySwiper.update();
});
</script>
</body>
</html>

易雪寒
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
移动端H5页面左右滑动并加载分页 dropload+swiper
04-19
最近公司要求做一个移动端商品类目展示效果，利用dropload+swiper两个插件结合写了以上内容
swiper手机下拉刷新加载代码
06-24
在Swiper手机下拉刷新加载代码中，jQuery可能被用来处理DOM操作和事件监听，例如在用户执行下拉动作时触发刷新或加载更多数据的函数。 下拉刷新功能通常涉及到以下几个关键部分： 1. **侦听器（Listener）**：设置...
swiper分页 ajax,ajax动态加载swiper，滑动问题解决
weixin_35422771的博客
08-05 440
$.ajax({type : "get",url : "data.PHP",data : {type:1 },dataType:"json",beforeSend: function(){$('.swiper-wrapper').html('');},error:function(){//alert("操作出错");},success:function(res){var html = "";$.e...
使用Swiper自定义分页样式
最新发布
qq_47138033的博客
05-09 331
【代码】使用Swiper自定义分页样式。
swiper分页 ajax,swiper怎么动态加载数据？
weixin_32493541的博客
08-05 1035
$.ajax({ url: "../Minitor/data_SOE.ashx?Action=GetSOEByPage", type: "GET", dataType: "json", data: { page: page, treeid: 1, rows: 10, endtime: endtime, starttime: '2016-07-20 00:00:00' }, cache: false...
swiper 在vue中切换中动画重新加载问题
weixin_43153309的博客
10-23 5430
swiper 在vue中切换中动画重新加载问题 问题：h5页面有9页，使用animate.css 给页面做动态效果，用swiper翻页后9页的动画已经执行结束了，当滑动到第9页时候没有动画效果 思路：使用display属性把div未在当前swiper页面的元素隐藏不执行动画，当swiper滑动到当前页面时候block显示div执行动画 —添加css &lt;style&gt; .nopage{di...
微信小程序答题页——swiper渲染优化及swiper分页实现
pengbo6665631的博客
01-13 6508
前言 swiper的加载太多问题，网上资料好像没有一个特别明确的，就拿这个答题页，来讲讲我的解决方案 这里实现了如下功能和细节： 保证swiper-item的数量固定，加载大量数据时，大大优化渲染效率 记录上次的位置，页面初次加载不一定非得是第一页，可以是任何页 答题卡选择某一index回来以后的数据替换，并去掉swiper切换动画，提升交互体验 问题原因 当...
swiper手机下拉刷新上拉加载更多代码.zip
10-16
总的来说，本项目通过Swiper库，利用原生JS实现了手机端的下拉刷新和上拉加载更多功能，适用于各种浏览器环境，提供了一种高效且用户友好的数据加载方式。在实际应用中，开发者可以根据需求调整Swiper的配置和...
小程序swiper实现tab切换--下拉刷新、上拉加载更多.zip
07-23
本项目中，开发者利用Swiper和Swiper-Item组件，结合下拉刷新和上拉加载更多的功能，构建了一个交互性强、用户体验良好的小程序界面。 1. **Swiper组件**： Swiper是微信小程序中的一个容器组件，可以用来展示一...
swiper手机下拉刷新加载特效代码
03-20
"swiper手机下拉刷新加载特效代码"是指利用Swiper库实现的具有下拉刷新和上拉加载功能的交互效果。这种功能在很多手机应用中很常见，如新闻阅读、社交网络和电商应用，它提供了流畅的用户体验，使得用户可以轻松获取...
swiper手机下拉刷新加载代码.zip
07-04
"swiper手机下拉刷新加载代码.zip"提供的就是一个集成这两种功能的示例代码。 首先，`Swiper`自身并不直接支持下拉刷新和加载更多的功能，但可以通过扩展或者与其他库结合来实现。在这个压缩包中，我们可能找到了一...
Swiper自定义分页器使用详解
12-29
Swiper自定义分页，供大家参考，具体内容如下 最终实现效果图： HTML DEMO（官网例子） <link rel=stylesheet href=path/to/swiper.min.css> Slide 1 Slide 2 Slide 3
uniapp使用swiper根据动态数据实现分页
Smile_ping的博客
10-24 1084
uniapp使用swiper实现数据分页，自定义菜单功能
v-for动态渲染swiper轮播图，数据改变后刷新轮播
m0_53492923的博客
06-02 3048
动态添加Swiper轮播数据并刷新它，您可以在Vue组件中使用。在这个示例中，我们定义了一个Vue组件，其中包含一个使用。请注意，在重新挂载Swiper实例之前，我们必须先调用。指令渲染轮播幻灯片，并使用Swiper实例中的。生命周期钩子中创建Swiper实例并将其赋值给。指令渲染的Swiper幻灯片列表。方法来销毁旧实例并删除所有相关事件监听器。引用Swiper实例，并在。然后，我们定义了一个名为。
探索Swiper-Limited-Load：一个智能分页加载解决方案
gitblog_00049的博客
04-01 412
探索Swiper-Limited-Load：一个智能分页加载解决方案 项目地址:https://gitcode.com/pengboboer/swiper-limited-load 项目简介 Swiper-Limited-Load 是一个轻量级的JavaScript库，专为网页滚动时的有限数据加载而设计。它采用了现代Web开发的最佳实践，旨在优化用户体验，减少网络请求，从而提升页面性能。 技术分析...
轮播图插件Swiper的使用（懒加载+异步加载数据）
不见长安见晨雾
08-15 2216
引入swiper-bundle.css、swiper-bundle.js。实现懒加载轮播图+ajax获取数据。
关于swiper分页的一点注意事项
CodingCoder
12-15 6737
swiper slide 可编辑控件 焦点 错位
swiper修改分页器样式(其他类似)
m0_55986526的博客
01-11 2620
使用swiper修改默认样式
uniapp swiper可以向下刷新加载数据上滑
04-03
Uniapp swiper 组件本身不支持下拉刷新和上滑加载数据的功能，但可以结合其他组件实现： 1. 可以使用 uniapp 的下拉刷新组件 `uni-pull-down-refresh`，在 swiper 中嵌套该组件，实现下拉刷新的效果。 2. 上滑加载数据可以使用 `uni-scroll-view` 组件，将 swiper 组件放在 scroll-view 中，当 scroll-view 滑动到底部时，触发加载数据的操作。 示例代码： ``` <template> <view> <uni-pull-down-refresh @refresh="onRefresh"> <swiper> <swiper-item v-for="(item, index) in list" :key="index"> <view>{{ item }}</view> </swiper-item> </swiper> </uni-pull-down-refresh> <uni-scroll-view class="scroll-view" @scrolltolower="onScrollToLower"> <!-- 加载更多数据的动画 --> <view v-if="loading">{{ loadingText }}</view> </uni-scroll-view> </view> </template> <script> export default { data() { return { list: [], // 数据列表 loading: false, // 是否正在加载更多数据 loadingText: '加载中...', // 加载数据的提示文本 } }, methods: { // 下拉刷新 onRefresh() { // 获取最新数据 this.getData() }, // 上滑加载更多数据 onScrollToLower() { if (!this.loading) { // 显示加载动画 this.loading = true // 加载更多数据 this.loadMoreData() } }, // 获取最新数据 getData() { // 发送请求，获取最新数据 // ... // 更新数据列表 this.list = newDataList // 关闭下拉刷新 uni.stopPullDownRefresh() }, // 加载更多数据 loadMoreData() { // 发送请求，获取更多数据 // ... // 将新数据添加到数据列表 this.list.push(...moreDataList) // 隐藏加载动画 this.loading = false }, }, } </script> ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

易雪寒

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值