Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
DCloud
hello uni-app x
提交
bddc0f42
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看板
提交
bddc0f42
编写于
9月 02, 2023
作者:
杜庆泉
浏览文件
操作
浏览文件
下载
差异文件
Merge branch 'master' of
https://gitcode.net/dcloud/hello-uni-app-x
into master
上级
41057398
4ab1c52b
变更
2
显示空白变更内容
内联
并排
Showing
2 changed file
with
59 addition
and
23 deletion
+59
-23
pages/template/long-list/long-list-page.uvue
pages/template/long-list/long-list-page.uvue
+7
-6
pages/template/long-list/long-list.uvue
pages/template/long-list/long-list.uvue
+52
-17
未找到文件。
pages/template/long-list/long-list-page.uvue
浏览文件 @
bddc0f42
<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 底部 -->
<template v-for="(item, index) in dataList" :key="index">
<list-item class="list-item">
...
...
@@ -102,9 +103,8 @@
}
this.loading = true
// TODO request data 没有拼接到 url 中,暂时手动拼接
uni.request<ResponseDataType>({
url:
`${SERVER_URL}?type=${this.type}&page=${this.$currentPage}&page_size=${PAGE_SIZE}`
,
url:
SERVER_URL
,
data: {
type: this.type,
page: this.$currentPage,
...
...
@@ -133,7 +133,7 @@
})
},
// score 0 ~ 50
convertToStarUnicode(score :
n
umber) : string {
convertToStarUnicode(score :
N
umber) : string {
const fill_code = '\ue879'
const half_code = '\ue87a'
const null_code = '\ue87b'
...
...
@@ -190,7 +190,7 @@
}
.icon-star {
font-family: "UtsIconsFontFamily";
font-family: "UtsIconsFontFamily"
!important
;
font-size: 16px;
font-style: normal;
color: #ffca3e;
...
...
@@ -236,5 +236,6 @@
padding: 20px;
text-align: center;
background-color: #f8f8f8;
margin-bottom: 1px;
}
</style>
\ No newline at end of file
pages/template/long-list/long-list.uvue
浏览文件 @
bddc0f42
<template>
<scroll-view class="page" :scroll-top="pageScrollTop">
<view class="search-bar" ref="header">
<scroll-view ref="pageScrollView" class="page" :scroll-y="true" :rebound="false"
@startnestedscroll="onStartNestedScroll" @nestedprescroll="onNestedPreScroll">
<view ref="header" class="search-bar">
<input placeholder="搜索..." />
</view>
<view class="swiper-list">
...
...
@@ -37,7 +38,7 @@
type SwiperViewItem = {
type : string,
name : string,
preload :
B
oolean,
preload :
b
oolean,
}
/**
...
...
@@ -58,7 +59,6 @@
},
data() {
return {
pageScrollTop: 0,
swiperList: [
{
type: 'UpdatedDate',
...
...
@@ -79,23 +79,59 @@
} as SwiperViewItem
] as SwiperViewItem[],
swiperIndex: -1,
$tabScrollView: null as null | INode,
$indicatorNode: null as null | INode,
$pageScrollView: null as null | INode,
$headerHeight: 0,
$animationFinishIndex: 0,
$tabScrollView: null as null | INode,
$indicatorNode: null as null | INode,
$swiperWidth: 0,
$swiperTabsRect: [] as SwiperTabsItem[]
}
},
onReady() {
this.$tabScrollView = this.$refs.get('tabScroll') as INode
this.$indicatorNode = this.$refs.get('indicator') as INode
this.$pageScrollView = this.$refs['pageScrollView'] as INode;
this.$headerHeight = (this.$refs["header"] as INode).offsetHeight
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)
},
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) {
this.setSwiperIndex(index, false)
},
...
...
@@ -103,16 +139,16 @@
// 微信 skyline 每项完成触发 Animationfinish,偏移值重置
// 微信 webview 全部完成触发 Animationfinish,偏移值累加
// 在滑动到下一个项的过程中,再次反向滑动,偏移值递减
// uni-app-x 微信 webview 行为一致
// 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
...
...
@@ -133,7 +169,7 @@
this.setSwiperIndex(e.detail.current, true)
this.$animationFinishIndex = e.detail.current
},
query
TabItemsSize() {
cache
TabItemsSize() {
this.$swiperTabsRect.length = 0
const tabs = this.$refs["swipertab"] as INode[]
tabs.forEach((node) => {
...
...
@@ -143,7 +179,7 @@
} as SwiperTabsItem)
})
},
setSwiperIndex(index :
Number, updateIndicator : B
oolean) {
setSwiperIndex(index :
number, updateIndicator : b
oolean) {
if (this.swiperIndex === index) {
return
}
...
...
@@ -171,7 +207,7 @@
const scroll_x = x - this.$swiperWidth / 2
this.$tabScrollView?.setAttribute('scrollLeft', scroll_x)
},
initSwiperItemPage(index :
N
umber) {
initSwiperItemPage(index :
n
umber) {
if (!this.swiperList[index].preload) {
this.swiperList[index].preload = true;
(this.$refs["longPage"]! as ComponentPublicInstance[])[index].$callMethod('loadData')
...
...
@@ -195,8 +231,7 @@
}
.swiper-list {
flex: 1;
/* height: 100%; */
height: 100%;
}
.swiper-tabs {
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录