枕上诗书闲处好,门前风景雨来佳。这篇文章主要讲述uni-app技术分享| 用uni-app实现拖动的诀窍相关的知识,希望能为你提供帮助。
还在为实现类似于QQ视频通话
那样的视频窗口随意拖动而苦恼吗?福音来了,今天就为大家解决这样的烦恼。
前提:
使用 anyrtc 基本实现音视频(nvue页面)
需求:
【uni-app技术分享| 用uni-app实现拖动的诀窍】两人通话时可随意拖动小视频
实现原理:
uniapp的nvue内置原生插件 BindingX。具体可查看 uniapp 原生插件引入、 BindingX
效果展示:
文章图片
文章图片
项目地址:
Call_uniapp
具体实现:
1. 在实现音视频功能插件提供的视频容器外边包裹一层。如:(使用 anyRTC 音视频插件)
<
view ref="move" @touchstart="drag_start">
<
AR-CanvasView ref="location" style="flex: 1;
" />
<
/view>
2. 使用nvue内置插件 BindingX(uniapp已默认集成) 。nvue内置插件,具体可查看 uniapp 原生插件引入
BindingX 效果以及相关方法可参考 BindingX
const BindingX = uni.requireNativePlugin(\'bindingx\');
3. 实现拖拽具体方法: 1. 相关数据(nvue)
```javascript
data() {
return {
// 页面高宽
windowWidth: 200,
windowHeight: 400,
// 记录当前位置
position: {
x: 0,
y: 0
},
// 判断是点击事件还是拖动事件
timer: false,
}
}
```
?
2. 封装 BindingX 获取拖动的元素(添加到nvue的methods)
```javascript
// 获取元素
getEl(el) {
if (typeof el === \'string\' || typeof el === \'number\') return el;
if (WXEnvironment) {
return el.ref;
} else {
return el instanceof htmlElement ? el : el.$el;
}
},
```
3. 为可拖动元素绑定手指触发
touchstart
事件(添加到nvue的methods)
```javascript
drag_start(e) {
const move = this.getEl(this.$refs.move);
let oBindingX = BindingX.bind({
anchor: move,
eventType: \'pan\',
props: [{
element: move,
property: \'transform.translateX\',
expression: `x+${this.position.x}`,
},
{
element: move,
property: \'transform.translateY\',
expression: `y+${this.position.y}`,
}
]
}, (e) =>
{
if (e.state === \'end\') {
if (this.timer) {
//移动时间特别短暂 视为点击事件
clearTimeout(this.timer);
// 点击事件处理
}
BindingX.unbind({
token: oBindingX.token,
eventType: \'pan\'
})
//记录位置
this.position.x += e.deltaX;
this.position.y += e.deltaY;
// x轴边界
if (-this.position.x >
= (this.windowWidth - 193)) {
this.position.x = 193 - this.windowWidth;
}
if (this.position.x >
0) {
this.position.x = 0;
}
// y 轴边界
if (this.position.y <
0) {
this.position.y = 0;
}
if (this.position.y >
= (this.windowHeight - 244)) {
this.position.y = this.windowHeight - 244;
}
// 结束拖动
this.endAmaier();
} else {
// 判断点击事件还是拖动事件
this.timer = setTimeout(() =>
{
this.timer = null;
}, 50)
}
});
}// 结束拖动
endAmaier(e) {
const my = this.getEl(this.$refs.move);
let result = BindingX.bind({
eventType: \'timing\',
exitExpression: \'t>
200\',
props: [{
element: my,
property: \'transform.translateX\',
expression: "easeOutElastic(t," + this.position.x + "," + 0 +
",200)",
},
{
element: my,
property: \'transform.translateY\',
expression: "easeOutElastic(t," + this.position.y + "," + 0 +
",200)",
}
]
}, (e) =>
{
if (e.state === \'end\' || e.state === \'exit\') {
BindingX.unbind({
token: result.token,
eventType: \'timing\'
})
}
});
}
```
?
4. 运行项目,即可流畅拖动
推荐阅读
- 实体链接在OPPO小布助手和OGraph的实践应用
- 优化技术专题「高性能框架」终极关注Disruptor源码和Java8的@Contended伪共享
- 木棉花(手机游戏——黑白翻棋)
- 短代码未在Divi Builder中执行
- 以编程方式设置WordPress主菜单
- 以编程方式设置WordPress语言()
- 设置WordPress主题-发布内容可使屏幕滚动
- 在wp_enqueue_style中为不同的媒体设置多CSS文件
- WP主题选项中带有容器的单独字段数组(Carbon Fields)