zoukankan      html  css  js  c++  java
  • 手机端-ajax跨域请求滚屏分页

    近期做了一个关于信息展示的详情页面,将里面能够提升用户体验的小点写出来

    1.当页面请求新的数据,或上传数据的时候 放一个loading.gif的过渡,告诉用户 你的操作已经完成,正在加载中

    2.当所有数据都加载完成时,显示一个提示,告诉用户你的信息已经全部显示

    一个滚屏的分页写法

    页面结构

    <div class="wap" >
    	<div class="tit">近期投诉举报问题</div>
        <ul></ul>
        <div class="load"><img class="loading" src="images/loading.gif"></div>
        <div class="notext">没有更多内容啦~~</div>
        <div class="mask">服务器离家出走了</div>
        <div class="img_mask"><img src="images/1.jpg"/></div>
    </div>
    var num_=1; 一开始是第一页 
      function refresh(refresh,loadmore) {
            $(window).scroll(function(){
                var scrollTop = $(this).scrollTop();    //滚动条距离顶部的高度
                var scrollHeight = $(document).height();   //当前页面的总高度
                var clientHeight = $(this).height();    //当前可视的页面高度
    //           console.log("top:"+scrollTop+",doc:"+scrollHeight+",client:"+clientHeight);
                if(scrollTop + clientHeight >= scrollHeight){   //距离顶部+当前高度 >=文档总高度 即代表滑动到底部 分页数;、 
    //              console.log('下拉');
                    num_++; //这个是分页的页码 
    fn1(num_)//开始ajax请求多更数据 //调用加载更多函数 if(loadmore){ loadmore(); } }else if(scrollTop<=0){ //滚动条距离顶部的高度小于等于0 console.log('上拉'); if(refresh){
                    //调用刷新函数 refresh(); } } }); }

     

    下面是一个ajax跨域请求的例子

       $.ajax({
                url:'url',
                type:'get',
                dataType:'jsonp',
                jsonp:'jsonpcallback',
                data:{
                    'page':num_,
                    'pageSize':6
                },
                beforeSend: function(){
              请求完成前加载图标的显示,提示用户正在加载 $('.load').show() }, complete: function(){
              完成请求时候,隐藏 $('.load').hide() }, success:function(data){ if(data.success){ if(!data.result.length){ /*当数据全部加载完显示*/ $('.load').remove(); $('.notext').fadeIn(500); }else{ console.log(data); for(var i=0;i<data.result.length;i++){ $('ul').append('<li>’) } } }else{
    //当数据返回出现问题时候出现的message信息 $('.mask').html(data.message).fadeIn(300) } }, error:function(data){
    ajax请求不成功 $('.mask').fadeIn(300); setTimeout(function(){ $('.mask').fadeOut(300) },2000) } })

     

    效果图

     

     

  • 相关阅读:
    c# 使用ajaxfileupload上传文件,通过一般处理程序(Handler)接收文件 ashx 图片 Excel文件都可以
    C#+aspx+ajaxfileupload 实现文件上传
    Java中的int与String互相转换方式
    简述 readyonly 与 disabled 的区别
    was应用服务器搭建
    MVC中贫血模型与充血模型
    npm安装教程 Vue环境搭建
    使用vs Code从0开始搭建一个vue项目(手把手教会你,包会)
    使用VS code 打开Vue项目
    Task , Thread 学习
  • 原文地址:https://www.cnblogs.com/GoTing/p/7340811.html
Copyright © 2011-2022 走看看