鍍金池/ 問(wèn)答/HTML/ better-scroll怎么做上拉加載？

better-scroll怎么做上拉加載？

<template>
  <div class="wrapper" ref="wrapper">
    <ul class="content">
        <li v-for="n in 100" :key="n">{{n}}</li>
    </ul>
  </div>
</template>
<script>
import BScroll from "better-scroll";
export default {
  mounted() {
    this.$nextTick(() => {
      this.scroll = new BScroll(this.$refs.wrapper, {});
    });
  }
};
</script>
<style lang="scss">
.wrapper {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  background: #fff;
  .content {
    position: relative;
    z-index: 10;
    background: #fff;
    li {
      height: 30px;
      line-height: 30px;
      font-size: 12px;
      padding-left: 20px;
      list-style: none;
      border-bottom: 1px solid #000;
    }
  }
}
</style>

后面怎么下拉加載更多數(shù)據(jù)？謝謝！

回答
編輯回答
筱饞貓

github下源碼 看一下demo就知道了

2018年8月18日 00:53
編輯回答
編輯回答
瞄小懶
<!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;
            }
            .list li{
                width: 50%;
                text-align: center;
                height:36px;
                line-height: 36px;    
                display: inline-block;            
            }
            .div{
                height: 100%;
                width: 100%;
                display: none;
            }
            .div:nth-child(1){
                display: block;
            }
        </style>
    
    </head>
    <body  orient="landspace">
        <div id="app">
            <header>
                我是header
            </header>
            <ul class="list">
                <li>1</li><li>2</li>
            </ul>
            <main>            
                <div class="div">
                        <ul>
                                <li v-for="item in items">{{item}}</li>    
                                <li class="boxconter" v-show="!boxshow">加載更多</li>
                                <li class="boxconter" v-show="boxshow">
                                    <span class="fa fa-spinner fa-pulse"></span>
                                    <p>{{boxtext}}</p>
                                </li>             
                            </ul>
                </div>
                <div class="div">
                        <ul>
                                <li v-for="item in 20">{{item+10}}</li>    
                                <li class="boxconter" v-show="!boxshow">加載更多</li>
                                <li class="boxconter" v-show="boxshow">
                                    <span class="fa fa-spinner fa-pulse"></span>
                                    <p>{{boxtext}}</p>
                                </li>             
                            </ul>
                </div>
            </main>
            <footer>
                我是footer
            </footer>
        </div>
        <script src="dist/vue.js"></script>
        <script src="dist/bscroll.min.js"></script>
        <script>
        
            var vm = new Vue({
                el:"#app",
                data:{
                    items:10,
                    boxshow:true,
                    boxtext:"加載中"
                },
                methods:{
                    aaa(){
                        document.getElementsByTagName('main')[0].style.display = 'block';
                        //this.meunScroll.refresh();
                    }
                },
                mounted:function(){
                    var div = document.getElementsByClassName('div');
                    this.meunScroll1 = new BScroll(div[0], {
                        click: true,
                        scrollY: true,                        
                          pullUpLoad:{
                              threshold: -70, // 當(dāng)上拉到超過(guò)底部 70px 時(shí)，                    
                          }
                   });
                   console.log(this.meunScroll1);
                   this.meunScroll2 = new BScroll(div[1], {
                        click: true,
                        scrollY: true,                        
                          pullUpLoad:{
                              threshold: -70, // 當(dāng)上拉到超過(guò)底部 70px 時(shí)，                    
                          }
                   });
                   var li = document.getElementsByClassName('list')[0].getElementsByTagName('li');
                   [...li].forEach(function(el,index){
                       this.index = index;
                       el.onclick = function(){
                            div[0].style.display = 'none';
                            div[1].style.display = 'none';
                            div[index].style.display = 'block';    
                            vm.meunScroll2.refresh();                
                        };
                   })
                  this.meunScroll1.on("pullingUp",function(){    
                               this.boxshow = true;
                                setTimeout(function(){
                                    this.items +=10;  
                                    this.$nextTick(function(){    
                                    this.boxshow = false;                                
                                    this.meunScroll1.finishPullUp();                                    
                                    this.meunScroll1.refresh();  
                                });
                                }.bind(this),1000);                                 
                   }.bind(this));     
                }
            })
        </script>
    </body>
</html>
2018年6月12日 07:35