Better-Scroll how to solve the problem of a scrollable area

• Better-Scroll when deciding how many can scroll area is determined by the properties scrollerHeight

  • scrollerHeight properties is highly content subassembly Better-Scroll discharge in accordance with
  • But our home in the beginning when calculating scrollerHeight property, is not counted in the picture
  • All, calculated tell is wrong (1300 +)
  • Later, after the image is loaded to come to new heights, but the property has not updated scrollerHeight
  • So rolling a problem

• how to solve this problem

  • Monitor whether each image is loaded, as long as there is an image is loaded, and perform a refresh ()
  • How to monitor the image is loaded?
    • Native js monitor picture: img.onload () = function ()
    • Vue the listener: @load = 'method'
  • Call scroll the refresh () method

• How to communicate non Sons assembly

  • Because it involves a non-parent-child communication components, so here we have chosen the event bus

    • bus -> Bus

    • Vue.probetype. $ Bus = new Vue () // create instance vue

      // 在 main.js 中
      Vue.probetype.$bus = new Vue(）

    • this.bus.emit ( 'event name', parameter 1)

            // 在 传出的 组件中 
            <template>
                <div>
                    <img src= ""   @load = 'imageLoad' />
                </div>
            <template>
      
            <script>
                export default {
                    methods: {
                        imageLoad() {
                            // 添加方法
                            this.$bus.$emit('ItemImageLoad')
                        }
                    }
                }
            </script>

    • this.bus.on ( 'Event Name', the callback function (parameters))

      // 在 传入的 组件中
      
      <script>
        export default {
              、、、 //在 mounted 中使用
              mounted() {
                  this.$bus.$on('ItemImageLoad',() => {
                      this.$refs.scroll.scroll.refresh()
                  })
              }
              、、、
          }
      </script>

• One problem: the problem refresh can not be found

  • First: Before Scroll.vue, call this.scroll method determines whether an object has a value this.scroll

    refresh() {
          this.scroll && this.scroll.refresh();
        }

  • Second: use this function in the life cycle mounted instead of using the $ refs.scroll created in.

• For refresh very frequent problems, anti-shake operation

  • Shake debounce / throttle throttle

  • Anti-shake function works in process

    • If we direct execution refresh, then refresh function will be how many times to perform the requested data

    • Deboundce refresh function can be passed to the function, create a new function

    • Paid-up again after the call very often, we use the function of the new generation

    • The new generation of function, and does not call very often, if the next execution is very fast, then the time will cancel the

          // 防抖动函数
          debounce(func, delay) {
            let timer = null;
      
            return function(...args) {
              if (timer) clearTimeout(timer);
              timer = setTimeout(() => {
                func.apply(this,args);
              }, delay);
            };
          }