Vue中将better-scroll封装成一个组件，并实现完美吸顶效果

最新推荐文章于 2024-04-27 12:02:33 发布

鸭绒

最新推荐文章于 2024-04-27 12:02:33 发布

阅读量1.4k

点赞数 2

分类专栏： vue 文章标签：前端 vue.js better-scroll

本文链接：https://blog.csdn.net/weixin_43334673/article/details/110130720

版权

本文介绍如何在Vue中将better-scroll封装成组件，并详细解析如何利用障眼法实现完美吸顶效果。内容包括better-scroll的使用、吸顶效果的原理以及关键代码的展示。

摘要由CSDN通过智能技术生成

先来看看实现的效果：

在这里插入图片描述
上面的效果就是利用了better-scroll实现的滑动，可见better-scroll实现的弹性效果还是很不错的，但是better-scroll还是有很多bug的，因此对初次使用better-scroll的人不够友好。以往我们做吸顶效果都是直接使用 position:sticky 实现粘性布局,但该属性在该库就失效了，因此吸顶也成了一件难题，还好有人想到了好办法解决了该问题，后面再说。

直接看封装好的better-scroll:

<template>
  <div ref="wrapper" >
    <slot></slot>
  </div>
</template>

<script>
import BScroll from "better-scroll"
export default {
   
  props: {
   
    data: {
   
      type: Array,
      default: () => {
   
        return []
      }
    }
  },
  data () {
   
    return {
   
      scroll: {
   }
    }
  },
  mounted () {
   
    this.$nextTick(() => {
   
      this.initiate()
    })
  },
  methods: {
   
    initiate: function () {
   
      if (!this.$refs.wrapper) return
      this.scroll = new BScroll(this.$refs.wrapper, {
   
        probeType: 3,
        click: true,
        pullUpload: true,
        bounce: true
      })
      this.scroll.on("scroll", position => {
   
        this.$emit('currentPosition', position)
      })

    },
    refresh () {
   
      this.scroll && this.scroll.refresh && this.scroll.refresh();
    }
  },
  watch: {
   
    data () {
   
      // 这里监听的是props传入的data，而不是钩子中的data
      // 在该组件并没有使用传进来的data，但很有必要传进来，因为当外部组件通过异步获取数据前，		better-scroll就已经初始化好了，但此时初始化的可滚动的高度是还没有拿到服务器数据就初始化好的
      //那么当数据加载好后，就需要让better-scroll调用refresh()函数刷新一下可滚动的高度，这一步很重要，否则无法滚动。
      setTimeout(this.refresh, 20)
    }
  }
}
</script>

<style scoped>
</style>

主组件代码：不必看，下面分开展示重要代码

<!--  -->
<template>
  <div id="takeOut">
    <position></position>
    <search-box class="boxAttach"
                v-show="showBox"></search-box>
    <better-scroll class='wrapper'
                   @currentPosition="currentPosition"
                   :data="shopList">
      <div class="content">