Heim > Artikel > Web-Frontend > 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.
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('expand') 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('.movable').setStyle({ right: -left + 'px', bottom: -top + 'px' }) } function touchend(event, ins) { ins.removeClass('expand') } module.exports = { touchstart: touchstart, touchmove: touchmove, touchend: touchend } </script> <script> import lottie from 'lottie-miniprogram' let insList = {} // 存放动画实例集合 export default { props: { tag: String }, data() { return { isPlay: true, } }, methods: { init() { const query = uni.createSelectorQuery().in(this) query.select('#lottie-canvas').fields({ node: true, size: true }).exec((res) => { const canvas = res[0].node const context = canvas.getContext('2d') 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: 'https://usongshu.oss-cn-beijing.aliyuncs.com/data/other/f8780255686b0bb35d25464b2eeea294.json', 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!