鍍金池/ 問答/HTML/ better-scroll無法捕獲事件

better-scroll無法捕獲事件

better-scroll檢測不到滑動事件，而且頁面外部會多出一條滾動條？

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>Essential Links</h2>
    <div class="div" ref="prending">
      <ul>
        <li><a  target="_blank">Core Docs</a></li>
        <li><a  target="_blank">Forum</a></li>
        <li><a  target="_blank">Community Chat</a></li>
        <li><a  target="_blank">Twitter</a></li>
        <br>
        <li><a  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>
回答
編輯回答
安于心

首先better-scroll本身是沒有touchend事件的，是有touchEnd，touchend是原生js事件，其次better-scroll你是想上拉加載更多吧（這是上拉），要開啟這個功能就要設置pullUpLoad，這個默認是false，你可以設置true，當然可以設置數(shù)值,這樣達到了目標才觸發(fā)pullingUp事件，pullingUp就是上拉觸發(fā)的事件，當你加載數(shù)據(jù)完成后還要調(diào)用finishPullUp告訴 better-scroll 數(shù)據(jù)已加載。

    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();  
      });
       })
2017年12月19日 04:01