better-scroll在vue中实现原生滚动和上拉/下拉加载的效果

拼搏现实的明天。 2022-05-28 09:43 30阅读 0赞

为了方便在VUE中的使用，可以把better-scroll抽化成一个组件，比如我抽化成了一个scroll组件，如下：

//ref="wrapper"不能更改

//此处放加载异步加载的内容

//此处为上拉后没有数据的时候显示的提示

</div>

//此处为下拉刷新后没有数据的时候显示的提示

<div class="top">  
      <slot name="footer2"></slot>  
    </div>  
  </div>  
</template>  
<script type="text/ecmascript-6">  
  import BScroll from 'better-scroll'  
  export default \{  
    props: \{  
      /\*\*  
       \* 1 滚动的时候会派发scroll事件，会截流。  
       \* 2 滚动的时候实时派发scroll事件，不会截流。  
       \* 3 除了实时派发scroll事件，在swipe的情况下仍然能实时派发scroll事件  
       \*/  
      probeType: \{  
        type: Number,  
        default: 1  
      \},  
      /\*\*  
       \* 点击列表是否派发click事件  
       \*/  
      click: \{  
        type: Boolean,  
        default: true  
      \},  
      /\*\*  
       \* 是否开启横向滚动  
       \*/  
      scrollX: \{  
        type: Boolean,  
        default: false  
      \},  
      /\*\*  
       \* 是否派发滚动事件  
       \*/  
      listenScroll: \{  
        type: Boolean,  
        default: false  
      \},  
      /\*\*  
       \* 列表的数据  
       \*/  
      data: \{  
        type: Array,  
        default: null  
      \},  
      /\*\*  
       \* 是否派发滚动到底部的事件，用于上拉加载  
       \*/  
      pullup: \{  
        type: Boolean,  
        default: true  
      \},  
      /\*\*  
       \* 是否派发顶部下拉的事件，用于下拉刷新  
       \*/  
      pulldown: \{  
        type: Boolean,  
        default: false  
      \},  
      /\*\*  
       \* 是否派发列表滚动开始的事件  
       \*/  
      beforeScroll: \{  
        type: Boolean,  
        default: false  
      \},  
      /\*\*  
       \* 当数据更新后，刷新scroll的延时。  
       \*/  
      refreshDelay: \{  
        type: Number,  
        default: 20  
      \}  
    \},  
    mounted() \{  
      // 保证在DOM渲染完毕后初始化better-scroll  
      setTimeout(() => \{  
        this.\_initScroll()  
      \}, 20)  
    \},  
    methods: \{  
      \_initScroll() \{  
        if (!this.$refs.wrapper) \{  
          return  
        \}  
        // better-scroll的初始化  
        this.scroll = new BScroll(this.$refs.wrapper, \{  
          probeType: this.probeType,  
          click: this.click,  
          scrollX: this.scrollX  
        \})  
  
  
        // 是否派发滚动事件  
        if (this.listenScroll) \{  
          let me = this  
          this.scroll.on('scroll', (pos) => \{  
            me.$emit('scroll', pos)  
          \})  
        \}  
  
  
        // 是否派发滚动到底部事件，用于上拉加载  
        if (this.pullup) \{  
          this.scroll.on('scrollEnd', () => \{  
            // 滚动到底部  
              
            if (this.scroll.y <= (this.scroll.maxScrollY + 50)) \{  
              this.$emit('scrollToEnd')  
            \}  
          \})  
        \}  
  
  
        // 是否派发顶部下拉事件，用于下拉刷新  
        if (this.pulldown) \{  
          this.scroll.on('touchend', (pos) => \{  
            // 下拉动作  
            if (pos.y > 50) \{  
              this.$emit('pulldown')  
            \}  
          \})  
        \}  
  
  
        // 是否派发列表滚动开始的事件  
        if (this.beforeScroll) \{  
          this.scroll.on('beforeScrollStart', () => \{  
            this.$emit('beforeScroll')  
          \})  
        \}  
      \},  
      disable() \{  
        // 代理better-scroll的disable方法  
        this.scroll && this.scroll.disable()  
      \},  
      enable() \{  
        // 代理better-scroll的enable方法  
        this.scroll &&this.scroll.enable()\},  
      refresh()\{this.scroll &&this.scroll.refresh()\},  
      scrollTo()\{this.scroll &&this.scroll.scrollTo.apply(this.scroll, arguments)\},  
      scrollToElement()\{this.scroll &&this.scroll.scrollToElement.apply(this.scroll, arguments)\}\},  
    watch:\{// 监听数据的变化，延时refreshDelay时间后调用refresh方法重新计算，保证滚动效果正常  
      data()\{  
        setTimeout(()=>\{this.refresh()\},this.refreshDelay)\}  
      \}  
    \}  
