미니 프로그램에서 플로팅 버튼을 구현하는 방법을 단계별로 가르쳐줍니다(코드 예제).-미니 프로그램 개발-php.cn

미니 프로그램에서 플로팅 버튼을 구현하는 방법을 단계별로 가르쳐줍니다(코드 예제).

青灯夜游

풀어 주다： 2021-10-15 11:15:27

앞으로

7899명이 탐색했습니다.

미니 프로그램에서 플로팅 버튼을 구현하는 방법은 무엇인가요? 다음 글에서는 미니 프로그램에서 플로팅 버튼 기능을 구현하는 방법을 소개하겠습니다. 도움이 되셨으면 좋겠습니다!

미니 프로그램에서 플로팅 버튼을 구현하는 방법을 단계별로 가르쳐줍니다(코드 예제).

일상적인 소규모 프로그램 개발에서는 페이지가 슬라이드되면서 위치가 바뀌지 않도록 버튼을 플로팅해야 할 경우가 있습니다. 예를 들어 기사 세부정보 페이지의 공유 버튼을 만들고 싶습니다. 또는 홈페이지에 플로팅 버튼을 설정하여 확장 가능한 기능을 구현했는데, 이는 아름답고 편리합니다.

플로팅 버튼의 구현을 두 가지 측면에서 설명하겠습니다. 하나는 그림을 구현하는 것입니다. 버튼, 다른 하나는 버튼을 띄우는 것입니다. [관련 학습 추천 : 미니 프로그램 개발 튜토리얼]

이미지 버튼 구현

미니 프로그램에서 제공하는 버튼 컴포넌트에는, 미니 프로그램이 자연스러운 컴포넌트를 지원하지 않지만, 그림을 버튼에 별도로 설정하는 기능은 없습니다. , 우리는 이 효과를 스스로 달성할 수 있습니다

첫 번째 코드

페이지 코드

<!--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 스타일 코드

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

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

로그인 후 복사

원은 버튼 클래스이고 이미지는 그림 클래스

코드는 매우 간단합니다. Xiaodan이 설명할 것입니다. 위의 코드는

hide 버튼 표시
버튼을 이미지로 표시하려고 하므로 버튼을 숨기려면 plain='true'를 이 속성으로 달성할 수 있습니다.
버튼 테두리 숨기기
버튼 테두리도 숨겨야 합니다. 해당 CSS 스타일은 border: none입니다. 추가됨 [plain]
예를 들어 .circle[plain] , 추가하지 않으면 테두리가 사라지지 않을 수 있습니다.
그림 및 버튼 정렬
그림의 크기는 버튼의 크기와 일치해야 합니다. 정렬을 위해서는 버튼의 CSS 스타일을 설정해야 합니다.padding:0

플로팅 버튼 구현

그림 버튼 설정 플로팅 효과를 얻으려면 버튼 스타일의 위치를 고정으로 설정하기만 하면 됩니다.

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

로그인 후 복사

position은 다양한 값을 갖는 위치 속성입니다. 공식을 살펴보겠습니다. 주어진 고정

정의는 요소를 위한 공간을 예약하지 않지만 화면 뷰포트를 기준으로 요소의 위치를 지정하여 요소의 위치를 지정합니다. 화면이 스크롤될 때 요소의 위치는 변경되지 않습니다. 인쇄할 때 요소는 각 페이지의 고정된 위치에 나타납니다. 고정 속성은 새로운 스택 컨텍스트를 생성합니다. 요소 조상의 변환 속성이 없음이 아닌 경우 컨테이너는 뷰포트에서 해당 조상으로 변경됩니다.

플로팅 버튼의 코드를 완전히 구현했습니다. 구체적인 효과를 살펴보겠습니다

미니 프로그램에서 플로팅 버튼을 구현하는 방법을 단계별로 가르쳐줍니다(코드 예제).