web app iscroll

最新推荐文章于 2025-04-29 02:58:17 发布

yxq198514

最新推荐文章于 2025-04-29 02:58:17 发布

阅读量512

点赞数

分类专栏： html5 webapp 文章标签： html5

本文链接：https://blog.youkuaiyun.com/yxq198514/article/details/45170983

版权

webapp 同时被 2 个专栏收录

2 篇文章

订阅专栏

html5

1 篇文章

订阅专栏

第一次在页面里正好iscroll5失败，容器始终不能滚动，所以用原生方式写了一段

  var timer, str = "";
      $(window).on('touchmove', function() {
        console.log($(".comment").css("style") == "block")
        if ($(".comment").css("display") == "block") {
          clearTimeout(timer);
          timer = setTimeout(function() {
            if ($(window).height() + $(window).scrollTop() >= $("body").height()) {
              $.ajax({
              url: 'js/data.json',
              dataType: 'json',
              success: function(e) {
                var data = e.events;
                for (var i = 0; i < data.length; i++) {
                  str += '<li><div class="user-info"><img src="' + data[i].src + '" class="user-pic">' + '<div class="name">' + data[i].name + '</div>' + '<div class="time"><i class="' + data[i].love + ' ico-s"></i><span>' + data[i].time + '</span></div>' + '</div><div class="user-comment"><p>' + data[i].content + '</p></div></li>'
                }
                $("#thelist").append(str)
                }
              });
        }}, 300)
        }})

后来去看了iscroll4的资料，发现用原生的写有很多用户体验需要改进，之后发现是容器少了一个position:absoulte定位导致JS不生效，所以又基于iscroll5写了个demo

  var myScroll =function(el,callback,options){
        var pullStart,maxY=0;
        this.init = function(){
           var myScroll = new IScroll(el,{});
           myScroll.on('scrollStart', function () {
             $(".pull-action").html("数据加载中……");
           })
        myScroll.on('scrollEnd', function () {
           maxY=Math.min(maxY,myScroll.y);
           if ( (this.directionY == 1) && myScroll.y < 0 && (maxY >= myScroll.y)){
              console.log(myScroll.y+","+maxY+","+myScroll.y)
              callback();
              setTimeout(function () {
                  myScroll.refresh();
              }, 100);
              $(".pull-action").html("下拉加载更多")
           }
        })
        }
    }
    $(function(){

      var scroll= new myScroll("#wrapper",handlePullDown);
      scroll.init()
      function handlePullDown() {
          var str="";
          for (var i = 0; i < 10; i++) {
            str += '<li>111111111111</li>'
          }
          $("#wrapper ul").append(str)
      }

    })
    document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);