根据后台加载数据,添加loading动画

<script>
var current = 0;
var hit = @hits;
$(this).scroll(function(){
var viewHeight =$(this).height();//可见高度
var contentHeight =$(".search_content").get(0).scrollHeight;//内容高度
var scrollHeight =$(this).scrollTop();//滚动高度

if(contentHeight - viewHeight < scrollHeight) {
if(current<hit)
{
$(".loading").css("display","block");
$.ajax({
url: "",
data:{
SearchKey:"",
current:current+15
},
async:true,
success: function(result){
var strhtml ="";
for (item in result.data)
{
strhtml += " <div class='info'>";
if (result.data[item].TitleFormat!="")
{
strhtml += " <a href='' target='_blank' class='ifone'>" +  + "</a>";
}
else {
strhtml += " <a href='' target='_blank' class='ifone'>" +  + "</a>";
}
strhtml += " <div class='oneimg'>";
strhtml += " <img src='/Content/img/searchBg.png' class='img-responsive' />";
strhtml += " </div>";
strhtml += " <div class='infobtm'>";
strhtml += " <span></span>";
strhtml += " <span>"+ result.data[item].PublishTime +"</span>";
strhtml += " <span></span>";
strhtml += " </div>";
strhtml += " </div>";
}

$(".search_content").append(strhtml);

}});
}else{
$(".loading").html("已经到底部了...");
}

}else{
$(".loading").css("display","none");
}
});


var contentif = $('div').is('.search_content');   //判断是否含有该类
if(contentif == true){
$(".loading").css("display","none");
}else{
$(".loading").addClass("loadingnoinfo");
$(".loading img").css("display","none");
$(".loading").html("没有搜索到内容 ...");
}

</script>

转载于:https://www.cnblogs.com/quitpoison/p/9272194.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在Vue后台管理中添加全屏动画加载中的效果可以通过以下步骤实现: 1. 创建一个新的Vue组件,命名为Loading.vue,并定义好组件的模板和样式。 2. 在模板中,可以使用CSS动画或者动画库(如Animate.css)来实现加载中的动画效果。可以通过设置组件的样式属性,让Loading组件在全屏中居中显示。 3. 在组件中添加一个名为loading的data属性,初始值为true。这个属性用于控制Loading组件的显示与隐藏。 4. 在Vue后台管理的根组件中(如App.vue),通过在模板中插入loading组件并使用v-if指令控制其显示与隐藏。根据后台数据加载情况,可以动态改变loading属性的值来控制Loading组件的显示与隐藏状态。例如,在数据请求开始时将loading设置为true,在数据请求完成时将loading设置为false。 5. 可以使用Vue的钩子函数beforeEach()和afterEach()来控制Loading组件的显示与隐藏。在请求开始时,在beforeEach()中将loading设置为true,在请求结束时,在afterEach()中将loading设置为false。 6. 可以为Loading组件添加一些自定义的配置属性,例如可以设置加载中的文本内容,也可以设置加载中遮罩的颜色等。 通过以上步骤,我们就可以在Vue后台管理中添加进入网站全屏动画加载中的效果。当用户进入网站时,Loading组件会全屏显示,并播放加载中的动画,直到后台数据加载完成后才隐藏。这样可以提高用户体验,并给用户一个视觉上的反馈,告知他们数据正在加载中。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值