Vue2.0 实现滚动视图+头部悬停+侧边索引

最新推荐文章于 2024-08-04 01:48:09 发布

Micah_A

最新推荐文章于 2024-08-04 01:48:09 发布

阅读量7.4k

点赞数

分类专栏： Vue.js 文章标签： Vue 滚动视图 header停靠 better-scroll listview

本文链接：https://blog.csdn.net/lvchenqiang_/article/details/79255683

版权

本文介绍了如何使用Vue2.0和better-scroll实现滚动视图，结合头部停靠及侧边索引，创建类似通讯录的UI效果。文章分为前言、需求分析和代码实现三部分，详细讲解了组件的布局和封装方法。

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

前言

之前写过一篇基于better-scroll实现轮播图组件的文章，这篇文章是对better-scroll封装后,实现一个类似于通讯录的UI.效果如下：

这里写图片描述

需求分析

根据需求，我们可以知道,整个UI大致分为三个模块。
1、头部导航
2、内容滚动区域
3、索引列表区域

代码实现

1、首先我们对better-scroll进行一个简单的封装，方便我们下文的使用

scroll.vue

//提供一个简单的模板
<template>
  <div ref="wrapper">
    <slot></slot>
  </div>
</template>

// 对better-scroll简单的封装，封装一些默认的配置 以及分发部分事件
<script type="text/ecmascript-6">
  import BScroll from 'better-scroll'
  export default {
    props: {
      probeType: {
        type: Number,
        default: 1
      },
      click: {
        type: Boolean,
        default: true
      },
      listenScroll: {
        type: Boolean,
        default: false
      },
      data: {
        type: Array,
        default: null
      },
      pullup: {
        type: Boolean,
        default: false
      },
      beforeScroll: {
        type: Boolean,
        default: false
      },
      refreshDelay: {
        type: Number,
        default: 20
      }
    },
    mounted() {
      setTimeout(() => {
        this._initScroll()
      }, 20)
    },
    methods: {
      _initScroll() {
        if (!this.$refs.wrapper) {
          return
        }
        this.scroll = new BScroll(this.$refs.wrapper, {
          probeType: this.probeType,
          click: this.click
        })

        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.beforeScroll) {
          this.scroll.on('beforeScrollStart', () => {
            this.$emit('beforeScroll')
          })
        }
      },
      disable() {
        this.scroll && this.scroll.disable()
      },
      enable() {
        this.scroll && this.scroll.enable()
      },
      refresh() {
        this.scroll && this.scroll.refresh()
      },
      scrollTo() {
        this.scroll && this.scroll.scrollTo.apply