BetterScroll malfunctioned when I switched the height of the container.

[alexinea]

Version

2.5.1

Steps to reproduce

I have a container whose height can be toggled through buttons (Height-A and Height-B). The initial height is [Height A]. I used BetterScroll and everything went smoothly.

Then I switch the height to [Height B]. I monitored a variable through [watch] and successfully executed bs.refresh(). But at this time, BS couldn't work. At this point, the content height is greater than the height of the wrapper.

Then I switched back to [Height A]. The bs.refresh() called by [watch] still failed to wake up my BetterScroll.

I learned from issues that this problem can be solved through the Vue hook function. But I failed. I also called bs.refresh() in onUpdated()=>{}), but BetterScroll is still asleep. I cannot drag the page up or down through touch, mouse, or scroll wheel.

Everything else using BetterScroll is fine, except for the problem here.

The version I am using is 2.5.1, @better-scroll/core

How can I solve this problem? Looking forward to a reply.

What is expected?

After switching heights, I hope I can still drag the page up and down through BS.

What is actually happening?

After switching heights, BS cannot drag the page up or down.

Any additional comments? (optional)

I even recreated the bs object to replace the original one. But it still failed.

[alexinea]

I found that within nextTick (()=>{}), destroying the bs object, then recreating and initializing a new bs object, and refreshing it, can solve this problem. Without destruction and initialization, simply refreshing the BetterScroll object would not solve the problem.

Is there any mistake in my usage?

[hubvue]

@alexinea Can you provide a minimal reproduction procedure?