update

The github address and effects GIF have now been updated and can be viewed at the end of the article. If my code is useful to you, please help me with the star.

demand

Recently, we need to add a function in the project. In the small program, we can browse the existing short video function according to the way of Douyin. In the whole screen, we can slide up and down to switch the video, and add the animation of sliding up and down.

Train of thought

1. Add time monitoring on the video TAB. 2. If 1 fails to succeed, put a cover on the video and add time monitoring on the cover view. 3. If both methods fail, use the applet’s onPageScroll page-handling function to listen for page scrolling. 4. If the above three methods fail, canvas can be used to cover the video to monitor rolling events.

try

Now a touch event listener is added to the video TAB, but the touch event cannot be successfully listened for. Since video is a native component with a higher level, I tried to put a cover-view on the upper layer and listen for rolling events, but it also failed to listen.

When the first two methods failed, I used onPageScroll to listen for scrolling. This method retrieves the vertical scrolling distance of the current page. Scrollindex is used to control scrolling, and totalNum is the total number of scrolls

On ios, it works, you can scroll up and down, you can animate, but on Android, it doesn’t work. I tried to configure scroll correlation in the JSON file of the page, but it didn’t work, so this method doesn’t work either.

Finally, the only solution is canvas. Locate a canvas on the video component and add time monitor on it. This is found successfully and you can see the printed monitor console on the console.

implementation

WXML: The following is the WXML code, the main idea is to make the width and height of the video equal to the screen, like comments and sharing and other functions, use the cover-view to position the top of the video, scroll the cover pattern when positioning the canvas above the video, there is only one label for video, and scroll to change the SRC of the video.

WXSS: It’s all positioning related styles and no textures without a specific style. The product wanted to add infinite sliding down videos, which could be loaded indefinitely. That’s why I used animation at the beginning. I added up or down animations for each screen according to my finger. Wx.createanimation () is implemented in JS.

Js: onload this.animation = wx.createAnimation(); Used to create animations when switching.

Scroll events to listen for

What JS mainly does is to judge the scrolling direction and dynamically add animation to WXML through the animation method provided by wechat, so that the requirement of infinite loading can be realized. ScrollTop is used to adjust the position of the video TAB, because now when scrolling, add the scroll to the cover image of the video is not the video itself, need to hide the video, if using wx:if; Control will cause the video to hide after the presentation and not be able to listen for previously added events.

The effect

In the real phone can be effective, on the phone to record a video do not know how to upload, to GIF did not find in the MAC how to turn…

Update came up with GIF, but GIF feels a little bit stuck, not smooth on the phone. Mobile ios is also much smoother than Android. But both are smoother than this picture… And now the video address is all hung up, so keep rotating buffer, can’t play only this picture, normal buffering will be played after the end.

The last

Get out for a long time, the effect of the real machine and the simulator is very different, the best test in the real machine. At present also do not know have better method, rookie front end a ~

supplement

Intweet contact [email protected], Github address: github.com/xuguoyii/wx…