uniappで動くアイコンを作る方法

ユニアプリで移動アイコンを作成する方法: 最初に HTML コード ファイルを開き、次にユニアプリでドラッグ要素を移動可能に設定し、最後に CSS スタイルで「pointer-events」属性を設定して、ドラッグして移動できるようにします。フローティングアイコン。

このチュートリアルの動作環境: Windows7 システム、uni-app2.5.1 バージョンこの方法は、すべてのブランドのコンピューターに適しています。

推奨事項 (無料): uni-app 開発チュートリアル

uni-app のドラッグ可能なフローティング アイコン

要件があります

ユニアプリで初心者用の赤い封筒アイコンを作成しますが、これには全画面ドラッグと初期位置の固定が必要です。

スタイルは次のとおりです:

次は私の解決策です

1. まず第一に、移動可能な特別なドラッグ要素があります。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>

。可動ビューはドラッグ可能な要素、可動領域は要素のドラッグ範囲

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. これにより、ドラッグ可能なフローティング アイコンが有効になります

以上がuniappで動くアイコンを作る方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。