better-scroll 在不使用Vue 的情况下,怎么玩?

我想在移动端使用better-scroll ,但是我又不想使用Vue,网上的例子都是和Vue结合使用的,求大神指点

阅读 3.9k
3 个回答

直接引入dist/bscroll.min.js,
给你个例子

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0,user-scalable=no">
        <link rel="stylesheet" type="text/css" href="../css/normalize.css"/>
        <link rel="stylesheet" type="text/css" href="../font-awesome-4.7.0/css/font-awesome.css"/>
        <style>
            html,body{
                height: 100%;
            }
            #app{
                display: flex;
                flex-direction: column;
                height: 100%;
            }
            header{
                height: 40px;
                line-height: 40px;
                background-color: #DDD;
            }
            main{
                flex: 1;
                display: block;
                position: relative;
                overflow: hidden;
            }
            ul{
                list-style: none;
                margin: 0;
                padding: 0;
                
                position: initial;
            }
            footer{
                height: 40px;
                line-height: 40px;
                background-color: #DDD;
            }
            li{
                height: 100px;
                border-bottom: 1px solid #DDD;
            }
            .boxconter{
                text-align: center;
                padding: 10px 0;
                height: 50px;
            }
            .boxconter p{
                margin-top: 10px;
                margin-bottom: 0;
            }
            .div{
                height: 100%;
                width: 100%;                
            }
            .boxconter:last-child{
                display: none;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <header>
                我是header
            </header>
            <main>            
                <div class="div">
                        <ul>
                                    
                                <li class="boxconter">加载更多</li>
                                <li class="boxconter">
                                    <span class="fa fa-spinner fa-pulse"></span>
                                    <p>加载中</p>
                                </li>             
                            </ul>
                </div>
            </main>
            <footer>
                我是footer
            </footer>
        </div>
        <script src="dist/bscroll.min.js"></script>
        <script>
            var div = document.getElementsByClassName('div')[0];
            var ul = document.querySelector('.div ul');
            var more = document.querySelectorAll('.div .boxconter');
            var lis = 10;
            for(var i=0;i<lis;i++){            
                var li = document.createElement('li');
                var li_text = document.createTextNode(i);
                li.appendChild(li_text);
                ul.insertBefore(li,more[0]);
            }
            var meunScroll1 = new BScroll(div, {
                    click: true,
                    scrollY: true,                        
                      pullUpLoad:{                //做加载更多时用
                          threshold: -70, // 当上拉到超过顶部 70px 时,                    
                      }
              });
         meunScroll1.on("pullingUp",function(){     //做加载更多时用
                   more[0].style.display="none";
                   more[1].style.display="block";
                   setTimeout(function(){
                       for(var i=0;i<lis;i++){            
                    var li = document.createElement('li');
                    var li_text = document.createTextNode(i);
                    li.appendChild(li_text);
                    ul.insertBefore(li,more[0]);            
                }
                           more[1].style.display="none";
                           more[0].style.display="block";
                           meunScroll1.finishPullUp();                                    
                        meunScroll1.refresh();
                   },1000);
                           
       }); 
        </script>
    </body>
</html>

better—scroll是滴滴(?)前端大牛根据iscroll为更贴合vue所升级的,那些方法你该怎么用就怎么用呗

他就是js文件,简单说你下载下来了你直接引入,然后就使用。。。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题