Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
DCloud
hello uni-app x
提交
4088572f
H
hello uni-app x
项目概览
DCloud
/
hello uni-app x
通知
5995
Star
90
Fork
162
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
18
列表
看板
标记
里程碑
合并请求
1
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
H
hello uni-app x
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
18
Issue
18
列表
看板
标记
里程碑
合并请求
1
合并请求
1
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
提交
4088572f
编写于
8月 29, 2023
作者:
DCloud_JSON
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
更新 示例项目 drop-card ,新增:当卡片在x轴方向上被拖动一段较短的距离时,松开后,卡片会返回中心的动画
上级
2fbfbe0b
变更
1
隐藏空白更改
内联
并排
Showing
1 changed file
with
58 addition
and
28 deletion
+58
-28
pages/template/drop-card/card/card.uvue
pages/template/drop-card/card/card.uvue
+58
-28
未找到文件。
pages/template/drop-card/card/card.uvue
浏览文件 @
4088572f
...
@@ -128,39 +128,69 @@
...
@@ -128,39 +128,69 @@
k = -1
k = -1
}
}
if(k !== 0.0){
function cardTo(x:number,y:number,callback: () => void,s:number = 10){
let interval:number = 0;
// console.log('s',s);
// console.log('--cardTo---',x,y);
let interval:number = 0
let _k:number = 1
interval = setInterval(()=>{
interval = setInterval(()=>{
this.x += k * 30
// 加速度
this.y *= 1.1
_k += 0.2
const dx = x - this.x
if(this.x.toInt() != x){
this.x += dx/s*_k
// console.log('dx/s*_k',dx/s*_k)
if(Math.abs(dx) < 3){
this.x = x
}
}
const dy = y - this.y
if(this.y.toInt() != y){
this.y += dy/s*_k
// console.log('dy/s*_k',dy/s*_k)
if(Math.abs(dy) < 3){
this.y = y
}
}
// console.log('this.x',this.x,'this.y',this.y);
// console.log('x',x,'y',y);
this.moveCard()
this.moveCard()
if(
Math.abs(this.x) > Math.abs(k * screenWidth * 1.5
)){
if(
this.x.toInt() == x.toInt() && this.y.toInt() == y.toInt(
)){
clearInterval(interval)
clearInterval(interval)
// 飘动的卡片挪回中心
callback()
}
// 状态图标变回透明
this.setINodeStyle("state-icon-like",'opacity', 0)
this.setINodeStyle("state-icon-dislike",'opacity', 0)
// 设置为透明,防止飘回时因为 margin-top 太高,露出来
this.setINodeStyle("card",'opacity', 0)
setTimeout(()=>{
this.setINodeStyle("card",'opacity', 1)
},300)
// 执行卡片飘动后事件,注意uni.$emit是全局事件。其他卡片也会执行
uni.$emit('uni-drop-card-float',null)
floating = false
}
},16)
},16)
}else{
// 坐标归零
this.x = 0
this.y = 0
this.moveCard()
floating = false
}
}
},
if(k.toInt() != 0){
cardTo(k * screenWidth * 1.3, this.y * 3,()=>{
// 状态图标变回透明
this.setINodeStyle("state-icon-like",'opacity', 0)
this.setINodeStyle("state-icon-dislike",'opacity', 0)
// 设置为透明,防止飘回时因为 margin-top 太高,露出来
this.setINodeStyle("card",'opacity', 0)
setTimeout(()=>{
this.setINodeStyle("card",'opacity', 1)
},300)
// 执行卡片飘动后事件,注意uni.$emit是全局事件。其他卡片也会执行
uni.$emit('uni-drop-card-float',null)
floating = false
},8)
}else{
const _x:number = this.x
const _y:number = this.y
cardTo( (_x*-0.05).toInt() , (_y*-0.05).toInt() ,()=>{
cardTo(0,0,()=>{
console.log('bounce')
floating = false
},30)
})
}
},
moveCard() {
moveCard() {
this.setINodeStyle("card",
this.setINodeStyle("card",
'transform',
'transform',
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录