Wie implementiert Uniapp die kostenlose Drag-and-Drop-Funktion auf der Miniprogrammseite?

Wie implementiert uniapp die kostenlose Drag-and-Drop-Funktion auf der Miniprogrammseite? Der folgende Artikel stellt Ihnen vor, wie Uniapp kostenlose Drag-and-Drop-Komponenten auf Miniprogrammseiten implementiert. Ich hoffe, er wird Ihnen hilfreich sein!

Werfen wir zunächst einen Blick auf die Implementierung:

[Verwandte Empfehlungen: „uniapp-Tutorial“]

Implementierungsprozess

Laut Dokumentation zu Implementieren Sie die Drag-and-Drop-Funktion. Es gibt ungefähr drei Möglichkeiten:

1. Überwachen Sie das catchtouchmove-Ereignis für das Element, das per Drag-and-Drop verschoben werden muss, und ändern Sie die Stilkoordinaten dynamisch.

Diese Methode ist die einfachste Denken Sie daran, die Elementkoordinaten dynamisch zu ändern, indem Sie die Berührungsposition über js überwachen. Drag & Drop ist jedoch ein Vorgang, der eine sehr hohe Echtzeitleistung erfordert. Sie können in diesem Vorgang keine Drosselungsfunktion festlegen, um den setData-Vorgang selbst zu reduzieren, und er ist leicht zu verursachen Drag-and-Drop-Verzögerungen können zunächst beseitigt werden.

2.beweglicher Bereich + bewegliche Ansicht

Die Rolle der beweglichen Bereichskomponente besteht darin, einen Bereich zu definieren, in dem die beweglichen Ansichtskomponenten vom Benutzer und der beweglichen Ansicht frei bewegt werden können können problemlos Zoomeffekte einstellen. Gemäß der Komponentendefinition können Sie sich das Verwendungsszenario als Ziehen und Skalieren einiger Elemente in einem lokalen Bereich der Seite vorstellen. Dies steht im Widerspruch zu unserer Notwendigkeit, die gesamte Seite frei zu ziehen und abzulegen.

3.wxs-Antwortereignis

wxs wird speziell zum Lösen von Szenarien mit häufigen Interaktionen verwendet. Es wird direkt auf der Ansichtsebene ausgeführt, wodurch der durch die Kommunikation zwischen der Ansichtsebene und der Logikebene verursachte Leistungsverlust vermieden und eine reibungslose Animation erzielt wird Effekte. Weitere Informationen finden Sie unter: wxs-Antwortereignis. Basierend auf den Verwendungsszenarien von wxs können wir grundsätzlich bestimmen, dass die wxs-Lösung zur Implementierung der gewünschten Funktionen verwendet werden sollte.

Code-Implementierung

Wir verwenden das Uniapp-Framework, überprüfen die Uniapp-Dokumentation, der Beamte stellt direkt ein kostenloses Drag-and-Drop-Codebeispiel zur Verfügung, der Link Klicken Sie hier.

Nehmen Sie einfach das offizielle Codebeispiel und ändern Sie es wie folgt:

<template>
    <view catchtouchmove="return">
        <view @click="play" @touchstart="hudun.touchstart" @touchmove="hudun.touchmove" @touchend="hudun.touchend">
            <canvas id="lottie-canvas" type="2d" style="width: 88px; height: 102px;"></canvas>
        </view>
    </view>
</template>

