vue_music:封装scroll.vue组件

妖狐艹你老母 2022-04-04 07:38 230阅读 0赞

在项目中经常用到滚动，结合Better-scroll封装了sroll.vue组件  
参考链接：[https://ustbhuangyi.github.io...][https_ustbhuangyi.github.io...]  
[http://www.imooc.com/article/...][http_www.imooc.com_article_...]  
`**better-scroll 只处理容器（wrapper）的第一个子元素（content）的滚动，其它的元素都会被忽略**。`

### 1.html部分 ###

这个很简单，有一个插槽slot  
`**better-scroll 只处理容器（wrapper）的第一个子元素（content）的滚动，其它的元素都会被忽略。**`

### 2.功能 ###

1.  滚动特性props：是否截流滚动、是否派发事件、是否有数据传入
2.  初始化Better-scroll

export default {
      props: {
        probeType: {
           //有时候我们需要知道滚动的位置。
           //当 probeType 为 1 的时候，会非实时（屏幕滑动超过一定时间后:截流）派发scroll 事件；
           //当 probeType 为 2 的时候，会在屏幕滑动的过程中实时（不截流）的派发 scroll 事件；
           //当 probeType 为 3 的时候，不仅在屏幕滑动的过程中，而且在 momentum（回弹） 滚动动画运行过程中实时派发 scroll 事件。
           //如果没有设置该值，其默认值为 0，即不派发 scroll 事件
          type: Number,
          default: 1
        },
        click: {
          //click是否派发click事件，通常判断浏览器派发的click还是betterscroll派发的click，
          //可以用event._constructed判断，为true,则是betterscroll派发的
          type: Boolean,
          defalut: true
        },
        data: {
          //滚动的界面是否有了数据（这些数据多数是异步获取的）
          //根据这个当有数据的时候refresh,在watch中有相关逻辑
          type: Array,
          default: null
        },
        listenScroll: {
          //是否派发滚动位置
          type: Boolean,
          default: false
        },
        //实现上拉刷新
        pullup: {
            type: Boolean,
            default: false
        },
        //实现下拉刷新
        pulldown: {
          type: Boolean,
          default: false
        },
        //开始滚动的时候派发一个事件
        beforeScroll: {
            type: Boolean,
            default: false
        }
      },
      data() {
        return {
    
        }
      },
      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) => {
              //pos.y
              //往上滑动负数，往下滑动正数
              me.$emit('scroll', pos)
            })
          }
          //上拉刷新，滚动到底部派发一个事件
          if (this.pullup) {
              this.scroll.on('scrollEnd', () => {
                  if(this.scroll.y <= (this.scroll.maxScrollY + 50)) {
                      this.$emit('scrllToEnd')
                  }
              })
          }
          //是否派发顶部下拉事件，用于下拉刷新
          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')
              })
          }
        },
        enable() {
          this.scroll && this.scroll.enable()
        },
        disable() {
          this.scroll && this.scroll.disable()
        },
        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: {
        data() {
          setTimeout(() => {
            this.refresh()
          }, 20)
        }
      }
    }

### 3.使用 ###

在recommend.vue中使用

![在这里插入图片描述][20181215204800737.png]

`注：样式`

//控制高度才能滚动
    .recommend {
        position: fixed;
        width: 100%;
        top: 88px;
        bottom: 0;
    }
    .recommend-content {
        height: 100%;
        overflow: hidden;
    }

原文地址：[https://segmentfault.com/a/1190000016979411][https_segmentfault.com_a_1190000016979411]

[https_ustbhuangyi.github.io...]: https://ustbhuangyi.github.io/better-scroll/doc/zh-hans/#better-scroll%20%E6%98%AF%E4%BB%80%E4%B9%88
[http_www.imooc.com_article_...]: http://www.imooc.com/article/18232
[20181215204800737.png]: /images/20220404/0d9e6ee3d9c2496297925b427ac63e7c.png
[https_segmentfault.com_a_1190000016979411]: https://segmentfault.com/a/1190000016979411