iscroll的简单使用

最新推荐文章于 2024-08-08 07:50:07 发布

_木小夕_

最新推荐文章于 2024-08-08 07:50:07 发布

阅读量720

点赞数

分类专栏：前端文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/bo_gu/article/details/129026270

版权

前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

文章介绍了在iOS中由于原生拖动存在bug，公司选择禁用并采用iscroll库来实现H5项目的滚动拖拽功能。iscroll的使用包括引入js文件，设置三层结构的HTML容器，初始化iscroll实例，并在数据加载后调用refresh方法进行更新。

摘要由CSDN通过智能技术生成

iOS自带的拖动总是被测试小姐姐挑出bug，所以我们公司用的模板禁用了iOS原生的滚动拖拽功能，h5项目哈
那有滚动拖拽需求的时候就需要用到iscroll了
首先需要引入一下

<script src="js/base/iscroll.js"></script>

找到你需要滚动的容器，这里强调一下，必须是三层包裹的结构，两层的会有bug
类似

<div id="wrapper">
    <ul>
        <li>...</li>
        <li>...</li>
        ...
    </ul>
</div>

最外层的div命名容器，ul才是可以滚动的，ul里面正常放需要的内容

然后在js里先初始化iscroll

    loaded()

    var myScroll;

    function loaded() {
        myScroll = new IScroll('#wrapper', {
            scrollY: true,
            bounceTime: 600, //弹力动画持续的毫秒数
            // bounce: false,
            click: true,
            deceleration: 0.0008 // 滚动动量减速越大越快，建议不大于0.01 0.0006
        });
        console.log('初始化myScroll', myScroll);

    }

在读到数据，显示出容器之后，需要刷新一下iscroll，例如

 function updateScroll() {
        setTimeout(function () {
            myScroll.refresh();
        }, 0);
    }

    ifHaveResult()
    function ifHaveResult() {
    //自已的代码逻辑正常写，这里仅做示例
        resultList = localStorage.getItem('resultList')

        if (resultList) {
            console.log('有结果');
            initList()
            $('.hasResult').show()
            $('.index').hide()
            $('.notResult').hide()
        }
        else {
            console.log('没有结果');
            $('.index').show()
            $('.hasResult').hide()
            $('.notResult').hide()
        }
        //主要就是在show（）之后要调一下刷新!!!!!
        updateScroll()
    }