Iscroll5的简单配置和方法

最新推荐文章于 2021-10-28 21:38:59 发布

原创最新推荐文章于 2021-10-28 21:38:59 发布 · 836 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了iscroll组件的关键配置选项及其使用方法，包括纵向滚动禁用、惯性滚动等功能设置，以及如何通过refresh等方法解决页面加载时高度计算不准确的问题。

一些配置项：可以从源码里关键词搜索

this.options = {
    eventPassthrough:true,//自己试
    scrollX:true,//横向可以滚
    scrollY:false,//纵向不可以滚
    snap: true,//对齐
    snapSpeed: 400,//对齐速度
    directionLockThreshold: 5,//多少像素开始监听
    momentum: true,//是否有惯性
    preventDefault: true//阻止默认事件
};

一些方法：可以从源码里关键词搜索
refresh()//刷新
scrollTo()//滚到
next()//下一个index
prev()//上一个index

解决当页面没有加载完高度计算不正确的情况
第一种测试效果还是不太好
var scrollerHeight = myScroll.scrollerHeight;
var timer=window.setInterval(function(){
    if(scrollerHeight==myScroll.scrollerHeight){
        window.clearInterval(timer);
    }
    $("#main_scroll").height($("#main_scroll")[0].clientHeight+"px");
    myScroll.refresh();
},200);
第二种
var timer=window.setInterval(function(){
    var scrollerHeight = $("#main_scroll")[0].clientHeight;
        if(scrollerHeight==myScroll.scrollerHeight){
            window.clearInterval(timer);
        }
    myScroll.refresh();
    },500);