유니앱에서 움직이는 아이콘 만드는 방법

uniapp에서 움직이는 아이콘을 만드는 방법: 먼저 html 코드 파일을 연 다음 uni-app에서 드래그 요소를 이동 가능하게 설정합니다. 마지막으로 CSS 스타일에서 "pointer-events" 속성을 설정하여 드래그 가능한 플로팅 아이콘을 만듭니다.

이 튜토리얼의 운영 환경: windows7 시스템, uni-app2.5.1 버전 이 방법은 모든 브랜드의 컴퓨터에 적합합니다.

추천(무료): uni-app 개발 튜토리얼

uni-app 드래그 가능한 플로팅 아이콘

두 번째 프로젝트에는 요구 사항이 있습니다.

uni-app에서 초보자 빨간 봉투 만들기 아이콘에는 전체가 필요합니다. -화면 드래그 시 초기 위치가 고정됩니다.

스타일은 이렇습니다.

다음은 제 솔루션입니다

1. 먼저 uni-app에서 이동할 수 있는 특수 드래그 요소가 있고, html 코드는 다음과 같습니다

<movable-area class="movableArea" v-else-if="isShowPhone==0">
<movable-view class="movableView" direction="all" x="600rpx" y="800rpx">
<image :src="imgurl +&#39;small_hb.png&#39;" mode="widthFix" @click="to_xfj_gg"></image>
<text>余额：￥{{hb_ye}}</text>
</movable-view>
</movable-area>

. movable-view는 드래그 가능한 요소이고, movable-area는 해당 요소의 드래그 범위

2.

문제가 발생했습니다. 설정 후 빨간 봉투를 클릭할 수 있지만 페이지의 다른 요소는 클릭할 수 있습니다. 이유는 이동 가능한 영역 때문입니다. 다른 요소를 점유하고 있어 z-index를 사용하여 해결할 수 없습니다. Du Niang의 지침에 따라 포인터 이벤트를 CSS 스타일로 설정해야 합니다.

css 코드는 다음과 같습니다

.movableArea {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
            pointer-events: none;//设置area元素不可点击，则事件便会下移至页面下层元素
.movableView {
                pointer-events: auto;//可以点击
width: 120rpx;
height: 110rpx;
image {
width: 100%;
height: 100%;
}
text {
position: absolute;
left: 0;
bottom:0;
width: 120rpx;
height: 18rpx;
display: flex;
justify-content: center;
align-items: center;
font-size: 16rpx;
color: #ffffff;
}
}
}

3. 이런 식으로 드래그 가능한 플로팅 아이콘이 구현됩니다

위 내용은 유니앱에서 움직이는 아이콘 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!