<script module="hudun">
    var startX = 0
    var startY = 0
    var lastLeft = 20
    var lastTop = 20

    function touchstart(event, ins) {
        ins.addClass(&#39;expand&#39;)
        var touch = event.touches[0] || event.changedTouches[0]
        startX = touch.pageX
        startY = touch.pageY
    }
    
    function touchmove(event, ins) {
        var touch = event.touches[0] || event.changedTouches[0]
        var pageX = touch.pageX
        var pageY = touch.pageY
        var left = pageX - startX + lastLeft
        var top = pageY - startY + lastTop
        startX = pageX
        startY = pageY
        lastLeft = left
        lastTop = top
        ins.selectComponent(&#39;.movable&#39;).setStyle({
            right: -left + &#39;px&#39;,
            bottom: -top + &#39;px&#39;
        })
    }
    
    function touchend(event, ins) {
        ins.removeClass(&#39;expand&#39;)
    }
    
    module.exports = {
        touchstart: touchstart,
        touchmove: touchmove,
        touchend: touchend
    }
</script>

<script>
    import lottie from &#39;lottie-miniprogram&#39;
    let insList = {} // 存放动画实例集合
    export default {
        props: {
            tag: String
        },
        data() {
            return {
                isPlay: true,
            }
        },
        methods: {
            init() {
                const query = uni.createSelectorQuery().in(this)
                query.select(&#39;#lottie-canvas&#39;).fields({ node: true, size: true }).exec((res) => {
                    const canvas = res[0].node
                    const context = canvas.getContext(&#39;2d&#39;)
                    const dpr = uni.getSystemInfoSync().pixelRatio
                    canvas.width = res[0].width * dpr
                    canvas.height = res[0].height * dpr
                    context.scale(dpr, dpr)
                    lottie.setup(canvas)
                    const ins = lottie.loadAnimation({
                        loop: true,
                        autoplay: true,
                        path: &#39;https://usongshu.oss-cn-beijing.aliyuncs.com/data/other/f8780255686b0bb35d25464b2eeea294.json&#39;,
                        rendererSettings: {
                            context,
                        },
                    })
                    insList[this.tag] = ins
                    setTimeout(() => {
                        this.isPlay = false
                        ins.stop()
                    }, 3000)
                })
            },
            play() {
                const ins = insList[this.tag]
                if (!this.isPlay) {
                    this.isPlay = true
                    ins.play()
                    setTimeout(() => {
                        this.isPlay = false
                        ins.stop()
                    }, 3000)
                }
            }
        },
        beforeDestroy() {
            delete insList[this.tag]
        }
    }
</script>

<style>
    .area
        position fixed
        right 20px
        bottom 20px
        width 88px
        height 102px
        z-index 99999

    .expand
        width 100vw
        height 100vh

    .movable
        position absolute
</style>

Der obige Code ist der vollständige Code, der in den Eröffnungs-Renderings implementiert wurde und in eine separate Komponente gekapselt wurde. Was wir ziehen möchten, ist ein Canvas-Element mithilfe der Lottie-Animationsbibliothek, das beim Klicken die Animation abspielt. Wenn Sie einen einfachen Button-Drag auf der Seite implementieren möchten, ist die Codemenge deutlich geringer. Wenn die Funktion, die Sie implementieren möchten, dieser ähnelt, müssen die folgenden Punkte im obigen Code erläutert werden:

1 Unsere Anforderung besteht darin, sie auf mehreren Seiten anzuzeigen Platzieren Sie die Komponente nur auf einer Seite und zeigen Sie sie dann auf jeder Seite an. Glücklicherweise unterstützt Uniapp die Definition globaler Applet-Komponenten, was uns dabei helfen kann, die Menge des eingeführten Codes zu reduzieren. So geht's: Definieren Sie die Komponente

// 动画组件
import { HudunAnimation } from '@/components/hudun-animation/index'
Vue.component('HudunAnimation', HudunAnimation)

in main.js und verwenden Sie sie auf der Seite: wxml:

<HudunAnimation tag="index" ref="hudunRef"></HudunAnimation>

// 进入页面时初始化动画
mounted() {
    this.$refs.hudunRef.init()
}

2. Es ist zu erkennen, dass es unter den oben gekapselten Komponenten ein Tag-Attribut gibt, das verwendet wird, um die Animationsinstanz zu identifizieren, von der sie stammt. Es existiert, weil wir in der Komponente unter normalen Umständen direkt eine Eigenschaft in den Daten definieren können, um die Animationsinstanz zu speichern, aber nachdem wir in die Grube gegraben haben, haben wir festgestellt, dass die Konsole einen Fehler meldet, wenn wir dies direkt schreiben

this.ins = lottie.loadAnimation({})

weil lottie.loadAnimation( {}) Das zurückgegebene Objekt durchläuft einen JSON.stringfy-Prozess, wenn es in Daten platziert wird. Während dieses Prozesses wird aus unbekannten Gründen ein Fehler gemeldet. Um diesen Fehler zu beheben, definieren Sie stattdessen global eine insList in der Komponente, um die Animationsinstanzsammlung zu speichern, rufen Sie die entsprechende Seiteninstanz über das eingehende Tag ab und rufen Sie dann die entsprechende Instanzwiedergabemethode auf.

Seitenpenetrations- und Klickprobleme

1. Beim Ziehen der Seite wird die Seite ganz einfach gescrollt. Dieses Problem lässt sich ganz einfach lösen.

catchtouchmove="return"

Problem beim Klicken und Ziehen von Bereichsseitenschaltflächen nicht möglich. Erstens ist unser Ziehbereich die gesamte Seite, und wir verwenden eine feste Positionierung, um die gesamte Seite abzudecken. Dies führt jedoch dazu, dass die Seite unter der Maskenebene nicht auf Klickereignisse reagieren kann. Daher müssen wir den Klassennamen dynamisch erweitern. Wenn sich das Element im Ziehzustand befindet, decken wir den maskierten Bereich auf der gesamten Seite ab, und der anfängliche Bereich kann mit dem gezogenen Element übereinstimmen. Sehen Sie sich den vollständigen Code oben für die Code-Implementierung an

Sehen Sie sich den Erlebniseffekt anWeChat-Such-Applet: Lobbyist English – Ihr privater Fremdlehrer

Weitere Kenntnisse zum Thema Programmierung finden Sie unter: Einführung in die Programmierung! !

Das obige ist der detaillierte Inhalt vonWie implementiert Uniapp die kostenlose Drag-and-Drop-Funktion auf der Miniprogrammseite?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!