better-scroll无法捕获事件

Question

better-scroll检测不到滑动事件，而且页面外部会多出一条滚动条？

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>Essential Links</h2>
    <div class="div" ref="prending">
      <ul>
        <li><a href="https://vuejs.org" target="_blank">Core Docs</a></li>
        <li><a href="https://forum.vuejs.org" target="_blank">Forum</a></li>
        <li><a href="https://chat.vuejs.org" target="_blank">Community Chat</a></li>
        <li><a href="https://twitter.com/vuejs" target="_blank">Twitter</a></li>
        <br>
        <li><a href="http://vuejs-templates.github.io/webpack/" target="_blank">Docs for This Template</a></li>
      </ul>
    </div>
  </div>
</template>

<script>
import BScroll from 'better-scroll'
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  methods:{
    initScroll () {
      this.$nextTick(() => {
        if (!this.scroll) {
          this.scroll = new BScroll(this.$refs.prending, {})
          this.scroll.on('touchend', (pos) => {
            // 下拉动作
            console.log("000")
            // if (pos.y < (this.maxScrollY - 30)) {
              // that.getPrendingData()
            // }
          })
        } else {
          this.scroll.refresh()
        }
      })
    }
  },
  mounted(){
    this.initScroll()
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
.div{
  height: 100px;
  overflow: hidden;
  border:1px solid red;
}
ul {
  list-style-type: none;
  padding: 0;
}

li {
  height: 200px;
}

a {
  color: #42b983;
}
</style>

Answer 1

首先better-scroll本身是没有touchend事件的，是有touchEnd，touchend是原生js事件，其次better-scroll你是想上拉加载更多吧（这是上拉），要开启这个功能就要设置pullUpLoad，这个默认是false，你可以设置true，当然可以设置数值,这样达到了目标才触发pullingUp事件，pullingUp就是上拉触发的事件，当你加载数据完成后还要调用finishPullUp告诉 better-scroll 数据已加载。

    this.meunScroll = new BScroll(document.getElementsByTagName('main')[0], {
                        click: true,
                        scrollY: true,                        
                          pullUpLoad:{
                              threshold: -70, // 负值是当上拉到超过低部 70px；正值是距离底部距离 时，                    
                          }
                   });
                   
 this.meunScroll.on("pullingUp",function(){  
       console.log("000")
           this.$nextTick(function(){   
       this.meunScroll.finishPullUp();                                    
        this.meunScroll.refresh();  
      });
       })