Shulou(Shulou.com)05/31 Report--

This article mainly explains "how to use WeChat Mini Programs scroll-view to achieve anchor sliding". The content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "how to use WeChat Mini Programs scroll-view to achieve anchor sliding".

The schematic diagram is as follows:

Because in WeChat Mini Programs's environment, you can't want to set tags in the browser or operate dom scrolling, the traditional method won't work, everything has to be done according to the Mini Program document.

What we did at first was to use the boundingClientRect () method to get the coordinates of each anchor point, and then use the wx.pageScrollTo () method to slide over. It turns out that the effect is not very good, because the coordinates of each point returned by the boundingClientRect method will change with the screen sliding, and may also cause page jitter. Finally, the scroll-view (scrollable view area) component is selected to achieve the anchor effect.

Concrete realization

Let's not dwell on the specific API. You can take a look at the official documentation. Here are a few points to pay attention to. Here is a schematic scroll-view component code, and the above attributes are required:

The copy code is as follows:

Scroll-into-view: this binds an attribute whose value should be the id of the page element. By setting its value, you can jump to the corresponding element of ID.

Scroll-y: add this attribute to indicate that it is vertical sliding, and the corresponding scroll-x indicates horizontal sliding. When vertical sliding, scroll-view must set a fixed height.

Bindscroll: listen to slide, pass him an event, and execute the event when sliding

There are a lot of attributes on the document, so we only need a few of them to achieve the effect we want. The implementation principle is also very simple. In the content part, each abbreviated view is set to an id, and then when you click at the navigation list, you can jump by setting the value of scroll-into-view to the id you click on.

Let's talk about the height of scroll-view, which must be adapted to a fixed height, otherwise the display effect will be different on phones with different screen sizes.

How many points are optimized

The functions have been basically implemented so far, but some problems have been found later: if you want to hide the scroll bar of scroll-view, you need to set the css style:-webkit-scrollbar

::-webkit-scrollbar {width: 0; height: 0; color: transparent;}

There is to click an anchor point to achieve the jump, at this time you scroll the page before the anchor point, the page will not jump, this time you need to listen to the scrolling event, scroll to clear the value of the scroll-into-view attribute. Or after each anchor jump, an asynchronous operation clears the value of the scroll-into-view property.

Thank you for reading, the above is the content of "how to use the scroll-view in WeChat Mini Programs to achieve anchor sliding". After the study of this article, I believe you have a deeper understanding of how to use the scroll-view in WeChat Mini Programs to achieve anchor sliding, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.