Shulou(Shulou.com)06/03 Report--

This article mainly introduces "how to understand the sticky sticky positioning layout on the home page of ele.me WeChat Mini Programs in uniapp development". In the daily operation, I believe that many people have doubts about how to understand the sticky sticky positioning layout on the home page of ele.me WeChat Mini Programs in the development of ele.me. The editor consulted all kinds of materials and sorted out a simple and useful operation method. I hope it will be helpful for you to answer the question of "how to understand the sticky sticky positioning layout on the home page of ele.me WeChat Mini Programs developed by uniapp"! Next, please follow the editor to study!

Position:sticky is a new attribute of css, which means sticky positioning. It is mainly used to listen for scroll events, when an element's distance from its parent element meets the requirements of sticky during sliding (for example, adding a style position:sticky; top:20px to the red box in the following figure) Then the red box scrolls up, and when the distance from the parent element reaches 20px, it will be fixed to the appropriate position, and the effect is the perfect combination of relative and fixed.

The new attributes are widely used, and we all like to learn from good things. for example, in the home layout of the Wechat mini program, we use a sticky layout for the elements of the search box. How is it realized? Let's first take a look at the overall effect (as shown in the following figure, you can also open ele.me WeChat Mini Programs to experience).

Template Code:

Search for 20% minus 12% of fresh fruit

Note: the dynamic attribute top is added to the search-box box because on the Mini Program side, the distance of the specific parent element of the search box varies on different mobile devices. How to find the dynamic top attribute value?

Export default {data () {return {/ / here give the top attribute a default value of 0 top: 0}} OnLoad () {/ / get the height of the mobile phone system information status bar const statusBarHeight = uni.getSystemInfoSync () .statusBarHeight / / get the location of the capsule const menuButtonInfo = uni.getMenuButtonBoundingClientRect () / / of the navigation bar Height = (height at the bottom of the capsule-height of the status bar) + (height at the top of the capsule-height in the status bar) this.navBarHeight = (menuButtonInfo.bottom-info.statusBarHeight) + (menuButtonInfo.top-info.statusBarHeight) / / the value of top is the height of the status bar + the height of the navigation bar Height this.top = menuButtonInfo.bottom + menuButtonInfo.top-statusBarHeight }}. Search-box {position: sticky; z-index: 2

At this point, the study on "how to understand the sticky sticky positioning layout of the home page of ele.me WeChat Mini Programs in uniapp development" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.