유니앱은 미니프로그램 페이지에서 무료 드래그 앤 드롭 기능을 어떻게 구현하나요?

유니앱은 미니 프로그램 페이지에서 무료 드래그 앤 드롭 기능을 어떻게 구현하나요? 다음 기사에서는 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(&#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>

위 코드는 오프닝 렌더링에 구현된 완전한 코드이며 별도의 구성 요소로 캡슐화되었습니다. 우리가 드래그하려는 것은 클릭 시 애니메이션을 재생하는 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!