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

Editor to share with you how to achieve hovering buttons in Mini Program, I believe most people do not know much about it, so share this article for your reference, I hope you will learn a lot after reading this article. Let's learn about it!

In the daily development of Mini Program, we may have the need to float the button and not change its position with the sliding of the page. For example, the sharing button on the details page of the article, I want to make it look like a suspension. Or set up a floating button on the home page to achieve some expandable functions, which is both beautiful and convenient and practical.

I will explain the implementation of the suspension button from two aspects, one is to implement the picture button, and the other is to levitate the button. [recommended for related study: Mini Program Development tutorial]

Picture button implementation

In the button component provided by Mini Program, there is no function to set the picture as a button. Although Mini Program does not have natural component support, we can achieve this effect by ourselves.

Put the code first.

Page code

Css style code

Image [plain] {padding: 0; border: none; width: 64rpx; height: 64rpx;} .image {width: 64rpx; height: 64rpx;}

Circle is the button class, and image is the picture class.

The code is very simple. Egg explains the above code for you.

Hide the display of buttons

We want to display the picture, the button is wrapped in the picture, so to hide the button, plain='true' this property can be achieved.

Hide the border of the button

In addition to hiding the button, you also need to hide its border. The corresponding css style is: border: none. Note here that [plain] must be added to the css class.

For example, if the border is not added, the border may not disappear. [plain]

Align the picture with the button

The size of the picture needs to be consistent with the size of the button. In order to achieve alignment, the css style in button should be set to padding:0.

Implementation of suspension button

When the picture button is set, we need to levitate it. To achieve the effect of suspension, you only need to set the button style position to fixed.

Display [plain] {display: flex; margin-right: 40rpx; right: 0; position: fixed; bottom: 15%; padding: 0; border: none; width: 64rpx; height: 64rpx;}

Position is a location attribute. It has many different values. Let's take a look at the official definition of fixed.

Instead of reserving space for the element, you specify the location of the element by specifying its position relative to the screen viewport (viewport). The position of the element does not change as the screen scrolls. When printing, the element appears in a fixed position on each page of. The fixed property creates a new cascading context. When the transform property of an element ancestor is not none, the container changes from a viewport to that ancestor.

The above is all the contents of the article "how to achieve hovering buttons in Mini Program". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

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.