Bagaimanakah uniapp melaksanakan fungsi seret dan lepas percuma pada halaman program mini?

Bagaimanakah uniapp melaksanakan fungsi seret dan lepas percuma pada halaman program mini? Artikel berikut akan memperkenalkan kepada anda cara uniapp melaksanakan komponen seret dan lepas percuma pada halaman program mini Saya harap ia akan membantu anda!

Mari kita lihat pelaksanaannya dahulu:

[ Cadangan berkaitan : "tutorial uniapp"]

Proses pelaksanaan

Menurut dokumentasi, terdapat kira-kira tiga langkah untuk melaksanakan fungsi seret dan lepas Kaedah:

1 Pantau acara catchtouchmove untuk elemen yang perlu diseret dan dilepaskan, dan ubah suai secara dinamik. koordinat gaya

Kaedah ini adalah yang paling mudah untuk difikirkan, menggunakan js untuk memantau kedudukan sentuhan dan mengubah suai koordinat elemen secara dinamik. Walau bagaimanapun, seret dan lepas ialah operasi yang memerlukan prestasi masa nyata yang sangat tinggi Anda tidak boleh menetapkan fungsi pendikit dalam operasi ini untuk mengurangkan operasi setData Selain itu, setiap operasi setData itu sendiri adalah agak intensif prestasi, dan ia mudah disebabkan ketinggalan seret dan lepas Pilihan ini boleh dihapuskan dahulu.

2.alih-kawasan-pandangan-alih

Peranan komponen kawasan-alih adalah untuk mentakrifkan kawasan di mana kawasan-alih- Komponen pandangan boleh dialihkan secara bebas oleh pengguna, dan paparan alih boleh dengan mudah menetapkan kesan zum. Mengikut definisi komponen, boleh dibayangkan bahawa senario penggunaannya adalah untuk menyeret dan mengezum beberapa elemen dalam kawasan setempat halaman Ini tidak konsisten dengan keperluan kita untuk menyeret dan melepaskan secara bebas merentasi seluruh halaman.

Acara tindak balas 3.wxs

wxs digunakan khas untuk menyelesaikan senario dengan interaksi yang kerap Ia berjalan terus dalam lapisan paparan, menghapuskan keperluan untuk lapisan paparan dan lapisan logik Kehilangan prestasi yang disebabkan oleh komunikasi boleh dicapai untuk mencapai kesan animasi yang lancar. Untuk butiran, lihat: acara respons wxs. Mengikut senario penggunaan wxs, kita pada asasnya boleh menentukan bahawa penyelesaian wxs harus digunakan untuk melaksanakan fungsi yang kita inginkan.

Pelaksanaan kod

Kami menggunakan rangka kerja uniapp, semak dokumentasi uniapp, pegawai terus menyediakan contoh kod seret dan lepas percuma, pautan Klik di sini.

Cukup ambil contoh kod rasmi dan ubah suainya, seperti berikut:

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

Kod di atas ialah kod lengkap yang dilaksanakan dalam pemaparan pembukaan, dan telah dikapsulkan ke dalam komponen yang berasingan. Apa yang kita mahu seret ialah elemen kanvas, menggunakan perpustakaan animasi lottie, yang akan memainkan animasi apabila diklik. Jika anda ingin melaksanakan seret butang mudah pada halaman, jumlah kod akan menjadi lebih sedikit. Jika fungsi yang anda ingin laksanakan adalah serupa dengan ini, maka perkara berikut dalam kod di atas perlu dijelaskan:

1. Keperluan kami adalah untuk memaparkan pada berbilang halaman dicapai. Untuk meletakkan komponen di satu tempat sahaja dan kemudian memaparkannya pada setiap halaman, komponen mesti diperkenalkan pada setiap halaman. Nasib baik, uniapp menyokong penentuan komponen applet global, yang boleh membantu kami mengurangkan jumlah kod yang diperkenalkan. Begini caranya: Tentukan komponen

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

dalam main.js dan gunakannya dalam halaman: wxml:

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

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

2 Dapat diperhatikan bahawa antara komponen yang terkandung di atas, terdapat atribut tag, yang digunakan untuk mengenal pasti contoh animasi dari halaman mana ia berasal. Ia wujud kerana dalam komponen, dalam keadaan biasa kita boleh mentakrifkan secara langsung atribut dalam data untuk menyimpan contoh animasi, tetapi selepas menggali ke dalam lubang, kami mendapati bahawa jika kami terus menulis

this.ins = lottie.loadAnimation({})

seperti ini , konsol akan melaporkan ralat Ini kerana objek yang dikembalikan oleh lottie.loadAnimation({}) akan melalui proses JSON.stringfy apabila diletakkan dalam data Semasa proses ini, ralat dilaporkan atas sebab yang tidak diketahui. Untuk menyelesaikan ralat ini, sebaliknya tentukan insList secara global dalam komponen untuk menyimpan koleksi tika animasi, dapatkan tika halaman yang sepadan melalui teg masuk, dan kemudian panggil kaedah main contoh yang sepadan.

Isu penembusan halaman dan klik

1. Apabila menyeret halaman, ia akan menyebabkan halaman itu ditatal , cuma tambah

catchtouchmove="return"

dalam paparan kawasan

2. Masalah tidak boleh klik dan seret butang halaman kawasan. Pertama sekali, kawasan seret kami ialah keseluruhan halaman, dan kami menggunakan kedudukan tetap untuk menutup keseluruhan halaman, tetapi ini akan menyebabkan halaman di bawah lapisan topeng tidak dapat bertindak balas terhadap peristiwa klik. Jadi kita perlu menetapkan nama kelas kembangkan secara dinamik Apabila elemen berada dalam keadaan seret, kita akan meliputi kawasan bertopeng pada keseluruhan halaman, dan kawasan awal boleh konsisten dengan elemen yang diseret. Lihat kod lengkap di atas untuk pelaksanaan kod

Lihat kesan pengalaman

Program Mini Carian WeChat: Lobbyist English--Your Private Foreign Teacher

Untuk lebih banyak pengetahuan berkaitan pengaturcaraan, sila lawati: Pengenalan kepada Pengaturcaraan! !

Atas ialah kandungan terperinci Bagaimanakah uniapp melaksanakan fungsi seret dan lepas percuma pada halaman program mini?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!