Teach you step by step how to implement floating buttons in mini programs (code example)

How to implement floating buttons in mini programs? The following article will introduce to you how to implement the floating button function in a mini program. I hope it will be helpful to you!

In daily small program development, we may have such a need to suspend the button and not change the position as the page slides, such as the article details page I want to make the sharing button floating, or set a floating button on the homepage to implement some scalable functions, which is both beautiful and convenient.

I will explain how to implement the floating button from two aspects , one is to implement the picture button, and the other is to float the button. [Related learning recommendations: Mini Program Development Tutorial]

Image Button Implementation

In the button component provided by the mini program, there is no function to separately set pictures into buttons. Although the mini program does not have natural component support, we can achieve this effect ourselves

First code

Page code

<!--pages/content-detail/content-detail.wxml-->
<button plain=&#39;true&#39;   class="circle">
  <image mode=&#39;aspectFill&#39; src=&#39;/images/icon/collect.png&#39; class=&#39;image&#39;></image>
</button>

css style code

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

.image {
  width: 64rpx;
  height: 64rpx;
}

circle is the class of button, image is the class of picture

The code is very simple, Xiaodan will explain the above code for everyone

• ##Hide Display of the button
  We want to display the picture, and the button is packaged with the picture, so we need to hide the button,

  plain='true' This attribute 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 , please note here that [plain]

  must be added to the css class. For example,

  .circle[plain], otherwise the border may not disappear.

• Alignment of pictures and buttons
  The size of the picture needs to be consistent with the size of the button. In order to achieve alignment, the css style in the button must be set

  padding: 0

Floating button implementation

After the picture button is set, we need to float it. To achieve the floating effect, we only need to move the button The position of the style can be set to fixed

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

position is a position attribute, which has many different values. Let’s take a look at the official definition of fixed

is not an element Instead of leaving space, you specify element position by specifying its position relative to the screen's viewport. The element's position does not change when the screen scrolls. When printing, the element will appear at a fixed location on each page. The fixed attribute creates a new stacking context. When the transform attribute of an element's ancestor is non-none, the container is changed from the viewport to that ancestor.

We have fully implemented the code for the floating button. Let’s take a look at the specific effect

Summary

The entire In fact, the amount of code to implement the floating button is not much. The main thing is to have a more thorough knowledge of CSS. It is not that difficult to implement. The implementation of the floating button is just a side dish.

For more programming related knowledge, please visit:

Programming Video! !

The above is the detailed content of Teach you step by step how to implement floating buttons in mini programs (code example). For more information, please follow other related articles on the PHP Chinese website!