Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
DCloud
hello uni-app x
提交
40eb8f02
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看板
提交
40eb8f02
编写于
1月 15, 2024
作者:
H
hdx
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
swiper-list2: 移除$开头的变量,支持 web
上级
2cfbdb0f
变更
1
隐藏空白更改
内联
并排
Showing
1 changed file
with
15 addition
and
18 deletion
+15
-18
pages/template/swiper-list2/swiper-list2.uvue
pages/template/swiper-list2/swiper-list2.uvue
+15
-18
未找到文件。
pages/template/swiper-list2/swiper-list2.uvue
浏览文件 @
40eb8f02
...
@@ -39,10 +39,10 @@
...
@@ -39,10 +39,10 @@
data() {
data() {
return {
return {
swiperList: [] as SwiperViewItem[],
swiperList: [] as SwiperViewItem[],
swiperIndex:
-1
,
swiperIndex:
0
,
$
tabScrollView: null as null | UniElement,
tabScrollView: null as null | UniElement,
$
animationFinishIndex: 0,
animationFinishIndex: 0,
$
swiperWidth: 0
swiperWidth: 0
}
}
},
},
onLoad() {
onLoad() {
...
@@ -53,9 +53,9 @@
...
@@ -53,9 +53,9 @@
}
}
},
},
onReady() {
onReady() {
this.
$
tabScrollView = this.$refs['tabScroll'] as UniElement
this.tabScrollView = this.$refs['tabScroll'] as UniElement
this.
$
swiperWidth = (this.$refs["swiper"] as UniElement).getBoundingClientRect().width
this.swiperWidth = (this.$refs["swiper"] as UniElement).getBoundingClientRect().width
this.
setSwiperIndex(0, true
)
this.
updateTabIndicator(this.swiperIndex, this.swiperIndex, 1
)
},
},
methods: {
methods: {
onTabClick(index : number) {
onTabClick(index : number) {
...
@@ -65,9 +65,9 @@
...
@@ -65,9 +65,9 @@
const offset_x = e.detail.dx
const offset_x = e.detail.dx
// 计算当前索引并重置差异
// 计算当前索引并重置差异
const current_offset_x = offset_x % this.
$
swiperWidth
const current_offset_x = offset_x % this.swiperWidth
const current_offset_i = offset_x / this.
$
swiperWidth
const current_offset_i = offset_x / this.swiperWidth
const current_index = this.
$animationFinishIndex + Math.floor(current_offset_i
)
const current_index = this.
animationFinishIndex + parseInt(current_offset_i + ''
)
// 计算目标索引及边界检查
// 计算目标索引及边界检查
let move_to_index = current_index
let move_to_index = current_index
...
@@ -78,14 +78,14 @@
...
@@ -78,14 +78,14 @@
}
}
// 计算偏移百分比
// 计算偏移百分比
const percentage = Math.abs(current_offset_x) / this.
$
swiperWidth
const percentage = Math.abs(current_offset_x) / this.swiperWidth
// 通知更新指示线
// 通知更新指示线
this.updateTabIndicator(current_index, move_to_index, percentage)
this.updateTabIndicator(current_index, move_to_index, percentage)
},
},
onSwiperAnimationfinish(e : SwiperAnimationFinishEvent) {
onSwiperAnimationfinish(e : SwiperAnimationFinishEvent) {
this.setSwiperIndex(e.detail.current, true)
this.setSwiperIndex(e.detail.current, true)
this.
$
animationFinishIndex = e.detail.current
this.animationFinishIndex = e.detail.current
},
},
setSwiperIndex(index : number, updateIndicator : boolean) {
setSwiperIndex(index : number, updateIndicator : boolean) {
if (this.swiperIndex == index) {
if (this.swiperIndex == index) {
...
@@ -99,8 +99,7 @@
...
@@ -99,8 +99,7 @@
}
}
},
},
updateTabIndicator(current_index : number, move_to_index : number, percentage : number) {
updateTabIndicator(current_index : number, move_to_index : number, percentage : number) {
// TODO 0.0 != 0
if (percentage == 0) {
if (percentage.toDouble() == 0.0) {
return
return
}
}
...
@@ -122,10 +121,8 @@
...
@@ -122,10 +121,8 @@
// 滚动到水平中心位置
// 滚动到水平中心位置
const target_x = lerpNumber(current_node.offsetLeft, move_to_node.offsetLeft, percentage)
const target_x = lerpNumber(current_node.offsetLeft, move_to_node.offsetLeft, percentage)
const center_x = target_x + move_to_node.offsetWidth / 2 - this.$swiperWidth / 2
const center_x = target_x + move_to_node.offsetWidth / 2 - this.swiperWidth / 2
if(this.$tabScrollView !== null){
this.tabScrollView!.scrollLeft = center_x
this.$tabScrollView!.scrollLeft = center_x
}
}
}
}
}
}
}
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录