유니앱은 미니프로그램 페이지에서 무료 드래그 앤 드롭 기능을 어떻게 구현하나요?
- 青灯夜游앞으로
- 2021-09-07 19:28:048615검색
유니앱은 미니 프로그램 페이지에서 무료 드래그 앤 드롭 기능을 어떻게 구현하나요? 다음 기사에서는 uniapp이 미니 프로그램 페이지에서 무료 드래그 앤 드롭 구성 요소를 구현하는 방법을 소개합니다. 도움이 되길 바랍니다.
구현 효과 먼저 살펴보기:
[관련 권장 사항: "uniapp tutorial"]
구현 프로세스
Accord 드래그를 구현하기 위해 문서를 참조하세요. 및 드롭 기능에는 대략 세 가지 방법이 있습니다.
1. 드래그 앤 드롭해야 하는 요소에 대한 catchtouchmove 이벤트를 모니터링하고 스타일 좌표를 동적으로 수정합니다.
이 방법이 가장 생각하기 쉽습니다. js를 통해 터치 위치를 모니터링하여 요소 좌표를 동적으로 수정합니다. 그러나 드래그 앤 드롭은 매우 높은 실시간 성능이 필요한 작업입니다. 또한 setData 작업을 줄이기 위해 이 작업에 제한 기능을 설정할 수 없습니다. 또한 각 setData 작업 자체는 상대적으로 성능 집약적이며 이로 인해 발생하기 쉽습니다. 드래그 앤 드롭 지연이 먼저 제거될 수 있습니다.
2.movable-area + movable-view
movable-area 컴포넌트의 역할은 movable-area 컴포넌트가 사용자에 의해 자유롭게 움직일 수 있는 영역을 정의하는 것이고, movable-view는 줌 효과를 쉽게 설정할 수 있습니다. 구성 요소 정의에 따르면 해당 사용 시나리오는 페이지의 로컬 영역에서 일부 요소를 끌어서 확대/축소하는 것으로 상상할 수 있습니다. 이는 전체 페이지에서 자유롭게 끌어서 놓기해야 하는 우리의 요구와 일치하지 않습니다.
3.wxs 응답 이벤트
wxs는 뷰 레이어에서 직접 실행되어 뷰 레이어와 로직 레이어 간의 통신으로 인한 성능 손실을 제거하고 원활한 애니메이션을 구현하는 데 특별히 사용됩니다. 효과. 자세한 내용은 wxs 응답 이벤트를 참조하세요. wxs의 사용 시나리오에 따르면 기본적으로 wxs 솔루션을 사용하여 원하는 기능을 구현해야 한다고 결정할 수 있습니다.
코드 구현
우리는 uniapp 프레임워크를 사용하고 있습니다. uniapp 문서를 확인하세요. 공식에서 직접 무료 드래그 앤 드롭 코드 예제를 제공합니다. 링크는 여기를 클릭하세요.
공식 코드 예제를 가져와서 다음과 같이 수정하세요.
<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>위 코드는 오프닝 렌더링에 구현된 완전한 코드이며 별도의 구성 요소로 캡슐화되었습니다. 우리가 드래그하려는 것은 클릭 시 애니메이션을 재생하는 lottie 애니메이션 라이브러리를 사용하는 캔버스 요소입니다. 페이지에서 간단한 버튼 드래그를 구현하려는 경우 코드의 양이 훨씬 적어집니다. 구현하려는 기능이 이와 유사한 경우 위 코드에서 다음 사항을 설명해야 합니다.
1. 우리의 요구 사항은 관련 정보를 참조한 후 이를 실현할 수 없습니다. 한 페이지만 구성 요소를 배치한 다음 각 페이지에 표시해야 합니다. 다행스럽게도 uniapp은 전역 애플릿 구성 요소 정의를 지원하므로 도입되는 코드의 양을 줄이는 데 도움이 됩니다. 방법은 다음과 같습니다. main.js에서
// 动画组件
import { HudunAnimation } from '@/components/hudun-animation/index'
Vue.component('HudunAnimation', HudunAnimation)구성 요소를 정의하고 페이지에서 사용합니다. wxml:
<HudunAnimation tag="index" ref="hudunRef"></HudunAnimation>
// 进入页面时初始化动画
mounted() {
this.$refs.hudunRef.init()
}2 위에 캡슐화된 구성 요소 중에는 해당 페이지의 애니메이션 인스턴스를 식별하는 데 사용되는 태그 속성이 있음을 알 수 있습니다. 이는 구성 요소에서 일반적인 상황에서 애니메이션 인스턴스를 저장하기 위해 데이터에 속성을 직접 정의할 수 있기 때문에 존재하지만, 구덩이를 파헤친 후에 이것을 직접 작성하면
this.ins = lottie.loadAnimation({})콘솔에서 오류를 보고한다는 사실을 발견했습니다. lottie.loadAnimation( {}) 반환된 객체는 데이터에 배치될 때 JSON.stringfy 프로세스를 거치게 됩니다. 이 프로세스 중에 알 수 없는 이유로 오류가 보고됩니다. 이 오류를 해결하려면 애니메이션 인스턴스 컬렉션을 저장할 구성 요소에 전역적으로 insList를 정의하고 수신 태그를 통해 해당 페이지 인스턴스를 가져온 다음 해당 인스턴스 재생 메서드를 호출합니다.
페이지 침투 및 클릭 문제
1. 페이지를 드래그하면 페이지가 스크롤됩니다. 이 문제를 해결하는 방법은 매우 간단합니다. 영역 보기에
catchtouchmove="return"
를 추가하면 됩니다. 영역 페이지 버튼을 클릭하고 드래그하는 데 문제가 있습니다. 우선 드래그 영역은 전체 페이지이고 고정 위치 지정을 사용하여 전체 페이지를 덮지만 이로 인해 마스크 레이어 아래의 페이지가 클릭 이벤트에 응답할 수 없게 됩니다. 따라서 요소가 드래그 상태에 있을 때 전체 페이지를 마스크된 영역으로 덮고 초기 영역은 드래그된 요소와 일치할 수 있도록 클래스 이름을 확장으로 동적으로 설정해야 합니다. 코드 구현은 위의 전체 코드를 참조하세요
경험 효과 보기WeChat 검색 애플릿: 로비스트 영어--개인 외국인 교사
더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 소개를 방문하세요! !
위 내용은 유니앱은 미니프로그램 페이지에서 무료 드래그 앤 드롭 기능을 어떻게 구현하나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!