</script>  
<style>  
  .top\{  
    position:fixed;  
    top:0;  
    left:0;  
    width:100%;  
  \}  
  .footer\{  
    position:fixed;  
    bottom:0;  
    left:0;  
    width:100%;  
  \}

</style>

好了，组件抽化成功，下面就是在父组件中引入他

//下面scroll中的属性  :data="soon\_auction\_ul"是数据数组的盒子    :pulldown="pulldown"是是否开启刷新的开关  @pulldown="loadData" 是在下拉的时候调用loadData（）函数@scrollToEnd="loadData"实在上拉的时候调用loadData（）函数

<scroll class="wrapper" :data="soon\_auction\_ul" :pulldown="pulldown" @pulldown="loadData" @scrollToEnd="loadData">  
      <ul class="soon\_auction\_ul content" slot="header">  
        <li v-for="item in soon\_auction\_ul">  
          <div class="soon\_auction\_ultop">  
            <div><img src="../assets/img/aboutus.png" alt=""></div>  
            <div></div>  
            <div><img src="../assets/img/ico.png" alt=""></div>  
          </div>  
          <div><span>\{ \{ item.biaoti \}\}</span></div>  
          <div>\{ \{ item.addres \}\}</div>  
        </li>  
      </ul>  
      <div slot="footer" v-if="shifou" class="nodata">\{ \{ xianshi \}\}</div>  
      <div slot="footer2" v-if="shifou2" class="nodata2">\{ \{ xianshi2 \}\}</div>  
    </scroll>  
  </div>  
</template>  
  
  
<script>  
import BScroll from 'better-scroll'  
import scroll from '../components/scroll'  
export default \{  
  components:\{  
    scroll,

\},

//created钩子函数时调用一次loadData（）函数作为初始数据显示

created() \{  
      this.loadData()  
  \},  
  data () \{  
    return \{  
      soon\_auction\_ul:\[\],  
      // data: \[\],  
      pulldown: true,  
      num\_:0,  
      xianshi:'已无更多数据',  
      xianshi2:'加载完成',  
      shifou:false,  
      shifou2:false,  
    \}  
  \},

methods:\{

\},

//loadData（）函数来实现数据加载，可自行实现，我写的是加载的本地数据，可以无视

loadData() \{  
        this.$http.get('api/seller2').then((res) => \{  
          let data\_length=res.data.data.supports2.length  
          let index\_paimai\_1=res.data.data.supports2\[this.num\_\]  
          this.num\_++  
          if (this.num\_>=data\_length+1) \{  
            this.shifou=true  
            setTimeout(()=>\{this.shifou=false\},1500)  
            return false  
          \}else\{  
            this.soon\_auction\_ul.push(index\_paimai\_1)  
            this.shifou=false  
            this.shifou2=true  
            setTimeout(()=>\{this.shifou2=false\},2000)  
          \}  
          // this.soon\_auction\_ul = res.data.data.supports2.concat(this.soon\_auction\_ul)  
        \})  
      \}  
  \},  
\}  
</script>  
  
//样式自己实现  
<style scoped>  
  
</style>