How to make moving icons in uniapp

How to make moving icons in uniapp: first open the html code file; then set the drag element movable in uni-app; finally set the "pointer-events" attribute in the css style to make it draggable moving floating icon.

The operating environment of this tutorial: windows7 system, uni-app2.5.1 version. This method is suitable for all brands of computers.

Recommendation (free): uni-app development tutorial

uni-app draggable floating icon

There is a requirement in the two projects.

Create a newbie red envelope icon in uni-app, which requires full-screen dragging and a fixed initial position.

The style is like this:

The following is my solution

1. First of all, there are Special drag element movable, the html code is as follows

<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 is a draggable element, movable-area is the drag range of the element

2.

The problem occurred. After setting it up, I found that the red envelope can be clicked, but other elements on the page It cannot be clicked because the movable-area blocks other elements and cannot be solved using z-index. After Du Niang’s guidance, pointer-events need to be set in the css style.

css code is as follows

.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. This enables draggable floating icons

The above is the detailed content of How to make moving icons in uniapp. For more information, please follow other related articles on the PHP Chinese website!