分类: H5/JS/CSS

div标签中滚动加载（上滑加载）的实现，weui和原生jquery的实现方法

[ 2018-03-29 14:25:28 | 作者: admin ]
字号: 大 | 中 | 小
<div id="tab1" class="weui-tab__bd-item weui-tab__bd-item--active">
                    
                    
                    <ul id="huodong-list" >
                    <li ></li>
                    <li ></li>
                    <li ></li>
                    <li id="end" ></li>
                    </ul>

                     <div id="list" class='demos-content-padded'>test</div>
                     <div class="weui-loadmore" style="margin-bottom:45px;">
                     <i class="weui-loading"></i>
                     <span class="weui-loadmore__tips">正在加载</span>
                     </div>

</div>







原生jquery的实现上滑动加载

<div id="list" class='demos-content-padded'>test</div>
<script src="js/jquery-2.1.4.js"></script>
<script>
var stop=true;
function cando(){
       totalheight = parseFloat($("#tab1").height()) + parseFloat($("#tab1").scrollTop());
       //alert( $("#tab1").height() + "||"+ $("#tab1").scrollTop() +"||"+ $("#tab1")[0].scrollHeight +"||"+ $("#tab1")[0].scrollHeight);
         if($("#tab1")[0].scrollHeight <= totalheight){
                if(stop==true){
                     stop=false;
                     $.post("ajax.php", {start:1, n:50},function(txt){
                     //$("#Loading").before(txt);
        $("#list").append("<li>-----------------------------------------</li>");
                     stop=true;
                     },"text");
                }
         }
}
</script>


利用jquery-weui来实现div内容的上滑动加载
<script src="js/jquery-weui.js"></script>
         <script>
             var loading = false;
             $("#tab1").infinite().on("infinite", function() {
                if(loading) return;
                loading = true;
                setTimeout(function() {
                    $("#list").append("<p>《世界著名计算机教材精选》</p>");
                    loading = false;
                }, 2000);
             });
         </script>






================================================================
jquery如何获取元素的滚动高度

获取浏览器显示区域（可视区域）的高度 ：
$(window).height();
获取浏览器显示区域（可视区域）的宽度 ：
$(window).width();
获取页面的文档高度
$(document).height();
获取页面的文档宽度 ：
$(document).width();
浏览器当前窗口文档body的高度：
$(document.body).height();
浏览器当前窗口文档body的宽度：
$(document.body).width();
获取滚动条到顶部的垂直高度 (即网页被卷上去的高度)
$(document).scrollTop();
获取滚动条到左边的垂直宽度 ：
$(document).scrollLeft();
获取或设置元素的宽度：
$(obj).width();
获取或设置元素的高度：
$(obj).height();

$(obj)[0].scrollHeight(); 滚动文字的实际高度
$(obj).scrollTop(); 滚动条高度

某个元素的上边界到body最顶部的距离：obj.offset().top;（在元素的包含元素不含滚动条的情况下）
某个元素的左边界到body最左边的距离：obj.offset().left;（在元素的包含元素不含滚动条的情况下）
返回当前元素的上边界到它的包含元素的上边界的偏移量：obj.offset().top（在元素的包含元素含滚动条的情况下）
返回当前元素的左边界到它的包含元素的左边界的偏移量：obj.offset().left（在元素的包含元素含滚动条的情况下）
[最后修改由 admin， 于 2018-03-29 14:48:16]
评论Feed 评论Feed: http://blog.xg98.com/feed.asp?q=comment&id=2481

这篇日志没有评论。

此日志不可发表评论。