成为VIP
uniapp怎么实现小程序页面的自由拖拽功能？下面本篇文章给大家介绍一下uniapp实现小程序页面自由拖拽组件的方法，希望对大家有所帮助！
先看实现效果：
【相关推荐：《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>
上面代码是开篇效果图实现的完整代码，已经封装一个单独的组件。我们要拖拽的是一个canvas元素，用到了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.可以注意到，上面封装的组件当中，有一个tag属性，它是用来标识来自哪个页面的动画实例。它的存在是由于在组件当中，正常情况下我们可以直接在data中定义一个属性存放动画实例，但是经过踩坑发现如果直接这么写
this.ins = lottie.loadAnimation({})
控制台会报一个错误，是因为lottie.loadAnimation({})返回的对象放置于data中会经过一个JSON.stringfy的过程，在这个过程中不知道什么原因报错了。为了解决此报错，改为在组件全局定义一个insList存放动画实例集合，通过传入的tag拿到对应的页面实例，然后调用对应的实例play方法。
页面穿透及点击问题
1、在拖拽页面的时候，会带动页面的滚动，解决这个问题很简单，在area view中添加
catchtouchmove="return"
即可
2、无法点击拖拽区域页面按钮问题。首先我们的拖拽区域是整个页面，用的是fixed定位覆盖整个页面，但是这么一来就会导致蒙层下面的页面无法响应点击事件。所以我们需要通过动态设置类名expand，当元素处于拖拽状态时，我们才将蒙层的区域覆盖整个页面，而初始时区域跟拖拽元素保持一致即可。代码实现见上面完整代码
查看体验效果
微信搜索小程序：说客英语–你的私人外教
更多编程相关知识，请访问：编程入门！！
以上就是uniapp怎么实现小程序页面的自由拖拽功能的详细内容，更多请关注亿码酷站其它相关文章！
uniapp怎么实现小程序页面的自由拖拽功能
—–文章转载自PHP中文网如有侵权请联系ymkuzhan@126.com删除
本文永久链接地址：https://www.ymkuzhan.com/41078.html
