提交 05233df7 编写于 作者: H hdx

swiper-list: 优化注释

上级 22960b7b
...@@ -24,7 +24,7 @@ ...@@ -24,7 +24,7 @@
</scroll-view> </scroll-view>
</template> </template>
<script> <script>
import { ComponentPublicInstance } from 'vue'; import { ComponentPublicInstance } from 'vue';
import longPage from './long-list-page.uvue'; import longPage from './long-list-page.uvue';
...@@ -109,10 +109,10 @@ ...@@ -109,10 +109,10 @@
const deltaY = event.deltaY const deltaY = event.deltaY
const scrollTop = this.$pageScrollView!.scrollTop const scrollTop = this.$pageScrollView!.scrollTop
/// 优先处理父容器滚动,父容器不能滚动时滚动子 // 优先处理父容器滚动,父容器不能滚动时滚动子
// 向上滚动
if (deltaY > 0) { if (deltaY > 0) {
// 如果父容器 header scrollTop < offsetHeight,先滚动父容器 // 向上滚动,如果父容器 header scrollTop < offsetHeight,先滚动父容器
if (scrollTop < this.$headerHeight) { if (scrollTop < this.$headerHeight) {
const difference = this.$headerHeight - scrollTop - deltaY const difference = this.$headerHeight - scrollTop - deltaY
if (difference > 0) { if (difference > 0) {
...@@ -193,9 +193,10 @@ ...@@ -193,9 +193,10 @@
} }
}, },
updateTabIndicator(current_index : number, move_to_index : number, percentage : number) { updateTabIndicator(current_index : number, move_to_index : number, percentage : number) {
// 计算指示线
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_x = lerpNumber(current_size.x, move_to_size.x, percentage) const indicator_line_x = lerpNumber(current_size.x, move_to_size.x, percentage)
const indicator_line_w = lerpNumber(current_size.w, move_to_size.w, percentage) const indicator_line_w = lerpNumber(current_size.w, move_to_size.w, percentage)
...@@ -235,7 +236,7 @@ ...@@ -235,7 +236,7 @@
} }
.swiper-tabs { .swiper-tabs {
background-color: #ffffff; background-color: #ffffff;
flex-direction: column; flex-direction: column;
} }
...@@ -262,4 +263,4 @@ ...@@ -262,4 +263,4 @@
.swiper-item { .swiper-item {
flex: 1; flex: 1;
} }
</style> </style>
\ No newline at end of file
...@@ -124,9 +124,10 @@ ...@@ -124,9 +124,10 @@
} }
}, },
updateTabIndicator(current_index : number, move_to_index : number, percentage : number) { updateTabIndicator(current_index : number, move_to_index : number, percentage : number) {
// 计算指示线
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_x = lerpNumber(current_size.x, move_to_size.x, percentage) const indicator_line_x = lerpNumber(current_size.x, move_to_size.x, percentage)
const indicator_line_w = lerpNumber(current_size.w, move_to_size.w, percentage) const indicator_line_w = lerpNumber(current_size.w, move_to_size.w, percentage)
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册