So erstellen Sie bewegliche Symbole in Uniapp

So erstellen Sie bewegliche Symbole in Uniapp: Öffnen Sie zuerst die HTML-Codedatei. Legen Sie dann das Drag-Element in Uni-App fest. Legen Sie schließlich das Attribut „pointer-events“ im CSS-Stil fest, um ein ziehbares schwebendes Symbol zu erhalten.

Die Betriebsumgebung dieses Tutorials: Windows7-System, Uni-App2.5.1-Version. Diese Methode ist für alle Computermarken geeignet.

Empfohlen (kostenlos): Uni-App-Entwicklungs-Tutorial

Ziehbares schwebendes Uni-App-Symbol

Im zweiten Projekt gibt es eine Anforderung:

Erstellen Sie einen roten Umschlag für Anfänger in Uni-App. Das Symbol muss vollständig sein -Bildschirmziehen und die Ausgangsposition ist fixiert.

Der Stil ist wie folgt:

Das Folgende ist meine Lösung

1. Erstens gibt es ein spezielles Drag-Element, das in der Uni-App beweglich ist, und der HTML-Code lautet wie folgt

rreee

. Die bewegliche Ansicht ist ein ziehbares Element und der bewegliche Bereich ist der Ziehbereich des Elements Der Grund dafür ist, dass der bewegliche Bereich andere Elemente einnimmt. Der Z-Index kann nicht zum Lösen verwendet werden. Zeigerereignisse müssen im CSS-Stil festgelegt werden folgt

<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>

3. Auf diese Weise entsteht ein verschiebbares schwebendes Symbol

Das obige ist der detaillierte Inhalt vonSo erstellen Sie bewegliche Symbole in Uniapp. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!