滑动插件Iscroll

本文介绍iScroll组件的基本使用方法,并提供一个简单的示例。此外,还探讨了解决滑动过程中点击导致页面跳转的问题。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

iscroll

官网

http://cubiq.org/iscroll-5

简单demo

html

<body onload="loaded()">
    <div id="nav">MaRain导航栏</div>
    <div id="wrapper">
        <div id="scroller"> 
            <ul >
            <li class="item1">列表 001</li>
            <li class="item2">列表 002</li>
            <li class="item3">列表 003</li>
            <li class="item4">列表 004</li>
            <li class="item5">列表 005</li>
            <li class="item6">列表 006</li>
            <li class="item7">列表 007</li>
            <li class="item8">列表 008</li>
            <li class="item9">列表 009</li>
            <li class="item10">列表 010</li>
            <li class="item11">列表 011</li>
            <li class="item12">列表 012</li>
            <li class="item13">列表 013</li>
            <li class="item14">列表 014</li>
            <li class="item15">列表 015</li>
            <li class="item16">列表 016</li>
            <li class="item17">列表 017</li>
            <li class="item18">列表 018</li>
            <li class="item19">列表 019</li>
            <li class="item20">列表 020</li>
            <li class="item21">列表 021</li>
            <li class="item22">列表 022</li>
            <li class="item23">列表 023</li>
            <li class="item24">列表 024</li>
            <li class="item25">列表 025</li>
            <li class="item26">列表 026</li>
            <li class="item27">列表 027</li>
            <li class="item28">列表 028</li>
            <li class="item29">列表 029</li>
            <li class="item30">列表 030</li>
            <li class="item31">列表 031</li>
            <li class="item32">列表 032</li>
        </ul>
    </div>
</div>
<div id="footer">
        底部Copyright &copy; 2017
</div>

css

*{
        padding: 0; 
        margin: 0;
    }
    #nav{
        position: absolute;
        left: 0;
        width: 100%;        
        color: #fff;
        text-align: center;
        line-height: 45px;
        height: 45px;
        font-size: 18px;
        background: #f03;
    }
    #footer{
        position: absolute;
        bottom:0 ;
        width: 100%;        
        color: #fff;
        text-align: center;
        line-height: 45px;
        height: 45px;
        font-size: 18px;
        background: #f03;
    }

    #wrapper{
        position: absolute;
        top: 45px;
        bottom:45px;
        width: 100%;
        overflow: hidden;
    }
    #scroller {
        position: absolute;
        z-index: 1;
        -webkit-tap-highlight-color: rgba(0,0,0,0);
        width: 100%;
        -webkit-transform: translateZ(0);
        -moz-transform: translateZ(0);
        -ms-transform: translateZ(0);
        -o-transform: translateZ(0);
        transform: translateZ(0);
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        -webkit-text-size-adjust: none;
        -moz-text-size-adjust: none;
        -ms-text-size-adjust: none;
        -o-text-size-adjust: none;
        text-size-adjust: none;
    }

javascript

    <script src="iscroll.js"></script>
    <script>
        var myScroll;
        function loaded () {
            myScroll = new IScroll('#wrapper', { mouseWheel: true, click: true });
        }
    </script>

就可以实现一个滑动效果

这里写图片描述

文档

极客学院的文档:
http://wiki.jikexueyuan.com/project/iscroll-5/versions.html

遇到的问题

问题描述:在使用iscroll.js做页面时,在移动端滚动过程中想点击让滑动停止,却会触发点击效果,造成每次滑动完成,页面都跳转。虽然说这个用户习惯有关,但是每次滑动想停止都会跳转确实不理想。

文档说不要打开click 用tap 自定义的方法。但是这个不知道怎么来定义。而且我还用了vue,绑定了v-on:click 方法。滑动的click 关掉就不触发了。应该怎么来做,哪位大神可以指导一下,不胜感激。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值