提交 bddc0f42 编写于 作者: 杜庆泉's avatar 杜庆泉

Merge branch 'master' of https://gitcode.net/dcloud/hello-uni-app-x into master

<template> <template>
<list-view class="list" ref="listView" @scrolltolower="loadData" scroll-y = true> <list-view ref="listView" class="list" :rebound="false" :scroll-y="true" :custom-nested-scroll="true"
@scrolltolower="loadData">
<!-- TODO 暂时这样写才能保证 loading 在 list 底部 --> <!-- TODO 暂时这样写才能保证 loading 在 list 底部 -->
<template v-for="(item, index) in dataList" :key="index"> <template v-for="(item, index) in dataList" :key="index">
<list-item class="list-item"> <list-item class="list-item">
...@@ -102,9 +103,8 @@ ...@@ -102,9 +103,8 @@
} }
this.loading = true this.loading = true
// TODO request data 没有拼接到 url 中,暂时手动拼接
uni.request<ResponseDataType>({ uni.request<ResponseDataType>({
url: `${SERVER_URL}?type=${this.type}&page=${this.$currentPage}&page_size=${PAGE_SIZE}`, url: SERVER_URL,
data: { data: {
type: this.type, type: this.type,
page: this.$currentPage, page: this.$currentPage,
...@@ -133,7 +133,7 @@ ...@@ -133,7 +133,7 @@
}) })
}, },
// score 0 ~ 50 // score 0 ~ 50
convertToStarUnicode(score : number) : string { convertToStarUnicode(score : Number) : string {
const fill_code = '\ue879' const fill_code = '\ue879'
const half_code = '\ue87a' const half_code = '\ue87a'
const null_code = '\ue87b' const null_code = '\ue87b'
...@@ -190,7 +190,7 @@ ...@@ -190,7 +190,7 @@
} }
.icon-star { .icon-star {
font-family: "UtsIconsFontFamily"; font-family: "UtsIconsFontFamily" !important;
font-size: 16px; font-size: 16px;
font-style: normal; font-style: normal;
color: #ffca3e; color: #ffca3e;
...@@ -236,5 +236,6 @@ ...@@ -236,5 +236,6 @@
padding: 20px; padding: 20px;
text-align: center; text-align: center;
background-color: #f8f8f8; background-color: #f8f8f8;
margin-bottom: 1px;
} }
</style> </style>
\ No newline at end of file
<template> <template>
<scroll-view class="page" :scroll-top="pageScrollTop"> <scroll-view ref="pageScrollView" class="page" :scroll-y="true" :rebound="false"
<view class="search-bar" ref="header"> @startnestedscroll="onStartNestedScroll" @nestedprescroll="onNestedPreScroll">
<view ref="header" class="search-bar">
<input placeholder="搜索..." /> <input placeholder="搜索..." />
</view> </view>
<view class="swiper-list"> <view class="swiper-list">
...@@ -37,7 +38,7 @@ ...@@ -37,7 +38,7 @@
type SwiperViewItem = { type SwiperViewItem = {
type : string, type : string,
name : string, name : string,
preload : Boolean, preload : boolean,
} }
/** /**
...@@ -58,7 +59,6 @@ ...@@ -58,7 +59,6 @@
}, },
data() { data() {
return { return {
pageScrollTop: 0,
swiperList: [ swiperList: [
{ {
type: 'UpdatedDate', type: 'UpdatedDate',
...@@ -79,23 +79,59 @@ ...@@ -79,23 +79,59 @@
} as SwiperViewItem } as SwiperViewItem
] as SwiperViewItem[], ] as SwiperViewItem[],
swiperIndex: -1, swiperIndex: -1,
$tabScrollView: null as null | INode, $pageScrollView: null as null | INode,
$indicatorNode: null as null | INode,
$headerHeight: 0, $headerHeight: 0,
$animationFinishIndex: 0, $animationFinishIndex: 0,
$tabScrollView: null as null | INode,
$indicatorNode: null as null | INode,
$swiperWidth: 0, $swiperWidth: 0,
$swiperTabsRect: [] as SwiperTabsItem[] $swiperTabsRect: [] as SwiperTabsItem[]
} }
}, },
onReady() { onReady() {
this.$tabScrollView = this.$refs.get('tabScroll') as INode this.$pageScrollView = this.$refs['pageScrollView'] as INode;
this.$indicatorNode = this.$refs.get('indicator') as INode
this.$headerHeight = (this.$refs["header"] as INode).offsetHeight this.$headerHeight = (this.$refs["header"] as INode).offsetHeight
this.$swiperWidth = (this.$refs["swiper"] as INode).getBoundingClientRect().width this.$swiperWidth = (this.$refs["swiper"] as INode).getBoundingClientRect().width
this.queryTabItemsSize() this.$tabScrollView = this.$refs.get('tabScroll') as INode
this.$indicatorNode = this.$refs.get('indicator') as INode
this.cacheTabItemsSize()
this.setSwiperIndex(0, true) this.setSwiperIndex(0, true)
}, },
methods: { methods: {
// TODO
onStartNestedScroll(event : StartNestedScrollEvent) : boolean {
return true
},
onNestedPreScroll(event : NestedPreScrollEvent) {
const deltaY = event.deltaY
const scrollTop = this.$pageScrollView!.scrollTop
// console.log("deltaY=" + deltaY, "pageScrollTop=" + scrollTop)
/// 优先处理父容器滚动,父容器不能滚动时在滚动子
// 向上滚动
if (deltaY > 0) {
// 如果父容器 header scrollTop < offsetHeight,先滚动父容器
if (scrollTop < this.$headerHeight) {
// console.log('pageScrollTop=' + scrollTop)
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())
}
}
} else if (deltaY < 0) {
// 向下滚动,如果父容器 scrollTop > 0,通知子被父容器消耗,然后滚动到 0
if (scrollTop > 0) {
event.consumed(event.deltaX, deltaY)
this.$pageScrollView!.scrollBy(event.deltaX, deltaY)
}
}
},
onTabClick(index : number) { onTabClick(index : number) {
this.setSwiperIndex(index, false) this.setSwiperIndex(index, false)
}, },
...@@ -103,16 +139,16 @@ ...@@ -103,16 +139,16 @@
// 微信 skyline 每项完成触发 Animationfinish,偏移值重置 // 微信 skyline 每项完成触发 Animationfinish,偏移值重置
// 微信 webview 全部完成触发 Animationfinish,偏移值累加 // 微信 webview 全部完成触发 Animationfinish,偏移值累加
// 在滑动到下一个项的过程中,再次反向滑动,偏移值递减 // 在滑动到下一个项的过程中,再次反向滑动,偏移值递减
// uni-app-x 微信 webview 行为一致 // uni-app-x 微信 webview 行为一致
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
...@@ -133,7 +169,7 @@ ...@@ -133,7 +169,7 @@
this.setSwiperIndex(e.detail.current, true) this.setSwiperIndex(e.detail.current, true)
this.$animationFinishIndex = e.detail.current this.$animationFinishIndex = e.detail.current
}, },
queryTabItemsSize() { cacheTabItemsSize() {
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) => {
...@@ -143,7 +179,7 @@ ...@@ -143,7 +179,7 @@
} as SwiperTabsItem) } as SwiperTabsItem)
}) })
}, },
setSwiperIndex(index : Number, updateIndicator : Boolean) { setSwiperIndex(index : number, updateIndicator : boolean) {
if (this.swiperIndex === index) { if (this.swiperIndex === index) {
return return
} }
...@@ -171,7 +207,7 @@ ...@@ -171,7 +207,7 @@
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)
}, },
initSwiperItemPage(index : Number) { initSwiperItemPage(index : number) {
if (!this.swiperList[index].preload) { if (!this.swiperList[index].preload) {
this.swiperList[index].preload = true; this.swiperList[index].preload = true;
(this.$refs["longPage"]! as ComponentPublicInstance[])[index].$callMethod('loadData') (this.$refs["longPage"]! as ComponentPublicInstance[])[index].$callMethod('loadData')
...@@ -195,8 +231,7 @@ ...@@ -195,8 +231,7 @@
} }
.swiper-list { .swiper-list {
flex: 1; height: 100%;
/* height: 100%; */
} }
.swiper-tabs { .swiper-tabs {
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册