Better-Scroll scrollable area issue

Solve the problem of Better-Scroll scrollable area

When Better-Scroll decides how many areas can be scrolled, it is determined according to the scrollerHeight property

  1. The scrollerHeight attribute is based on the height of the subcomponent in the content of Better-Scroll
  2. But when the page just started to load, when calculating the scrollerHeight attribute, because the picture loads slowly, the height of the picture will not be counted, so the calculated height is the wrong height
  3. Later, after the image is loaded, it has a new height, but the scrollerHeight property is not updated, so there will be problems with scrolling. How to
    solve the scrollable area problem that occurs in Better-Scroll?
  4. Monitor whether each picture is loaded, and execute refresh() once as long as one picture is loaded
  5. How to monitor the completion of image loading?

1. Native js monitoring pictures, img.onload = function(){}
2. Monitoring @load="method" in vue

  1. Call refresh of scroll to refresh and update the height of scrolling.

Solution:
first step, now create a bus bus in main.js, that is, a vue instance bus
bus in vue
second step, add imgload code to the code that needs to get the height once without loading a picture and
bus control imgloard generated height
send itemImageload event through Bus bus
The bus sends the itemImageload event

The third step, the ancestor component listens to the events of the descendant component, and does not listen to refresh the height of the scroll once. The
Ancestor components listen to events from grandson components
solution [event bus]

	bus->总线
	Vue.prototype.$bus = new Vue
	this.bus.emit('事件名称',参数)
	this.bus.on('事件名称',回调函数(参数))

Effect:Better-Scroll scrollable area issue

Guess you like

Origin blog.csdn.net/qq_42696432/article/details/122330430