登录  /  注册
首页 > web前端 > uni-app > 正文

uniapp怎么实现小程序页面的自由拖拽功能

青灯夜游
发布: 2021-09-07 19:28:04
转载
8227人浏览过

uniapp怎么实现小程序页面的自由拖拽功能?下面本篇文章给大家介绍一下uniapp实现小程序页面自由拖拽组件的方法,希望对大家有所帮助!

uniapp怎么实现小程序页面的自由拖拽功能

先看实现效果:

1.gif

【相关推荐:《uniapp教程》】

实现过程

根据查阅文档,要实现拖拽功能,大概有三种方式:

1.给需要实现拖拽的元素监听catchtouchmove事件,动态修改样式坐标

这种方式最容易想到,通过js监听触摸位置动态修改元素坐标。但是拖拽是一个实时性要求非常高的操作,你不能说在这个操作里面去设置节流函数减少setData操作,并且本身每次setData操作也是比较耗性能的,很容易造成拖拽卡顿,这个方案可以首先排除。

2.movable-area + movable-view

movable-area组件的作用是定义一个区域,在这个区域内的movable-view的组件可以被用户自由的移动,同时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>
登录后复制

上面代码是开篇效果图实现的完整代码,已经封装一个单独的组件。我们要拖拽的是一个canvas元素,用到了lottie动画库,点击时会播放动画。如果你要实现页面拖拽的只是一个简单的按钮,那代码量会少很多。如果你要实现的功能跟这个类似,那么针对上面代码有以下几点需要值得解释:

1.我们的需求是在多个页面需要展示,经过查阅相关资料,是没法实现在只在一个地方放置组件,然后每个页面展示,必须每个页面引入该组件。幸运的是,uniapp支持定义全局小程序组件,可以帮我们减少引入的代码量。做法如下: 在main.js中定义组件

// 动画组件
import { HudunAnimation } from &#39;@/components/hudun-animation/index&#39;
Vue.component(&#39;HudunAnimation&#39;, HudunAnimation)
登录后复制

页面中使用: wxml:

<HudunAnimation tag="index" ref="hudunRef"></HudunAnimation>
登录后复制
// 进入页面时初始化动画
mounted() {
    this.$refs.hudunRef.init()
}
登录后复制

2.可以注意到,上面封装的组件当中,有一个tag属性,它是用来标识来自哪个页面的动画实例。它的存在是由于在组件当中,正常情况下我们可以直接在data中定义一个属性存放动画实例,但是经过踩坑发现如果直接这么写

this.ins = lottie.loadAnimation({})
登录后复制

控制台会报一个错误,是因为lottie.loadAnimation({})返回的对象放置于data中会经过一个JSON.stringfy的过程,在这个过程中不知道什么原因报错了。为了解决此报错,改为在组件全局定义一个insList存放动画实例集合,通过传入的tag拿到对应的页面实例,然后调用对应的实例play方法。

页面穿透及点击问题

1、在拖拽页面的时候,会带动页面的滚动,解决这个问题很简单,在area view中添加

catchtouchmove="return"
登录后复制

即可

2、无法点击拖拽区域页面按钮问题。首先我们的拖拽区域是整个页面,用的是fixed定位覆盖整个页面,但是这么一来就会导致蒙层下面的页面无法响应点击事件。所以我们需要通过动态设置类名expand,当元素处于拖拽状态时,我们才将蒙层的区域覆盖整个页面,而初始时区域跟拖拽元素保持一致即可。代码实现见上面完整代码

查看体验效果

微信搜索小程序:说客英语--你的私人外教

更多编程相关知识,请访问:编程入门!!

以上就是uniapp怎么实现小程序页面的自由拖拽功能的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
相关标签:
来源:掘金社区网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号