Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
DCloud
hello uni-app x
提交
7b3b7a56
H
hello uni-app x
项目概览
DCloud
/
hello uni-app x
通知
6006
Star
91
Fork
164
代码
文件
提交
分支
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看板
提交
7b3b7a56
编写于
9月 01, 2023
作者:
H
hdx
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
swiper-list: 移除日志
上级
9a04d0af
变更
1
显示空白变更内容
内联
并排
Showing
1 changed file
with
7 addition
and
9 deletion
+7
-9
pages/template/swiper-list/swiper-list.uvue
pages/template/swiper-list/swiper-list.uvue
+7
-9
未找到文件。
pages/template/swiper-list/swiper-list.uvue
浏览文件 @
7b3b7a56
...
@@ -55,7 +55,7 @@
...
@@ -55,7 +55,7 @@
this.$tabScrollView = this.$refs.get('tabScroll') as INode
this.$tabScrollView = this.$refs.get('tabScroll') as INode
this.$indicatorNode = this.$refs.get('indicator') as INode
this.$indicatorNode = this.$refs.get('indicator') as INode
this.$swiperWidth = (this.$refs["swiper"] as INode).getBoundingClientRect().width
this.$swiperWidth = (this.$refs["swiper"] as INode).getBoundingClientRect().width
this.
query
TabItemsSize()
this.
cache
TabItemsSize()
this.setSwiperIndex(0, true)
this.setSwiperIndex(0, true)
},
},
methods: {
methods: {
...
@@ -70,12 +70,12 @@
...
@@ -70,12 +70,12 @@
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 + current_offset_i.toInt()
const current_index = this.$animationFinishIndex + current_offset_i.toInt()
//
更新
索引及边界检查
//
计算目标
索引及边界检查
let move_to_index = current_index
let move_to_index = current_index
if (current_offset_x > 0 && move_to_index < this.swiperList.length - 1) {
if (current_offset_x > 0 && move_to_index < this.swiperList.length - 1) {
move_to_index += 1
move_to_index += 1
...
@@ -88,14 +88,12 @@
...
@@ -88,14 +88,12 @@
// 通知更新指示线
// 通知更新指示线
this.updateTabIndicator(current_index, move_to_index, percentage)
this.updateTabIndicator(current_index, move_to_index, percentage)
// console.log(current_index + "->" + move_to_index+ " p=" + percentage + " x=" + offset_x )
},
},
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
},
},
query
TabItemsSize() {
cache
TabItemsSize() {
this.$swiperTabsRect.length = 0;
this.$swiperTabsRect.length = 0;
const tabs = this.$refs["swipertab"] as INode[]
const tabs = this.$refs["swipertab"] as INode[]
tabs.forEach((node) => {
tabs.forEach((node) => {
...
@@ -120,14 +118,14 @@
...
@@ -120,14 +118,14 @@
// 计算指示线
// 计算指示线
const current_size = this.$swiperTabsRect[current_index]
const current_size = this.$swiperTabsRect[current_index]
const move_to_size = this.$swiperTabsRect[move_to_index]
const move_to_size = this.$swiperTabsRect[move_to_index]
const indicator_line_
l
= current_size.x + (move_to_size.x - current_size.x) * percentage
const indicator_line_
x
= current_size.x + (move_to_size.x - current_size.x) * percentage
const indicator_line_w = current_size.w + (move_to_size.w - current_size.w) * percentage
const indicator_line_w = current_size.w + (move_to_size.w - current_size.w) * percentage
// 更新指示线
// 更新指示线
const x = indicator_line_
l
+ indicator_line_w / 2
const x = indicator_line_
x
+ indicator_line_w / 2
this.$indicatorNode?.style?.setProperty('transform', `translateX(${x}px) scaleX(${indicator_line_w})`)
this.$indicatorNode?.style?.setProperty('transform', `translateX(${x}px) scaleX(${indicator_line_w})`)
//
将指示线
滚动到水平中心位置
// 滚动到水平中心位置
const scroll_x = x - this.$swiperWidth / 2
const scroll_x = x - this.$swiperWidth / 2
this.$tabScrollView?.setAttribute('scrollLeft', scroll_x)
this.$tabScrollView?.setAttribute('scrollLeft', scroll_x)
}
}
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录