博客

scroll组件的封装

• 说白了这个问题产生的原因就是 图片在计算滚动高度的时候没有计算出来
• 所以我们需要 在图片加载出来以后对这个滚动的高度重新计算

一般的scroll组件的封装

我们一般的封装也就要封装这些东西, 我们封装的目的就是为了能直接在其他的地方这样

<scroll>

content 这样就使用了 滚动的组件

</scroll>

<template>
  <div class = 'wrapper' ref = 'wrapper'>
    <!-- 这个地方我们还少了一个content -->
    <!-- 这个插槽会直接替换掉放在里面的元素 -->
    <div class = 'content' ref = 'content'>
      <slot>

      </slot>
    </div>
  </div>
</template>

<script>
  import BScroll from 'better-scroll'

	export default {
    props: {
      probeType: {
        Type: Number,
        default: 3
      },
      pullUpLoad: {
        Type: Boolean,
        default: false
      }
    },
    name: 'Scroll',
    data() {
      return {
        scroll: null
      }
    },
    mounted() {
      // 但是我们这样去获取我们的这个wrapper不太好
      this.scroll = new BScroll(this.$refs.wrapper, {
        	probeType: this.probeType,
        	click: true,
          pullUpLoad: this.pullUpLoad
      })

      // 2. 监听我们的活动的位置
      this.scroll.on('scroll', position => {
        // console.log(position)
        this.$emit('scroll', position)
      })

      // 3. 监听的我们的上拉事件
      // 但是我们并不是每个人都需要监听上拉加载这个是不一定的
      this.scroll.on('pullingUp', () => {
        this.$emit('pullingUp')
      })
    },
    methods: {
      scrollTo(x, y, time=300) {
        this.scroll.scrollTo(x, y, time);
      },
      finishPullUp() {
        // 这个finishPullUp必须调用了以后我们才能
        // 再次触发上拉加载的事件 这个是better-scroll的内部方法
        this.scroll.finishPullUp()
      }
    }
	}
</script>

<style scoped>

</style>

scroll.vue组件的使用

传入数据然后就可以使用了

	<scroll class='content' ref='scroll'
      :probe-type='3'
      :pullUpLoad='true'
      @scroll='contentScroll'
      @pullingUp='loadMore'>
      <home-swiper :banners='banners'></home-swiper>
      <recommed-view :recommonds='recommonds'></recommed-view>
      <feature-view></feature-view>
      <tab-control class='tab-control'
          :titles='["流行", "新款", "精选"]'
          @tabClick='tabClick'
          ref='tabControl'></tab-control>

      <!-- 然后我们这个是写死的我们要想要他们有反应的话 -->
      <!-- 所以这个东西我们可定是不能写死的 -->
      <goods-list :goods='showGoods'></goods-list>
      <!-- 然后在这里 -->
    </scroll>

better-scroll封装后不能滚动到底部

问题

滚动有些时候可以滚到底部, 但是有些时候又根本滚不到底

我要解决滚动的这个bug

我们就先把之前的上拉加载取消掉, 但是我还是不取消掉吧

解决

它有些时候它又好了, 但是你肯定不能让用户等啊

产生原因

这里我们就来看看

scroll对象里面的这个东西, 这个scrollHeight就是记录我们的scroll里面是有多少东西是可以滚动的

这个4314肯定就是没有问题的, 但是我们加上各个地方的东西因该是有这么高的

好把这个东西很明显就有问题了, 所以这个东西肯定就 是有问题的

滚动的话也就是只能滚1300+ 而我们这里就只给了1300

我们怎么样才能让我们把这个高度从新计算一下呢

这个时候我们就使用它的scroll.refresh() 方法就而可以了

所以我们现在就需要取调用一下这个refresh

那么我么要怎么才能调用, 它才会从新计算我们的高度

看起来是一旦图片加载成功我们就要调用这个refresh方法让它来重新刷新这个高度

七. 解决首页中Better-Scroll可滚动区域的问题

• Better-Scroll在决定有多少区域可以滚动的时候, 是根据可滚动的高度scrollHeight决定的
  • scrollHeight属性是根据子组件的高度better-scroll的content中的子组件的高度决定的
  • 但是我们的首页中刚开始在计算scrollHeight属性时, 是没有将图片计算在内的
  • 所以计算出来的高度是错误的
  • 而后来加载之后有了新的高度scrollHeight没有进行更新所以滚动出现了问题
• 如何解决这个问题
  • 我就可以监听每一张图片是否加载完成, 只要有一张图片加载完成, 我们就调用refresh()方法
    • img.onload = function() {}一旦图片加载完成以后就会执行这个函数
    • 但是vue里面没有必要
  • 如何监听图片加载完成
    • 原生的js监听图片: img.onload = function() {}
    • Vue 中监听: @load = “方法”
  • 调用scroll的refresh()方法

我们就在对应的地方监听加载就可以了

所以我们就要这样, 我们就不需要去原生的操作dom

<img :src="goodsItem.show.img" alt="" @load = 'imageLoad'> 

然后下面试试能不能监听到这个东西

    methods: {
      imageLoad() {
        console.log('imgload')
      }
    }

确实监听到了, 所以我们就再这里监听到了

然后我们就需要去调用对应的refresh方法

这里下面我们就提出了两种方法, 这两种方法都可以让它实现通讯

同时我们也可以不用这个东西叫做事件总线

哪我们就可以用这个事件总线了

但是默认情况下是没有this.$bus这个东西的

那我们因该怎么做呢, 如果我们都要用的话我们就可以在原型上做这个操作

我们找到根目录下面的main.js文件它添一个$bus的事件总线

import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

Vue.prototype.$bus = new Vue()

new Vue({
  render: h => h(App),
  router
}).$mount('#app')

我们的Vue实例是可以将它作为事件总线的, $bus这个时候我们的逻辑就大通了

这样的话我们就成功在 Home.vue中监听到GoodsListItem中的方法

Home.vue

      this.$bus.$on('itemImageLoad', () => {
        console.log('-----')
      })

GoodsListItem.vue

    methods: {
      imageLoad() {
        this.$bus.$emit('itemImageLoad')
      }
    }

成功完成监听, 这个时候我们就确实监听到了这个事件

现在的话我们就不会出现这个问题了

这个时候我们就使用它的scroll.refresh() 方法就而可以了

  this.$bus.$on('itemImageLoad', () => {
    this.$refs.scroll.scroll.refresh()
  })

你要是觉得这个东西太长可以做一层封装