提交 df074ff0 编写于 作者: shutao-dc's avatar shutao-dc

add long-list2.uvue

上级 5f4b486a
......@@ -916,6 +916,13 @@
"navigationBarTitleText": "复杂长列表",
"enablePullDownRefresh": true
}
},
{
"path": "pages/template/long-list2/long-list2",
"style": {
"navigationBarTitleText": "复杂长列表2",
"enablePullDownRefresh": true
}
},
{
"path": "pages/component/list-view/list-view",
......@@ -996,7 +1003,7 @@
},
{
"path" : "pages/API/element-draw/element-draw",
"style" :
"style" :
{
"navigationBarTitleText" : "getDrawableContext",
"enablePullDownRefresh" : false
......@@ -1004,7 +1011,7 @@
},
{
"path" : "pages/component/general-event/transition-event",
"style" :
"style" :
{
"navigationBarTitleText" : "transitionend事件",
"enablePullDownRefresh" : false
......
......@@ -82,10 +82,19 @@ export default {
{
id: 'long-list',
url: 'long-list',
name: '复杂长列表',
name: '左右滑动长列表',
open: false,
enable: true,
pages: [] as Page[],
pages: [
{
name: '顶部搜索框随时下移长列表',
url:'long-list'
},
{
name: '顶部banner长列表',
url:'long-list2'
},
] as Page[],
},
{
id: 'list-news',
......
<template>
<scroll-view ref="pageScrollView" class="page" :scroll-y="true" :rebound="false"
@startnestedscroll="onStartNestedScroll" @nestedprescroll="onNestedPreScroll">
<swiper ref="header" indicator-dots="true" circular="true">
<swiper-item v-for="i in 3" :item-id="i">
<image src="/static/shuijiao.jpg" style="height: 240px;"></image>
<text style="position: absolute;">{{i}}</text>
</swiper-item>
</swiper>
<view class="swiper-list">
<scroll-view ref="tabScroll" class="swiper-tabs" :scroll-x="true" :show-scrollbar="false">
<view class="flex-row" style="align-self: flex-start;">
<text ref="swipertab" class="swiper-tabs-item" :class="swiperIndex==index ? 'swiper-tabs-item-active' : ''"
v-for="(item, index) in swiperList" :key="index" @click="onTabClick(index)">
{{item.name}}
</text>
</view>
<view ref="indicator" class="swiper-tabs-indicator"></view>
</scroll-view>
<swiper ref="swiper" class="swiper-view" :current="swiperIndex" @transition="onSwiperTransition"
@animationfinish="onSwiperAnimationfinish">
<swiper-item class="swiper-item" v-for="(item, index) in swiperList" :key="index">
<long-page ref="longPage" :type="item.type" :preload="item.preload"></long-page>
</swiper-item>
</swiper>
</view>
</scroll-view>
</template>
<script>
import { ComponentPublicInstance } from 'vue';
import longPage from '../long-list/long-list-page.uvue';
type SwiperTabsItem = {
x : number,
w : number
}
type SwiperViewItem = {
type : string,
name : string,
preload : boolean,
}
/**
* 根据权重在两个值之间执行线性插值.
* @constructor
* @param {number} value1 - 第一个值,该值应为下限.
* @param {number} value2 - 第二个值,该值应为上限.
* @param {number} amount - 应介于 0 和 1 之间,指示内插的权重.
* @returns {number} 内插值
*/
function lerpNumber(value1 : number, value2 : number, amount : number) : number {
return (value1 + (value2 - value1) * amount)
}
export default {
components: {
longPage
},
data() {
return {
swiperList: [
{
type: 'UpdatedDate',
name: '最新上架',
preload: true
} as SwiperViewItem,
{
type: 'FreeHot',
name: '免费热榜'
} as SwiperViewItem,
{
type: 'PaymentHot',
name: '付费热榜'
} as SwiperViewItem,
{
type: 'HotList',
name: '热门总榜'
} as SwiperViewItem
] as SwiperViewItem[],
swiperIndex: -1,
$pageScrollView: null as null | Element,
$headerHeight: 0,
$animationFinishIndex: 0,
$tabScrollView: null as null | Element,
$indicatorNode: null as null | Element,
$swiperWidth: 0,
$swiperTabsRect: [] as SwiperTabsItem[]
}
},
onReady() {
this.$pageScrollView = this.$refs['pageScrollView'] as Element;
this.$headerHeight = (this.$refs['header'] as Element).offsetHeight
this.$swiperWidth = (this.$refs['swiper'] as Element).getBoundingClientRect().width
this.$tabScrollView = this.$refs['tabScroll'] as Element
this.$indicatorNode = this.$refs['indicator'] as Element
this.cacheTabItemsSize()
this.setSwiperIndex(0, true)
},
onPullDownRefresh() {
(this.$refs["longPage"]! as ComponentPublicInstance[])[this.swiperIndex].$callMethod('refreshData', () => {
uni.stopPullDownRefresh()
})
},
methods: {
// TODO
onStartNestedScroll(_ : StartNestedScrollEvent) : boolean {
return true
},
onNestedPreScroll(event : NestedPreScrollEvent) {
const deltaY = event.deltaY
const scrollTop = this.$pageScrollView!.scrollTop
if (deltaY > 0) {
// 向上滚动,如果父容器 header scrollTop < offsetHeight,先滚动父容器
if (scrollTop < this.$headerHeight) {
const difference = this.$headerHeight - scrollTop - deltaY
if (difference > 0) {
this.$pageScrollView!.scrollBy(event.deltaX, deltaY)
event.consumed(event.deltaX, deltaY)
} else {
const top : number = deltaY + difference
event.consumed(event.deltaX, top.toFloat())
this.$pageScrollView!.scrollBy(event.deltaX, top.toFloat())
}
}
}
},
onTabClick(index : number) {
this.setSwiperIndex(index, false)
},
onSwiperTransition(e : SwiperTransitionEvent) {
// 微信 skyline 每项完成触发 Animationfinish,偏移值重置
// 微信 webview 全部完成触发 Animationfinish,偏移值累加
// 在滑动到下一个项的过程中,再次反向滑动,偏移值递减
// 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()
// 计算目标索引及边界检查
let move_to_index = current_index
if (current_offset_x > 0 && move_to_index < this.swiperList.length - 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
// 通知更新指示线
this.updateTabIndicator(current_index, move_to_index, percentage)
// 首次可见时初始化数据
this.initSwiperItemData(move_to_index)
},
onSwiperAnimationfinish(e : SwiperAnimationFinishEvent) {
this.setSwiperIndex(e.detail.current, true)
this.$animationFinishIndex = e.detail.current
},
cacheTabItemsSize() {
this.$swiperTabsRect.length = 0
const tabs = this.$refs["swipertab"] as Element[]
tabs.forEach((node) => {
this.$swiperTabsRect.push({
x: node.offsetLeft,
w: node.offsetWidth
} as SwiperTabsItem)
})
},
setSwiperIndex(index : number, updateIndicator : boolean) {
if (this.swiperIndex === index) {
return
}
this.swiperIndex = index
this.initSwiperItemData(index)
if (updateIndicator) {
this.updateTabIndicator(index, index, 1)
}
},
updateTabIndicator(current_index : number, move_to_index : number, percentage : number) {
const current_size = this.$swiperTabsRect[current_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_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 scroll_x = x - this.$swiperWidth / 2
this.$tabScrollView?.setAttribute('scrollLeft', scroll_x)
},
initSwiperItemData(index : number) {
if (!this.swiperList[index].preload) {
this.swiperList[index].preload = true;
(this.$refs["longPage"]! as ComponentPublicInstance[])[index].$callMethod('loadData', null)
}
}
}
}
</script>
<style>
.flex-row {
flex-direction: row;
}
.page {
flex: 1;
}
.search-bar {
padding: 10px;
}
.swiper-list {
height: 100%;
}
.swiper-tabs {
background-color: #ffffff;
flex-direction: column;
}
.swiper-tabs-item {
color: #555;
font-size: 16px;
padding: 12px 25px;
}
.swiper-tabs-item-active {
color: #007AFF;
}
.swiper-tabs-indicator {
width: 1px;
height: 2px;
background-color: #007AFF;
}
.swiper-view {
flex: 1;
}
.swiper-item {
flex: 1;
}
</style>
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册