better-scroll 在不使用Vue 的情況下，怎么玩？

我想在移動(dòng)端使用better-scroll ，但是我又不想使用Vue，網(wǎng)上的例子都是和Vue結(jié)合使用的，求大神指點(diǎn)

回答

編輯回答

笨笨噠

better—scroll是滴滴(?)前端大牛根據(jù)iscroll為更貼合vue所升級的,那些方法你該怎么用就怎么用唄

2018年3月22日 08:35

編輯回答

眼雜

他就是js文件，簡單說你下載下來了你直接引入，然后就使用。。。

2017年9月19日 08:52

編輯回答

菊外人

直接引入dist/bscroll.min.js，
給你個(gè)例子

<!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:{                //做加載更多時(shí)用
                          threshold: -70, // 當(dāng)上拉到超過頂部 70px 時(shí)，                    
                      }
              });
         meunScroll1.on("pullingUp",function(){     //做加載更多時(shí)用
                   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>

2018年4月24日 21:10