uniapp 如何做會動的圖標

uniapp做會動的圖示的方法：先開啟html程式碼檔案；然後設定uni-app中的拖曳元素movable；最後在css樣式設定「pointer-events」屬性即可實作可拖動的浮動圖示。

本教學操作環境：windows7系統、uni-app2.5.1版本，此方法適用於所有品牌電腦。

推薦（免費）：uni-app開發教學

uni-app可拖曳的浮動圖示

#第二個項目中有一個需求，

在uni-app中製作一個新人紅包的圖標，要求全螢幕拖曳，初始位置固定。

樣式如此：

下面是我的解決方法

1.首先uni-app中有專門的拖曳元素movable，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.

問題出現，當設定好後發現紅包可以點擊，但頁面其他元素無法點擊，原因是movable-area遮擋住其他元素，使用z-index無法解決；經過度娘教導，需要在css樣式中設定pointer-events，

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.如此便實現了可拖曳的浮動圖示

以上是uniapp 如何做會動的圖標的詳細內容。更多資訊請關注PHP中文網其他相關文章！