Skip to content

H
hello uni-app x

DCloud / hello uni-app x

通知 5995
Star 90
Fork 162
H
hello uni-app x
提交 5a605bf0 编写于 作者: DCloud-yyl's avatar DCloud-yyl
浏览文件
操作

优化“复杂长列表”示例view的层级

上级 78996dee
隐藏空白更改
内联 并排
Showing with 263 addition and 266 deletion
pages/template/long-list/long-list.uvue
浏览文件 @ 5a605bf0
<template> <template>
<scroll-view ref="pageScrollView" class="page" :scroll-y="true" :rebound="false" <scroll-view ref="pageScrollView" class="page" :scroll-y="true" :rebound="false"
@startnestedscroll="onStartNestedScroll" @nestedprescroll="onNestedPreScroll"> @startnestedscroll="onStartNestedScroll" @nestedprescroll="onNestedPreScroll">
<view ref="header" class="search-bar"> <view ref="header" class="search-bar">
<input placeholder="搜索..." /> <input placeholder="搜索..." />
</view> </view>
<view class="swiper-list"> <view class="swiper-list">
<scroll-view ref="tabScroll" class="swiper-tabs" :scroll-x="true" :show-scrollbar="false"> <scroll-view ref="tabScroll" class="swiper-tabs" :scroll-x="true" :show-scrollbar="false">
<!-- TODO 多一层 view --> <view class="flex-row" style="align-self: flex-start;">
<view style="align-self: flex-start; align-items: flex-start;"> <text ref="swipertab" class="swiper-tabs-item" :class="swiperIndex==index ? 'swiper-tabs-item-active' : ''"
<view class="flex-row"> v-for="(item, index) in swiperList" :key="index" @click="onTabClick(index)">
<text ref="swipertab" class="swiper-tabs-item" :class="swiperIndex==index ? 'swiper-tabs-item-active' : ''" {{item.name}}
v-for="(item, index) in swiperList" :key="index" @click="onTabClick(index)"> </text>
{{item.name}} </view>
</text> <view ref="indicator" class="swiper-tabs-indicator"></view>
</view> </scroll-view>
<view ref="indicator" class="swiper-tabs-indicator"></view> <swiper ref="swiper" class="swiper-view" :current="swiperIndex" @transition="onSwiperTransition"
</view> @animationfinish="onSwiperAnimationfinish">
</scroll-view> <swiper-item class="swiper-item" v-for="(item, index) in swiperList" :key="index">
<swiper ref="swiper" class="swiper-view" :current="swiperIndex" @transition="onSwiperTransition" <long-page ref="longPage" :type="item.type" :preload="item.preload"></long-page>
@animationfinish="onSwiperAnimationfinish"> </swiper-item>
<swiper-item class="swiper-item" v-for="(item, index) in swiperList" :key="index"> </swiper>
<long-page ref="longPage" :type="item.type" :preload="item.preload"></long-page> </view>
</swiper-item> </scroll-view>
</swiper> </template>
</view>
</scroll-view> <script>
</template> import longPage from './long-list-page.uvue';
<script> type SwiperTabsItem = {
import longPage from './long-list-page.uvue'; x : number,
w : number
type SwiperTabsItem = { }
x : number,
w : number type SwiperViewItem = {
} type : string,
name : string,
type SwiperViewItem = { preload : boolean,
type : string, }
name : string,
preload : boolean, /**
} * 根据权重在两个值之间执行线性插值.
* @constructor
/** * @param {number} value1 - 第一个值，该值应为下限.
* 根据权重在两个值之间执行线性插值. * @param {number} value2 - 第二个值，该值应为上限.
* @constructor * @param {number} amount - 应介于 0 和 1 之间，指示内插的权重.
* @param {number} value1 - 第一个值，该值应为下限. * @returns {number} 内插值
* @param {number} value2 - 第二个值，该值应为上限. */
* @param {number} amount - 应介于 0 和 1 之间，指示内插的权重. function lerpNumber(value1 : number, value2 : number, amount : number) : number {
* @returns {number} 内插值 return (value1 + (value2 - value1) * amount)
*/ }
function lerpNumber(value1 : number, value2 : number, amount : number) : number {
return (value1 + (value2 - value1) * amount) export default {
} components: {
longPage
export default { },
components: { data() {
longPage return {
}, swiperList: [
data() { {
return { type: 'UpdatedDate',
swiperList: [ name: '最新上架',
{ preload: true
type: 'UpdatedDate', } as SwiperViewItem,
name: '最新上架', {
preload: true type: 'FreeHot',
} as SwiperViewItem, name: '免费热榜'
{ } as SwiperViewItem,
type: 'FreeHot', {
name: '免费热榜' type: 'PaymentHot',
} as SwiperViewItem, name: '付费热榜'
{ } as SwiperViewItem,
type: 'PaymentHot', {
name: '付费热榜' type: 'HotList',
} as SwiperViewItem, name: '热门总榜'
{ } as SwiperViewItem
type: 'HotList', ] as SwiperViewItem[],
name: '热门总榜' swiperIndex: -1,
} as SwiperViewItem $pageScrollView: null as null | INode,
] as SwiperViewItem[], $headerHeight: 0,
swiperIndex: -1, $animationFinishIndex: 0,
$pageScrollView: null as null | INode, $tabScrollView: null as null | INode,
$headerHeight: 0, $indicatorNode: null as null | INode,
$animationFinishIndex: 0, $swiperWidth: 0,
$tabScrollView: null as null | INode, $swiperTabsRect: [] as SwiperTabsItem[]
$indicatorNode: null as null | INode, }
$swiperWidth: 0, },
$swiperTabsRect: [] as SwiperTabsItem[] onReady() {
} this.$pageScrollView = this.$refs['pageScrollView'] as INode;
}, this.$headerHeight = (this.$refs["header"] as INode).offsetHeight
onReady() { this.$swiperWidth = (this.$refs["swiper"] as INode).getBoundingClientRect().width
this.$pageScrollView = this.$refs['pageScrollView'] as INode; this.$tabScrollView = this.$refs.get('tabScroll') as INode
this.$headerHeight = (this.$refs["header"] as INode).offsetHeight this.$indicatorNode = this.$refs.get('indicator') as INode
this.$swiperWidth = (this.$refs["swiper"] as INode).getBoundingClientRect().width this.cacheTabItemsSize()
this.$tabScrollView = this.$refs.get('tabScroll') as INode this.setSwiperIndex(0, true)
this.$indicatorNode = this.$refs.get('indicator') as INode },
this.cacheTabItemsSize() onPullDownRefresh() {
this.setSwiperIndex(0, true) (this.$refs["longPage"]! as ComponentPublicInstance[])[this.swiperIndex].$callMethod('refreshData', () => {
}, uni.stopPullDownRefresh()
onPullDownRefresh() { })
(this.$refs["longPage"]! as ComponentPublicInstance[])[this.swiperIndex].$callMethod('refreshData', () => { },
uni.stopPullDownRefresh() methods: {
}) // TODO
}, onStartNestedScroll(event : StartNestedScrollEvent) : boolean {
methods: { return true
// TODO },
onStartNestedScroll(event : StartNestedScrollEvent) : boolean { onNestedPreScroll(event : NestedPreScrollEvent) {
return true const deltaY = event.deltaY
}, const scrollTop = this.$pageScrollView!.scrollTop
onNestedPreScroll(event : NestedPreScrollEvent) {
const deltaY = event.deltaY /// 优先处理父容器滚动，父容器不能滚动时滚动子
const scrollTop = this.$pageScrollView!.scrollTop // 向上滚动
if (deltaY > 0) {
/// 优先处理父容器滚动，父容器不能滚动时滚动子 // 如果父容器 header scrollTop < offsetHeight，先滚动父容器
// 向上滚动 if (scrollTop < this.$headerHeight) {
if (deltaY > 0) { const difference = this.$headerHeight - scrollTop - deltaY
// 如果父容器 header scrollTop < offsetHeight，先滚动父容器 if (difference > 0) {
if (scrollTop < this.$headerHeight) { this.$pageScrollView!.scrollBy(event.deltaX, deltaY)
const difference = this.$headerHeight - scrollTop - deltaY event.consumed(event.deltaX, deltaY)
if (difference > 0) { } else {
this.$pageScrollView!.scrollBy(event.deltaX, deltaY) const top : number = deltaY + difference
event.consumed(event.deltaX, deltaY) event.consumed(event.deltaX, top.toFloat())
} else { this.$pageScrollView!.scrollBy(event.deltaX, top.toFloat())
const top : number = deltaY + difference }
event.consumed(event.deltaX, top.toFloat()) }
this.$pageScrollView!.scrollBy(event.deltaX, top.toFloat()) } else if (deltaY < 0) {
} // 向下滚动，如果父容器 scrollTop > 0，通知子被父容器消耗，然后滚动到 0
} if (scrollTop > 0) {
} else if (deltaY < 0) { event.consumed(event.deltaX, deltaY)
// 向下滚动，如果父容器 scrollTop > 0，通知子被父容器消耗，然后滚动到 0 this.$pageScrollView!.scrollBy(event.deltaX, deltaY)
if (scrollTop > 0) { }
event.consumed(event.deltaX, deltaY) }
this.$pageScrollView!.scrollBy(event.deltaX, deltaY) },
} onTabClick(index : number) {
} this.setSwiperIndex(index, false)
}, },
onTabClick(index : number) { onSwiperTransition(e : SwiperTransitionEvent) {
this.setSwiperIndex(index, false) // 微信 skyline 每项完成触发 Animationfinish，偏移值重置
}, // 微信 webview 全部完成触发 Animationfinish，偏移值累加
onSwiperTransition(e : SwiperTransitionEvent) { // 在滑动到下一个项的过程中，再次反向滑动，偏移值递减
// 微信 skyline 每项完成触发 Animationfinish，偏移值重置 // uni-app-x 和微信 webview 行为一致
// 微信 webview 全部完成触发 Animationfinish，偏移值累加
// 在滑动到下一个项的过程中，再次反向滑动，偏移值递减 const offset_x = e.detail.dx
// uni-app-x 和微信 webview 行为一致
// 计算当前索引并重置差异
const offset_x = e.detail.dx const current_offset_x = offset_x % this.$swiperWidth
const current_offset_i = offset_x / this.$swiperWidth
// 计算当前索引并重置差异 const current_index = this.$animationFinishIndex + current_offset_i.toInt()
const current_offset_x = offset_x % this.$swiperWidth
const current_offset_i = offset_x / this.$swiperWidth // 计算目标索引及边界检查
const current_index = this.$animationFinishIndex + current_offset_i.toInt() let move_to_index = current_index
if (current_offset_x > 0 && move_to_index < this.swiperList.length - 1) {
// 计算目标索引及边界检查 move_to_index += 1
let move_to_index = current_index } else if (current_offset_x < 0 && move_to_index > 0) {
if (current_offset_x > 0 && move_to_index < this.swiperList.length - 1) { move_to_index -= 1
move_to_index += 1 }
} else if (current_offset_x < 0 && move_to_index > 0) {
move_to_index -= 1 // 计算偏移百分比
} 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) this.initSwiperItemData(move_to_index)
},
// 首次可见时初始化数据 onSwiperAnimationfinish(e : SwiperAnimationFinishEvent) {
this.initSwiperItemData(move_to_index) this.setSwiperIndex(e.detail.current, true)
}, this.$animationFinishIndex = e.detail.current
onSwiperAnimationfinish(e : SwiperAnimationFinishEvent) { },
this.setSwiperIndex(e.detail.current, true) cacheTabItemsSize() {
this.$animationFinishIndex = e.detail.current this.$swiperTabsRect.length = 0
}, const tabs = this.$refs["swipertab"] as INode[]
cacheTabItemsSize() { tabs.forEach((node) => {
this.$swiperTabsRect.length = 0 this.$swiperTabsRect.push({
const tabs = this.$refs["swipertab"] as INode[] x: node.offsetLeft,
tabs.forEach((node) => { w: node.offsetWidth
this.$swiperTabsRect.push({ } as SwiperTabsItem)
x: node.offsetLeft, })
w: node.offsetWidth },
} as SwiperTabsItem) setSwiperIndex(index : number, updateIndicator : boolean) {
}) if (this.swiperIndex === index) {
}, return
setSwiperIndex(index : number, updateIndicator : boolean) { }
if (this.swiperIndex === index) {
return this.swiperIndex = index
}
this.initSwiperItemData(index)
this.swiperIndex = index
if (updateIndicator) {
this.initSwiperItemData(index) this.updateTabIndicator(index, index, 1)
}
if (updateIndicator) { },
this.updateTabIndicator(index, index, 1) updateTabIndicator(current_index : number, move_to_index : number, percentage : number) {
} // 计算指示线
}, const current_size = this.$swiperTabsRect[current_index]
updateTabIndicator(current_index : number, move_to_index : number, percentage : number) { const move_to_size = this.$swiperTabsRect[move_to_index]
// 计算指示线 const indicator_line_x = lerpNumber(current_size.x, move_to_size.x, percentage)
const current_size = this.$swiperTabsRect[current_index] const indicator_line_w = lerpNumber(current_size.w, move_to_size.w, percentage)
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_w = lerpNumber(current_size.w, move_to_size.w, percentage) const x = indicator_line_x + indicator_line_w / 2
this.$indicatorNode?.style?.setProperty('transform', `translateX(${x}px) scaleX(${indicator_line_w})`)
// 更新指示线
const x = indicator_line_x + indicator_line_w / 2 // 滚动到水平中心位置
this.$indicatorNode?.style?.setProperty('transform', `translateX(${x}px) scaleX(${indicator_line_w})`) const scroll_x = x - this.$swiperWidth / 2
this.$tabScrollView?.setAttribute('scrollLeft', scroll_x)
// 滚动到水平中心位置 },
const scroll_x = x - this.$swiperWidth / 2 initSwiperItemData(index : number) {
this.$tabScrollView?.setAttribute('scrollLeft', scroll_x) if (!this.swiperList[index].preload) {
}, this.swiperList[index].preload = true;
initSwiperItemData(index : number) { (this.$refs["longPage"]! as ComponentPublicInstance[])[index].$callMethod('loadData', null)
if (!this.swiperList[index].preload) { }
this.swiperList[index].preload = true; }
(this.$refs["longPage"]! as ComponentPublicInstance[])[index].$callMethod('loadData', null) }
} }
} </script>
}
} <style>
</script> .flex-row {
flex-direction: row;
<style> }
.flex-row {
flex-direction: row; .page {
} flex: 1;
}
.page {
flex: 1; .search-bar {
} padding: 10px;
}
.search-bar {
padding: 10px; .swiper-list {
} height: 100%;
}
.swiper-list {
height: 100%; .swiper-tabs {
} background-color: #ffffff;
}
.swiper-tabs {
background-color: #ffffff; .swiper-tabs-item {
} color: #555;
font-size: 16px;
.swiper-tabs-item { padding: 12px 25px;
color: #555; }
font-size: 16px;
padding: 12px 25px; .swiper-tabs-item-active {
} color: #007AFF;
}
.swiper-tabs-item-active {
color: #007AFF; .swiper-tabs-indicator {
} width: 1px;
height: 2px;
.swiper-tabs-indicator { background-color: #007AFF;
width: 1px; }
height: 2px;
background-color: #007AFF; .swiper-view {
} flex: 1;
}
.swiper-view {
flex: 1; .swiper-item {
} flex: 1;
}
.swiper-item { </style>
flex: 1; \ No newline at end of file
}
</style>
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或